# How To Customize elements in dashboard page

**URL:** <https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513>\
**Category:** Grafana\
**Created:** [April 18, 2019, 9:23am UTC](https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513 "2019-04-18T09:23:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivantang](https://avatars.discourse-cdn.com/v4/letter/i/f08c70/32.png) [@ivantang](https://community.grafana.com/u/ivantang)\
**Post date:** [April 18, 2019, 9:23am UTC](https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513/1 "2019-04-18T09:23:17Z")

</div>

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](https://us1.discourse-cdn.com/grafana/original/2X/6/6fa3e0f7a65e3173be7ebf82b78d813ba432a9c1.png)

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

---

<div class="post-metadata">

**Author:** ![svetb](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/svetb/32/3307_2.png) [@svetb](https://community.grafana.com/u/svetb)\
**Post date:** [April 18, 2019, 1:04pm UTC](https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513/2 "2019-04-18T13:04:53Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![ivantang](https://avatars.discourse-cdn.com/v4/letter/i/f08c70/32.png) [@ivantang](https://community.grafana.com/u/ivantang)\
**Post date:** [April 23, 2019, 2:13pm UTC](https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513/3 "2019-04-23T14:13:32Z")

</div>

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](http://github.com/grafana/grafana))

---

<div class="post-metadata">

**Author:** ![svetb](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/svetb/32/3307_2.png) [@svetb](https://community.grafana.com/u/svetb)\
**Post date:** [April 23, 2019, 4:26pm UTC](https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513/4 "2019-04-23T16:26:12Z")

</div>

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 🙂 )

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.

---

<div class="post-metadata">

**Author:** ![thomasmatt88](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@thomasmatt88](https://community.grafana.com/u/thomasmatt88)\
**Post date:** [July 18, 2020, 10:43pm UTC](https://community.grafana.com/t/how-to-customize-elements-in-dashboard-page/16513/5 "2020-07-18T22:43:23Z")

</div>

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