How can I Change the Style (CSS, font, etc.) of my Dashboard?

To change elements such as the font style, size, or even more complex style changes you can rely on CSS. In Jira and Confluence Server or Data Center you can modify directly the CSS, in Jira following this instructions: How to hide elements in Jira using CSS or JavaScript and in Confluence following this other instructions: Styling Confluence with CSS | Confluence Data Center and Server.

However, this type of changes are more tricky in cloud instances. Because we need to rely on Themes from the Atlassian Marketplace.

A browser plugin to customize my dashboards

For those avid users that prefer their own customized options to refine every single detail, a browser plugin can suit their needs.

Stylebot for Chrome

Stylebot is a plugin for Chrome that allows to configure elements from any web: Font, color, margins, visibility, custom CSS…

In the “Basic” mode you can modify different elements without using CSS, but in case you want to create advanced styles, select the “Code” option.

If you don’t know how to start, you can copy and paste the following examples and create your own style:

Example to edit the font of the first slide

@import url(https://fonts.googleapis.com/css2?family=Fira+Code:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
body{
  font-style: cursive !important;
}
div.wallboard-slide.slide-number-0.active {
  font-family: Fira Code;
}

Example to edit the font for all slides

@import url(https://fonts.googleapis.com/css2?family=Fira+Code:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

div.wallboard-slide.active {
  font-family: Fira Code;
}