Customize/change HTML of dashboards

Some additional notes:
You can make a new theme entirely including different icon (colours).
Copy an existing theme folder to a new theme folder as @kdeutsch suggested.

Make sure you change the name in theme.json to something unique, I called mine Darker.
From User | Color theme you can toggle between possible themes. From User | Edit profile | User interface theme | Set custom theme you can set your new uniquely named theme easier.
You need to stop and start your site to make your new theme visible first.

You can change images in the images folder, as long as they keep the same name.

If you need to make icons bigger, most are svg, you can just resize them in css. De-minifying the css makes it a lot better to read and change.

#main_menu img.icon {
    height: 20px;
    width: 20px;
}

If you need to change colors of a svg, you need to change the fill inside the svg files.

<style type="text/css">
	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F6F6F6;}
</style>

When images are missing in your theme, it will get them from the facelift theme instead.

<img src="themes/darker/images/icon_main_monitoring.svg" class="icon">
<img src="themes/facelift/images/icon_main_monitoring_active.svg" class="icon active">

But when you copy a (changed) version of that image in your theme images folder, that will be used instead.

<img src="themes/darker/images/icon_main_monitoring.svg" class="icon">
<img src="themes/darker/images/icon_main_monitoring_active.svg" class="icon active">

When doing updates, make sure to copy your custom theme to the new updated site.

3 Likes