Web Styling Cookbook

This page covers recipes for common tasks using the custom CSS properties recognized by the components provided by the web SDK. If you want to make themes that will work across platforms, you should use the Custom Themes system instead of CSS.

🚧

CSS Properties are only supported in versions < 2.0.0

📘

Check the reference for the full CSS documentation.

Check the CSS property reference for all of the available CSS properties.

Popup vs. Timeline Mode

Widgets can be styled to look differently when in popup mode vs. timeline mode. The mode attribute can be targeted in a CSS rule to style the two modes differently.

/* Polls are now accented green in timeline mode */
livelike-widgets[mode="timeline"] {
  --theme-poll-primary-color: green;
  --theme-poll-secondary-color: green;
}

Interactive vs. Disabled Widgets

Widgets in Timeline Mode that are loaded from history are disabled. Only new ones that are published while a timeline is being displayed will be interactive. These widgets can be themed differently by targeting the disabled attribute in a CSS rule. This can be used to differentiate interactive widgets from disabled ones:

/* Disabled quiz widgets are now accented gray */
livelike-text-quiz[disabled],
livelike-image-quiz[disabled] {
  --theme-quiz-primary-color: gray;
  --theme-quiz-secondary-color: gray;
}

Hiding Borders on Past Quiz Widgets

/* Past quiz widgets no longer show borders on the correct answers */
livelike-text-quiz[disabled],
livelike-image-quiz[disabled] {
  --theme-correct-border-color: transparent;
}