How to edit existing design themes

4 posts / 0 new
Last post
How to edit existing design themes

I want to change the colors and style for the top-navigator.
Have tried to edit  some CSS parameters in:  "vdir\common\layouts\xxxxx\themes", no luck so I need hints and documntation. 

Terje's picture
Editing the layouts


The desktop (the frame around the dashboard) which contains the top navigation does not belong to a theme - only the dashboards itself does.
But you can edit the layout files found under /common/layouts/. 
The files under the themes directory is refered to as the default theme for the active layout. The other themes you can select in the editor is located under /common/themes/ and consists of css files and color files.

I recommend that you take a copy of the layout you are currently using and assign the new layout to your desktop(s). A layout is assigned to a desktop in the administraton. I also strongly recommend using Chromes developer tool (hit F12). In the developer tool you can inspect the HTML and see exactly which css is used on an element and in what file that css is found.

The CSS-file in the layout you'll want to edit is named custom.css.

So, the top navigation has a set of css classes for the background and the content (tabs/buttons, title etc).
The tabs/buttons uses the ".dmt-state-..." classes. You'll see that there are classes for every state the tab can have - default, hover, active etc.


I hope this answered your question and help you on the way to customize your own layout and theme. 



Endre layout

Hei !

Anbefaler du å editere direkte i Standard layout, eller å lage en egen?

Kan jeg endre default diagramegenskaper i layouten, hvis ja: Hvor?

Kan jeg endre default skriftstørrelse i grafelementet, hvis ja: Hvor ?

Får jeg svar på dette, er jeg godt i gang :-)


Terje's picture
Endre layout

Hei, Randi!

Jeg vil nok anbefale at du tar en kopi av orginalen og bruker den, så slipper du at endringene du gjør blir overskrevet ved oppgradering av Business Analayze :)

Default grafegenskaper (også skriftstørrelser) finner du i filen highcharts.json som ligger her: BusinessAnalyze\Common\Layouts\<Din Layout>\Themes\Configs\Default
Dokumentasjon til highcharts:

Konfigurering av andre elementer (på dashbordet) enn graf gjøres i CSS-filene som ligger på samme sted.
I CSS-filene vil du se referanser til farge-filen og de har formatet: @referansenavn@


Endring av default farger gjøres i filen Default.json som ligger her: BusinessAnalyze\Common\Layouts\<Din Layout>\Themes\Colors

Default farger på grafen finner du helt nederst i filen. Der er det en lang, kommaseparert, liste med farger.


Håper dette hjelper deg i gang :)


Log in or register to post comments