Inhalt x
    Custom Styling Guide
    • 20 Sep 2023
    • 1 Minute zum Lesen
    • Drucken
    • Dunkel
      Licht
    • pdf
    Inhalt

    Custom Styling Guide

    • Aktualisiert am 20 Sep 2023
    • 1 Minute zum Lesen
    • Drucken
    • Dunkel
      Licht
    • pdf
    The content is currently unavailable in German. You are viewing the default English version.
    Artikel-Zusammenfassung

    The styling of the Live experience can be customized. Currently, these customizations have to be applied by the ScreenMeet team.

     The illustrations below will provide a general guideline for customized elements.

    Below is a template with the default values and a column for desired changes.

    Once ready, please download the Excel document, input your desired colors, and attach it to an email to support@screenmeet.com or within your support desk ticket.

    https://docs.google.com/spreadsheets/d/10qnA8T_yCUyJd5RClD8i7CVhq1pVD8zl/edit?usp=sharing&ouid=114676371658156094453&rtpof=true&sd=true


    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:


    War dieser Artikel hilfreich?
    What's Next