Dynamic Dashboard Color Styles - how to reset?

[haegar33]

Continuing the discussion from Dynamic style change between Light and Dark:

I used this CSS example to change the colours in my dashboard with an ui-template node. However:

• only the first group of my dashboard is changing color, all other stay with the Theme color
• how to revert the colours? Simply applying the theme again seems not to work. Do I need to restart NR for this?

[Gunner]

Disable or delete the template you used to make the changes in the first place.

[haegar33]

Ok, but why is only the first tab affected and all the others stay with the Theme colors?

[Gunner]

Not sure what you are referring too... you might want to supply your relevant details in this topic

May depend on template type assigned... head or widget.

And whether the template contents affect everything or just specific items

[haegar33]

You are right! What I overlooked was the fact that you cannot attach the ui-template node to a Tab but only to a Widget within a Tab! it affects this Tab only and not the others.
Apparently there is no dynamic control possible for the complete dashboard.

[Gunner]

@haegar33

Apparently there is no dynamic control possible for the complete dashboard.

Oh, there is... ui_template set to head and the right commands can determine almost everything across the dashboard.

@hotNipi is the expert and this is one of his creations.... I can't recall the topic, but here are two templates. One that does everything... good for experimenting and learning. And another I use to simply set rounded corners in all my tabs and cards

[{"id":"fa97db16ec1e5213","type":"ui_template","z":"8e94ea3a46a373ad","d":true,"group":"ab9b8405.4fb588","name":"RPi Tab Stylesheet","order":16,"width":10,"height":1,"format":"</script>\n\n<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(128, 128, 128);\n  //--color-text-primary: rgb(230, 226, 209);\n  --color-widget-border: rgb(84, 78, 78);\n}\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.nr-dashboard-cardcontainer {\n    position: relative;\n    box-shadow: inset 0px 1px 4px 0px #000000bb;\n    border-radius: 15px;\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\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.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n    color: var(--color-text-primary);\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.nr-dashboard-theme .nr-dashboard-button .md-button {\n    background-color: #88888800;\n    color:var(--color-text-primary);\n}\n\n\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n    background-color: #88888855;\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/*\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\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\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</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1130,"y":240,"wires":[[]]},{"id":"ec118fe456edc3bb","type":"ui_template","z":"8e94ea3a46a373ad","group":"ab9b8405.4fb588","name":"Dashboard Wide Corners","order":17,"width":0,"height":0,"format":"<style>\n.nr-dashboard-cardcontainer {\n    position: relative;\n    box-shadow: inset 0px 1px 4px 0px #000000bb;\n    border-radius: 15px;\n}\n\n\n.nr-dashboard-theme ui-card-panel {\n    border-radius: 15px;\n    box-shadow: 0 0 8px 0px #00000080;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1150,"y":300,"wires":[[]]},{"id":"ab9b8405.4fb588","type":"ui_group","name":"System","tab":"81094caaa6a6fb2c","order":1,"disp":true,"width":"10","collapse":false},{"id":"81094caaa6a6fb2c","type":"ui_tab","z":"8e94ea3a46a373ad","name":"RPi System Specs","icon":"computer","order":1,"disabled":false,"hidden":false}]