Recipes
Application Interface
Add custom CSS to a UI component

Add custom CSS to a UI component

Problem

You want to customize the look-and-feel of a Dynaboard component beyond what the built-in controls offer.

Solution

  1. Select the component you would like to edit
  2. In the right editor sidebar, scroll to find the Style » Custom CSS panel
  3. Enter your custom CSS in the text editor below, like for a Text component:
::component {
  /* Styles applied to the component itself. */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
 
::wrapper {
  /* Styles applied to the wrapper div around the component. */
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
  border-radius: 4px;
  padding: 8px;
}

Discussion

::component {
  background: {{ backgroundInput.value }};
}
  • All CSS properties are supported with a number of common syntax extensions enabled by emotion (opens in a new tab). If you need something that is not yet supported, drop us a line.
  • CSS @keyframes (opens in a new tab) are supported. For example, you can apply the following Custom CSS to any component to make it animate by growing and shrinking every 4 seconds:
::component {
  animation: animate 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
 
@keyframes animate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
::wrapper {
  width: 100%;
  
  @media (max-width: 800px) {
    width: 50%;
  }
}

Known Limitations

  • Some CSS features like top-level @media queries are not yet supported.

See also