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 since version 3.0.0 and dashboard variables in CSS styles since 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.

Override

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

Default styles

src/components/Text/Text.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.

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...

Table styling example

Here I have a simple, yet amazing styling approach. For instance, you can display the status of your devices/servers as green or red dots in a table.

Simple, yet stylish way to display unit status.

To have this on your dashboard, copy the Content and CSS Styles parameters from below.

Content

<table>
  <tbody>
    <tr>
      <td style="width: 10%;" colspan="10" class="header">
        SPC (last 10 samples)
      </td>
    </tr>
    <tr>
      <td style="width: 10%;"><span class="dot_niO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_niO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
      <td style="width: 10%;"><span class="dot_iO"></span></td>
    </tr>
    <tr>
      <td style="text-align: left;" colspan="5">last</td>
      <td style="text-align: right;" colspan="5">10th</td>
    </tr>
    <tr>
      <td style="width: 10%;" colspan="5" class="down">
        Control interval: every 50 pcs
      </td>
      <td style="text-align: right;" colspan="5"></td>
    </tr>
  </tbody>
</table>

CSS Styles

.dot_iO {
  height: 45px;
  width: 45px;
  background-color: #56ff56;
  border-radius: 50%;
  border: 2px solid black;
  display: inline-block;
}

.dot_niO {
  height: 45px;
  width: 45px;
  background-color: #ff5656;
  border-radius: 50%;
  border: 2px solid black;
  display: inline-block;
}

table {
  border-style: unset !important;
}

tr td {
  border-style: unset !important;
}