目次 x
    Custom Styling Guide
    • 20 Sep 2023
    • 1 読む分
    • 印刷する
    • 闇
      光
    • PDF
    目次

    Custom Styling Guide

    • 更新日 20 Sep 2023
    • 1 読む分
    • 印刷する
    • 闇
      光
    • PDF
    The content is currently unavailable in Ja - 日本語. You are viewing the default English version.
    記事の要約

    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:


    この記事は役に立ちましたか?
    What's Next