Skip to main content

Styles

The Styles editor allows adding new CSS styles and overrides the default using the dedicated code editor with CSS syntax highlight.

Version

Supported since Dynamic Text panel 3.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 defined styles in the source code.

Default styles
src/styles.ts
loading...

Padding and margins​

To display content without padding and margins override the parent CSS style.

& {
  padding: 0;
  margin: 0;
}

Code Syntax Highlight​

The code syntax highlight is based on the highlight.js library, which supports major languages.

Random Walk data displayed with highlight and no margins or paddings.
Random Walk data displayed with highlight and no margins or paddings.

Styling​

We included the Accessibility (a11y) syntax highlight 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
src/styles/a11y-light.css
loading...