🖌 Customize dashboard CSS

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

This topic is started because of many questions about this.
How do you did it and can you share and ...
image

But as I stated above the CSS is art and art is product of artist and everybody can be the one, so I found the best thing to share is the starting point and then everybody can do the art, ask specific questions, get and give help on this topic.

And here's the stating point (Based on Node-RED dark theme, you can choose light or custom, cos the molbert and colors will be always yours)

[{"id":"142dae9.49d4751","type":"ui_template","z":"5f1bed63.cb2a94","group":"3d9e45e.bcd50ba","name":"Dashboard stylesheet","order":1,"width":0,"height":0,"format":"<style>\n/*\nIt is reasnoble to declare the colors as CSS variables\nso they can be easily called by name where needed.\n\nYou can see that in many places the variables are not used. Change it!\n*/\n\n:root {\n  --color-green-primary: rgb(51, 204, 51);\n  --color-green-secondary: rgb(26, 101, 26);\n  --color-red-primary: rgb(255, 0, 0);\n  --color-red-secondary: rgba(153,0,0,1);\n  --color-gray-primary:rgba(40,40,40,1);\n  --color-gray-secondary:rgba(65,65,65,1);\n  --color-text-primary: rgb(230, 226, 209);\n  --color-widget-border: rgb(84, 78, 78);\n}\n\n/*\nAll CSS adjustments are commented out.\nTurn rules on one by one and see the changes.\nDon't use too many elements cos it wil be confusing\nStart with simple elements like text, slider or button\n\nMany of elements like buttons have states, \nthose rules must be found and adjusted also.\n*/\n\n/*\n.masonry-container {\n    position: relative;\n    width: 100%;\n    height:100%;\n    margin: 0 auto;\n    background: rgb(255,0,0);\n    background: linear-gradient(180deg,  var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);\n}\n*/\n\n/*\n.nr-dashboard-cardcontainer {\n    position: relative;\n    box-shadow: inset 0px 1px 4px 0px #000000bb;\n    border-radius: 15px;\n}\n*/\n\n /*\n.nr-dashboard-theme ui-card-panel {\n    background-color: #33333300;\n    color:var(--color-text-primary);\n    border-radius: 15px;\n    box-shadow: 0 0 8px 0px #00000080;\n}\n*/\n\n/* \nbody.nr-dashboard-theme md-content md-card {\n    background-color: #33333300;\n    color: var(--color-text-primary);\n    text-shadow: 4px 2px 4px #00000045;\n    box-shadow: 0 -1px 5px 1px #00000045;\n    border-radius: 12px;\n    border: 1px solid var(--color-widget-border);\n}\n */\n\n\n/*\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n    color: var(--color-text-primary);\n}\n*/\n\n\n/*\n.md-button {\n    display: inline-block;\n    position: relative;\n    cursor: pointer;\n    min-height: 36px;\n    min-width: 88px;\n    line-height: 36px;\n    vertical-align: middle;\n    align-items: center;\n    text-align: center;\n    border-radius: 12px;\n    box-sizing: border-box;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    outline: none;\n    border: 0;\n    padding: 0 6px;\n    margin: 6px 8px;\n    background: transparent;\n    color:var(--color-text-primary);\n    white-space: nowrap;\n    text-transform: uppercase;\n    font-weight: 500;\n    font-size: 14px;\n    font-style: inherit;\n    font-variant: inherit;\n    font-family: inherit;\n    text-decoration: none;\n    overflow: hidden;\n    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n\n*/\n\n/*\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n    background-color: #88888800;\n    color:var(--color-text-primary);\n}\n*/\n\n/*\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n    background-color: #88888855;\n}\n*/\n\n\n/*\nmd-slider .md-thumb {\n    z-index: 1;\n    position: absolute;\n    left: -10px;\n    top: 14px;\n    width: 20px;\n    height: 20px;\n    border-radius: 20px;\n    -webkit-transform: scale(.7);\n    transform: scale(.7);\n    transition: all .4s cubic-bezier(.25,.8,.25,1);\n    box-shadow: 0 0 6px #00000070;\n}\n\n*/\n\n/*\nAdvanced stuff - dynamic change of card CSS\n\nClasses here can be used to make colored stripe at the top of card\nUsage is not in here, but they are added to md-card when needed within another template\n\n.carderr {\n    background: rgb(255,0,0);\n    background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);\n}\n.cardok {\n    background: rgb(39,255,0);\n    background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);\n}\n*/\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":520,"y":530,"wires":[[]]},{"id":"3d9e45e.bcd50ba","type":"ui_group","z":"","name":"Radial Gauges","tab":"e625ce36.34cf3","order":2,"disp":true,"width":"6","collapse":false},{"id":"e625ce36.34cf3","type":"ui_tab","z":"","name":"Widgets","icon":"dashboard","order":2,"disabled":false,"hidden":true}]

The true work of art is but a shadow of the divine perfection
Michelangelo

10 Likes

I have always accepted the button behavior as it is so I can't give advise immediately. And this topic is more directed to design than the behavior of elements, but I have seen your statements on topic of button behavior and there is some points I really agree. But let's move this question to another dedicated topic then. Cos we can't change the md-button behavior with css with that easily I think.

Thank you @hotNipi.

Pete, don't you just wrap the icon in a button?

I've done work on Dashboard and managed to get buttons to provide haptic feedback (i.e. vibration) no problem as this is part of their intrinsic mobile behavciour. What I do NOT have working is haptic feedback from ICONS. Ideas/comments (sorry for the edit - I got it wrong last night). It would help if I could figure out how to insert images in this reply...

TotallyInformation: Because I didn't think about it, most likely..

3 Likes

So where the buttons have one role, so 3 buttons give on, off or auto back to my BigTimer, the icons are on/off toggle which send ON or OFF and also change colour depending not on THEIR state but on the state of the gadget after they have been pressed... I did all of this some time ago then kind of lost the plot... so this all works but without audio feedback on those icons - the buttons DO have said feedback.

Samsung removed haptic option from A series at least. So I can't test but if it works for buttons, will it work for links also? Cos you can present icon in <a> tags thus might work.
Ripple added to icon.
May you try it with ui_template

<style>
    .md-icon-button:not(.md-button){
    position: relative;
    overflow: visible;
    padding:5px;
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    margin: auto;
    line-height: initial;
}
.md-icon-button:not(.md-button) .md-ripple-container{
    overflow: visible;
}
</style>
<div>
    <a class="md-icon-button" md-ink-ripple>
        <i class="fa fa-home" style="font-size:1.6em"></i>
    </a>
</div>

Do you have a testing methodology (or environment) for css? I find the biggest issue is the time it takes to make a change in the ui_template, try it, make another change ...

No. Same methods, and yes it takes the time. The more you get the experiences, the faster you get. Nothing more to advise :smiley:
But don't close yourself into the mesh of problems. If you have vision but things do not move in the direction, share the problem. This is the main reason the topic here is created :upside_down_face:

3 Likes

Well actually, I dont make changes in ui_template before I do some experiments with browser dev tools. This way you can see your changes immediately and can then make reasonable changes to your CSS in ui_template. But dont make too many big changes as you will lost the track of changes easily.

1 Like

Isn't that the truth. :slight_smile:
Thanks.

This is what I put together for my Patio. Lights (dim value, on/off); And two zones from my Russound MCA-66 MultiZone Amp. The volume, bass, treble settings are reflected in the linear gauges. It was quite the challenge working with NR UI and applying CSS to it. So there is a lot that can be done. At some point, I'll probablly share the MCA Node...

1 Like

What is the base theme you have choosed? I see ui_level not aligned nicely, it may be possible that my latest try to resolve different treatment of container if angular theme is used may affect customisation also in some unexpected ways.

I used the 'Use Angular Theme in UI_Template'. Yes, you can mess it up quite easily. There were a couple things I just had to accept, as I didn't want to spend anymore time on them. Using '!important' IS important. Adding IDs are critical, as you will either not get the effect your looking for or you'll mess up the existing CSS.

Angular in ui template affects all custom dashboard widgets. What is the version of ui_level ? If it is not latest you should update and then it probably will be align nicely