If you share the ui_template what you are using for style override then I can take a look
Thank you, this is the file I have in use:
<style>
/*
It is reasnoble to declare the colors as CSS variables
so they can be easily called by name where needed.
You can see that in many places the variables are not used. Change it!
*/
: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); kind of tanish*/
--color-text-primary: rgb(255, 255, 255);
--color-widget-border: rgb(84, 78, 78);
}
/*
All CSS adjustments are commented out.
Turn rules on one by one and see the changes.
Don't use too many elements because it wil be confusing
Start with simple elements like text, slider or button
Many of elements like buttons have states,
those rules must be found and adjusted also.
*/
/*
.masonry-container {
position: relative;
width: 100%;
height:100%;
margin: 0 auto;
background: rgb(255,0,0);
background: linear-gradient(180deg, var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);
}
*/
.nr-dashboard-cardcontainer {
position: relative;
/*box-shadow: inset 1px 1px 4px 0px #000000bb;*/
border-radius: 15px;
}
/*border radius of cards #33333300
*/
.nr-dashboard-theme ui-card-panel {
background-color: #404040;
color:var(--color-text-primary);
border-radius: 15px;
box-shadow: 0 0 8px 0px #00000080;
}
body.nr-dashboard-theme md-content md-card {
background-color: #33333300;
color: var(--color-text-primary);
text-shadow: 4px 2px 4px #00000045;
box-shadow: 0 -1px 5px 1px #00000045;
border-radius: 12px;
border: 1px solid var(--color-widget-border);
}
/*
.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
color: var(--color-text-primary);
}
*/
.md-button {
display: inline-block;
position: center;
cursor: pointer;
min-height: 36px;
min-width: 88px;
line-height: 36px;
vertical-align: middle;
align-items: center;
text-align: center;
border-radius: 12px;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
border: 0;
padding: 0 6px;
margin: 6px 8px;
background: transparent;
color:var(--color-text-primary);
white-space: nowrap;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
font-style: inherit;
font-variant: inherit;
font-family: inherit;
text-decoration: none;
overflow: hidden;
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
}
/*
.nr-dashboard-theme .nr-dashboard-button .md-button {
background-color: #88888800;
color:var(--color-text-primary);
}
*/
/*
.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
background-color: #88888855;
}
*/
/*
md-slider .md-thumb {
z-index: 1;
position: absolute;
left: -10px;
top: 14px;
width: 20px;
height: 20px;
border-radius: 20px;
-webkit-transform: scale(.7);
transform: scale(.7);
transition: all .4s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 0 6px #00000070;
}
*/
/*
Advanced stuff - dynamic change of card CSS
Classes here can be used to make colored stripe at the top of card
Usage is not in here, but they are added to md-card when needed within another template
.carderr {
background: rgb(255,0,0);
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%);
}
.cardok {
background: rgb(39,255,0);
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%);
}
*/
</style>
The contrib-ui- dashboard widgets are created on top of template which is so to say "do your stuff" thing. So it is treated more freely and not forced to use all the same properties like other stuff has.
To make it same as others:
.nr-dashboard-theme .nr-dashboard-template {
background-color: unset;
}
Or just make the background color for them transparent:
.nr-dashboard-theme .nr-dashboard-template {
background-color: #33333300;
}
I use the last one because of I'm playing with widget background color to indicate latest input for some my gauges (if last input was higher than previous, add a bit green, if opposite, add a bit red, but if it is same, stay default)
1 Like
@hotNipi the transparent worked perfectly, so many thanks to you! Took a while to reply...I was deep in another Rabbit hole, really liking node red and finding myself a bit consumed.
Keep going. The right path is always uphill 
I have been unable to locate the directorie(s) you are referencing here on my Pi...any guidance?
Yeah , it is source code to investigate if you find it interesting and maybe provide better solution than the current is.
OK, so I guess I understand it is no where on my local machine. Where might I get a copy to investigate?
Ahhh...of course, thank you!
Just some feedback on the gauge icon. It appears that the icon placement within the gauge is not dependent upon the actual gauge itself or the site widget size (which I have changed around to see effects). You can see the various pad from the bottom changing depending upon the icon chosen in the image below. Certainly not an issue for me...just FYI.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
