LiveLike

The LiveLike Developer Hub

Welcome to the LiveLike developer hub. You'll find comprehensive guides and documentation to help you start working with LiveLike as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

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;
}

Updated 11 months ago

Web Styling Cookbook


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.