# Side tab menu at the bottom and/or on the top

**URL:** https://discourse.nodered.org/t/side-tab-menu-at-the-bottom-and-or-on-the-top/37233
**Category:** Dashboard
**Created:** [9 December 2020 11:48 UTC](https://discourse.nodered.org/t/side-tab-menu-at-the-bottom-and-or-on-the-top/37233 "2020-12-09T11:48:15Z")
**Posts on this page:** 1
**Showing post:** 6

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [10 December 2020 11:27 UTC](https://discourse.nodered.org/t/side-tab-menu-at-the-bottom-and-or-on-the-top/37233/6 "2020-12-10T11:27:32Z")

</div>

Well, it is not full theme for dashboard, it contains overrides for elements I have in use so kind of incomplete stuff for sharing. I use only button, dropdown and ui\_template from dashboard standard components.  
And the look of cards and widget containers is just colors, borders, rounded corners and shadows (inner/outer) for them. Just couple of CSS rules.  
It maybe another good starting point but the real art should still be created by the artist.

```auto
<style id="custom-styles">
:root {
  --color-green-primary: rgb(51, 204, 51);
  --color-green-secondary: rgb(26, 101, 26);
  --color-red-primary: rgb(255, 0, 0);
  --color-red-secondary: rgba(153,0,0,1);
  --color-gray-primary:rgba(40,40,40,1);
  --color-gray-secondary:rgba(65,65,65,1);
  --color-text-primary: rgb(230, 226, 209);
  --color-widget-border: rgb(105, 100, 100);
}
.masonry-container {
    position: relative;
    width: 100%;
    height:100%;
    margin: 0 auto;
    background-image: linear-gradient(0deg, var(--nr-dashboard-widgetBgndColor), var(--color-gray-secondary));
}
.nr-dashboard-theme .nr-dashboard-template {
     background-color: #33333300; 
}

.nr-dashboard-cardcontainer {
    position: relative;
    box-shadow: inset 0px 4px 4px 0px #100f0f6e;
    border-radius: 15px;
}
.nr-dashboard-theme ui-card-panel {
    font-family: Calibri;
    background-color: #33333300;
    color:var(--color-text-primary);
    border-radius: 15px;
    box-shadow: 0 0 8px 0px #00000080;
    border: 1px solid #555555;
    border-top: 2px solid #484848;
}
body.nr-dashboard-theme md-content md-card {
    background-color: #33333300;
    color: var(--color-text-primary);
    text-shadow: 4px 2px 4px #00000044;
    box-shadow: inset 0px 10px 20px 0px #0000006b;
    border-radius: 12px;
    border: 1px solid #565655e6;
    border-top: 2px solid #4b4b4a;
}
</style>

```

> [@paintbrush Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139):
>
> Couple of things first.. Many things can happen if you start to play with CSS. You may break whole thing, but you can make your page really good looking. But be aware that it can be addictive. The result of your adjustments is art. So if you are changing CSS for your dashboard, you are an artist. (and a little bit a programmer of course) I'm not an expert of art nor the CSS. The tools Browser developer tools. [https://developers.google.com/web/tools/chrome-devtools/css](https://developers.google.com/web/tools/chrome-devtools/css) The main too…

---

_[View the full topic](https://discourse.nodered.org/t/side-tab-menu-at-the-bottom-and-or-on-the-top/37233)._