Un peu de personnalisation CSS

À ce stade, vous disposez d'un client fonctionnel complet utilisant Vonage Video. Cette dernière étape démontrera une personnalisation CSS de base.

1. Ouvrez votre fichier app.css vierge dans votre éditeur de code et ajoutez-y le code suivant :

   widgets.copy

   body, html {
       background-color: gray;
       height: 100%;
   }
   #videos {
       position: relative;
       width: 70%;
       height: 100%;
       float: left;
   }
   #subscriber {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       margin-left: 50px;
       z-index: 10;
   }
   #publisher {
       position: absolute;
       width: 360px;
       height: 240px;
       bottom: 10px;
       left: 10px;
       z-index: 100;
       border: 3px solid white;
       border-radius: 3px;
   }
   #textchat {
       position: relative;
       width: 20%;
       float: right;
       right: 0;
       height: 100%;
       background-color: #333;
   }
   #history {
       width: 100%;
       height: calc(100% - 40px);
       overflow: auto;
   }
   input#msgTxt {
               height: 40px;
               position: absolute;
               bottom: 0;
               width: 100%;
   }
   #history .mine {
       color: #00FF00;
       text-align: right;
       margin-right: 10px;
   }
   #history .theirs {
       color: #00FFFF;
       margin-left: 10px;
   }
   

2. Une fois que vous avez enregistré le CSS, rouvrez votre index dans deux onglets de navigateur distincts. Vous devriez maintenant voir les messages épinglés à droite ou à gauche en fonction de l'expéditeur. La page est configurée de manière à permettre le chat vidéo en même temps que le chat texte.