Customize the grafana icon and color scheme

css grafana
Mdomin45 picture Mdomin45 · Jun 25, 2017 · Viewed 15.5k times · Source

Is there any way to customize the grafana dashboard? I figured there were CSS files some place in the installation directory, but I cannot find them. I'm currently running it locally, but the plan is to move it to a server eventually. I'd like to change the icon at the top left as well as the color scheme of the UI.

Answer

Daniel Lee picture Daniel Lee · Jun 26, 2017

You don't mention what OS you installed Grafana on. For Ubuntu/Debian, the css files are found at /usr/share/grafana/public/css. There is no built-in way to customize the appearance. You can change the CSS files but they will get overwritten if you upgrade Grafana.

You can however fork Grafana and change as much as you want to.

The instructions for building Grafana are here: http://docs.grafana.org/project/building_from_source/

The frontend files are located in the public subdirectory and when you run the Grunt build script, the CSS and Javascript files are generated in the public_gen directory. So do not make your changes in the public_gen directory as they will get overwritten.

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More