Should be, but it may have some glitchesā¦
Earlier I noticed an issue with custom:hui-element card where these 2 notations caused diffrent results, and Thomas gave us an explanation.
1 Like
Post your latest version.
Iāve only started trying to style my dashboard with Card mod and a bit lost on something perhaps very basic. Iāve been trying to style the button card so that it fits with the Mushroom theme.
I managed to style two buttons using the following code:
show_name: true
show_icon: true
type: button
entity: automation.google_assistant_notification_dinnertime
icon: mdi:chef-hat
name: Koken
show_state: false
theme: Mushroom
hold_action:
action: none
tap_action:
action: call-service
service: notify.google_assistant_sdk
data:
message: Kom je helpen koken?
target: {}
icon_height: 40px
card_mod:
style:
ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: #2196f3;
background-color: #1c3447;
width: 25px;
height: 25px;
padding: 10px;
border: 0px solid blue;
border-radius: 100%;
}
This looks as such:
This is based on the great post by @Ildar_Gabdullin :
What I cannot figure out is how to now style the rest of the card. I for example want to font-size to match the rest and not have āKokenā and āEtenstijdā to be that large. If I try and add a section like
ha-card {
color: red;
}
I do not see the text color change anymore (as it did before adding the css to change the button image).
What am I doing wrong?
show_name: true
show_icon: true
type: button
entity: sun.sun
card_mod:
style: |
span {
font-size: 50px;
color: orange;
}
Styles should not be added āby a guessā - always use Code Editor.
Doesnāt work for me. Adding this without code to update the icon it works. My problem is once I start to combine it with the css to update the svg-icon it doesnāt. Itās probably really simple, but I just am not seeing it. Probably because everytone now falls under the ha-state-icon and ha-icon?
style:
ha-state-icon $ ha-icon $: |
ha-svg-icon {
color: #2196f3;
background-color: #1c3447;
width: 25px;
height: 25px;
padding: 10px;
border: 0px solid blue;
border-radius: 100%;
}
span {
font-size: 50px;
color: orange;
}
Hope these schema will help you:
element_1:
$: |
element_1_1 {
...
}
element_1_2 {
...
}
.: |
element_1 {
...
}
element_1 element_1_3 {
...
}
element_2 {
...
}
element_2 element_2_1 {
...
}
Here:
ā āelement_1ā & āelement_2ā are on the same level
ā āelement_1_3ā is inside āelement_1ā
ā āelement_1_1ā & āelement_1_2ā are inside shadowRoot of āelement_1ā
ā āelement_2_1ā is inside āelement_2ā
Hi all.
In another topic I had a question to change the color of my media player icon. That worked fine thanks to the help of the community.
Now, I want to change the color of this item:
I cannot seem to find the correct element to change the color. Is there a tutorial on how to find the right elements? I have searched in this topic but without succesā¦
trying to mod the header (title) of a type: grid card
- type: custom:mod-card
card_mod:
style: |
.card-header {
color: red;
}
card:
type: grid
title: Verlichting Cards
columns: 4
# square: false
cards:
without succes yet.
the DOM
and elements:
(nevermind the red there, Ive set the manually to check if its the correct elementā¦)
nvm me either:
- type: custom:mod-card
card_mod:
style:
hui-grid-card $: |
.card-header {
color: red;
}
the DOM was telling it, I just missed itā¦
Trying to combine things posted by š¹ Card-mod - Add css styles to any lovelace card - #4280 by Ildar_Gabdullin to achieve a slightly better look to my tabs.
Hereā a picture:
I got the āVividā look but what I am trying to accomplish is coloring the āactiveā tabs so that it is easier to see the level of selected tabs that are active. The green underline and text is great but I want a slight tint to the active tabs to further stand out.
Right now, I have this for tabs snipped to the important piece:
tabs:
- attributes:
label: NHL
icon: mdi:ballot
card:
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 2px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-style: solid;
overflow: hidden;
}
And cannot figure out how to combine this with the example for the active tab background sample:
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab--active {
background: lightgreen !important;
}
Any help is appreciated!
Hmm, try these recommendations:
one
two
What you are asking is a thing which you have to face very often. So it is better to learn it.
If you experience any troubles with navigation - ping me.
What I was missing I got now. I just wanted to modify the āactiveā ones and all I needed was:
mwc-tab[active] {
background: #EBFFD8 !important;
}
If you want to hide the scrollbar, but keep a section scrollable, add this:
card_mod:
style: |
::-webkit-scrollbar {
display: none;
}
1 Like
Trying to mod a core entities card Title content so we can add dynamic templating, I could not find a way to completely set it via card_mod (and replace the title field in the card config itself)
I did find a way to add an āafterā section though like:
type: entities
title: Air quality dashboard
card_mod:
class: class-header-no-margin-no-color
style: |
.card-header .name::after {
content:"{{': ' + states('sensor.u_s_air_pollution_level')}}";
}
.card-header {
background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
{% if aqi <= 50 %} seagreen
{% elif aqi <= 100 %} gold
{% elif aqi <= 150 %} orange
{% elif aqi <= 200 %} crimson
{% elif aqi <= 300 %} purple
{% else %} maroon
{% endif %};
color: {{'var(--text-color-off)' if 51 < states('sensor.u_s_air_quality_index')|int(0) < 101
else 'ivory'}};
}
Note the class only sets some other card/font specifics.
Normally I restructure these entities cards to vertical-stacks and have a default button title card do that trick, but this ofc is kind of nice too.
As you can see the colon is preceded by a space, which my eyes donāt like, I want it to be
Airquality dashboard: Good
or, as it would be with the button card:
- type: custom:button-card
template: button_default_title
name: >
[[[ return 'Airquality dashboard: '
+ states['sensor.u_s_air_pollution_level'].state; ]]]
styles:
card:
- background: seagreen
So, the question for now: can we remove the empty space in the card_mod on the entities card title?
1 Like
I have a list of battery entities like this:
And I would like to make the font red if any of the values are under 20%
I know this is to be added to the card which makes all red for example.
card_mod:
style: |
ha-card {
color: red;
}
And there is a way to add to each entities but I have a lot more than 3 entities so what is the way to only add it once per card? Not sure sure how to set it if any state is < 20% then make it red.
You are aware that current Frontend does just that by itself? Wel, the icon that is
Just set the card to use state_color: true and youāre set. No need for card_mod at all
Current battery level thresholds are weird - smth like 20% & 70% instead of usual 33% & 66%.
That is why I do not use default colors.
agreed they could use some more granularityā¦ Iāve asked for that some time ago, but no response. still, what we can do core is better than using extra system resources in the Frontend.
Especially since this core option also changes the more-info.
trying to cut down on any customization possibleā¦
1 Like
- Created a PR to change thresholds to 33 & 66 - was refused by Paul ))). Reason was like āwe use x10 values to change an icon - that is why we use same x10 values for thresholdsā, no comments.
- Your Custom UI allows to override colors in more-info too.
Yes I have seen it and enabled it in the past but I would like to set my own % values and colors.