Custom Styling Guide
  • 10 Jan 2022
  • 1 Minute zum Lesen
  • Dunkel
    Licht
  • pdf

Custom Styling Guide

  • Dunkel
    Licht
  • pdf

The content is currently unavailable in German. You are viewing the default English version.
Artikel-Zusammenfassung

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:



War dieser Artikel hilfreich?