Skip to main content

Styles

The styles editor allows you to define new CSS styles and override the default ones using the dedicated code editor with CSS syntax highlighting.

Dashboard variables are replaced automatically in CSS styles.

Version

Dynamic Text Panel supports dashboard variables starting from version 3.0.0 and dashboard variables in CSS styles starting from version 4.0.0.

Add new styles​

You can define your styles and use them in the template.

Styles​

td.name {
  border: 0;
  background-color: #5d3fc4;
  color: white;
}

b.name {
  font-family: silom;
  font-size: 20px;
}

Template​

<td class="name">
  <p><b class="name">{{first_name}} {{last_name}}</b></p>
</td>
Add custom styles for table cells and bold text.
Add custom styles for table cells and bold text.

Override​

You can see all the defined styles in the source code.

Default styles
src/styles.ts
loading...

Padding and margins​

To display content without padding and margins, you need to override the parent CSS style.

& {
  padding: 0;
  margin: 0;
}

Code Syntax Highlight​

The code syntax highlighting is based on the highlight.js library, which supports key programming languages.

Random Walk data displayed with the highlighting and without margins or paddings.
Random Walk data displayed with the highlighting and without margins or paddings.

Styling​

We included the Accessibility (A11Y) syntax highlighting style for light and dark themes. You can override it in the styles editor by copying one of the styles from the project source files.

A11Y light theme
src/styles/a11y-light.css
loading...