Contenu x
    Custom Styling Guide
    • 10 Jan 2022
    • 1 Minute à lire
    • Impression
    • Sombre
      Lumière
    • PDF
    Contenu

    Custom Styling Guide

    • Mis à jour le 10 Jan 2022
    • 1 Minute à lire
    • Impression
    • Sombre
      Lumière
    • PDF
    The content is currently unavailable in French. You are viewing the default English version.
    Résumé de l’article

    The styling of the Live2 experience can be customized. Currently, these customizations have to be applied by the ScreenMeet team. The illustrations below will provide a general guideline on which elements can be customized.


    Color Variables

    The majority of the styling is derived from a set of color variables. These variables can be overridden to produce different looks for the product.

    The following color variables and their default colors are:

    1.     primary-brackground:  #2485CF  
    2.     primary-foreground:  #ffffff  
    3.     secondary-background:  #363037  
    4.     secondary-foreground:  #ffffff  
    5.     danger-background:  #D73930  
    6.     panel-background:  #323232  
    7.     room-background:  #111B24  
    8.     lobby-background:  #f6f6f6  


    The illustrations below demonstrate how these values apply to various parts of the application:

    Lobby


    In-Room


    Dialogs


    Testing Styles in Real Time

    You can try and preview your styles in real time by using the Chrome inspector tools.

    1. Enter a live call
    2. Open the chrome developer tools, then go to the Elements tab and then the Styles sub-tab
    3. Select the root <html> element
    4. You will see the variables above defines as CSS variables in the :root style element:
    5.  Modify the variables in real time to see the changes reflected on the page.

    Example Customizations:


    Cet article vous a-t-il été utile ?
    What's Next