How To Customize elements in dashboard page

Grafana
1

I built the grafana from source. I would like to hide/delete these elements(as shown in Figure) in dashboard page:

  1. The top bar for dashboard selection
  2. The drop down items
  3. The share button on the top-right corner
  4. The side menu on the left

grafana
grafana1961Ă—902 88.1 KB

For above elements, what contents of source files should I change/delete?

1 Like
2

Maybe not the most elegant way to do it, but you can easily remove most of these by overriding the CSS (and setting visibility to hidden for the relevant components).

3

Thank you for your reply, svetb! May I know which CSS files and which part should I replace for the required changes. I can’t find them (The source is: github.com/grafana/grafana)

4

Using the Chrome developer tools (or similar) you can figure out the classes that the relevant components belong to. E.g. navbar-button--share, sidemenu, etc. If you search the Grafana repo for these keywords, you’ll find the relevant scss files where the styles are defined. Adding visibility: hidden to the respective definitions will hide the elements.

Note that, rather than editing all the original (s)css files themselves, it would be considered better practice to introduce an additional CSS file that simply overrides the defaults in those existing files. (they’re called cascading stylesheets for a reason :slight_smile: )

Another note (and this is not best practice), but if you just want to experiment, you don’t actually need to build from source every time you make CSS changes. You can simply edit and introduce additional CSS into a pre-built tree.

5

“You can simply edit and introduce additional CSS into a pre-built tree.” How can you edit Grafana’s pre-built DOM directly?