Any advice? is there anyone able to help me or lead me in the right direction?
Many thanks in advance.
First remove the | after style:
Then look if it is applied. If yes but not taken into account, add !important. If no, you have to go into the parent shadow root as well. hui-energy-date-selection-card, in this case:
card_mod:
style:
hui-energy-date-selection-card:
$:
hui-energy-period-selector:
$: |
div.period {
justify-content: center;
}
Then agin look if it is applied. If yes but not taken into account, add !important.
Hi, does anyone know if there is anyway to overwrite a value thats already been coded with !important ?
I have the below (see green circle), where I am trying to replace the --mdc-icon-size: 15px !important line. However, I can see that my injected code isnāt taking affect - I assume because the line has !important, does anyone know a way around this?
Below is a screenshot of the inspect code, and my current lovelace code.
Thanks!
card_mod:
style: |
ha-card {
.eventIcon {
--mdc-icon-size: 20px !important;
}
guess this is going to relieve us from all the box-shadow: none; mods 
Thank you so much. Iām going to test it.
Much appreciated.
Iāll let you know. Thanks again
Original post found here: Mushroom Cards - Build a beautiful dashboard easily š - #3535 by KyleBrown0221
If anyone can help that would be amazing!
My current problem is how to ālink/referenceā color control and temperature control with my-slider-v2 entity? Added points for the slider to match the same color temp/color active.
Hereās what Iām trying to achieve as one card:
and then ultimately end up with something like this:
But what I think what would be better and maybe more realistic is this or the same above but stacked onto each other:
What I currently have:
Everything is perfect but the slider just controls brightness level and nothing else.
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.lr_light_group
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
name: Living Room Lights
collapsible_controls: true
- type: custom:mushroom-entity-card
entity: light.lr_light_group
fill_container: false
tap_action:
action: toggle
icon: ''
primary_info: name
name: Living Room Switches
layout: horizontal
secondary_info: state
- type: custom:my-slider-v2
entity: light.lr_light_group
vertical: true
styles:
card:
- height: 100px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
card_mod:
style: |
ha-card {
height: 140x;
}
Things that are left Iām still struggling with:
- Making the slider match the current color state
- ālinkingā the slider with the temp + color controls
I think problem 1 will be solved if we can solve problem 2 hopefully.
Other Notes:
3. Not a problem right now but thereās a lot of negative space on the right of the slider card based on this config, Iād like to clean that up after I get the 2 problems fixed above
4. Add in the pop-up cards for individual control like in my āside by sideā code above.
I have a card per room. Its root is vertical-stack.
How do I add a border to my vertical-stacks?
Thanks
Hi, Iām trying to increase the font size of the todoist-item-text via card-mod. I can change the color of all the text in todoist-card and change the font size of the header via the following code:
type: custom:todoist-card
card_mod:
style: |
ha-card {
color: red;
--ha-card-header-font-size: 250%;
}
only_today_overdue: true
entity: sensor.to_do_list
show_item_delete: false
show_item_add: false
However, Iām unable to figure out what the proper syntaxis is for the item-text. Any suggestions would be very welcome. Below is a screenshot from the developer console with the target of font size modification being the second highlight.
I have a type:entities and would like to remove the name here.
can somebody help me?
type: entities
entities:
- entity: input_datetime.alarm_time
icon: none
name: none
show_header_toggle: true
card_mod:
style:
'#states div':
hui-input-select-entity-row$:
hui-generic-entity-row$: |
.info {
display: none;
}
Maybee this is not what you want but i do this when i dont want to have a name field.
type: entities
entities:
- entity: input_datetime.alarm_time
icon: none
name: ' '
Hello, I am trying to reduce the size of text as shown in my picture ( red arrow )
as shown on left, i have colored the words to reduce in red. However, the words" Link Qualitty" and " battery" are not colored in red.
May i know how do i reduce the size of these title?
1 Like
Guys, check the 1st post ā link at the bottom. All these issues like āfont size for multiple-entity-rowā, āhide nameā etc were already discussed.
oh thatās fine! Thank you
i found this solution, tooā¦ but that makes the map bigger in heightā¦ and I donāt know how to change this.
change yes, but not in combination with an existing card_mod-style
type: entities
entities:
- entity: input_datetime.test
name: test
icon: none
show_header_toggle: false
card_mod:
style:
hui-input-datetime-entity-row $ hui-generic-entity-row $: |
.info {
display: none;
}
needed a few extra entities in my Glance card
type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- sensor.vijver_thermometer_temperature
- sensor.pond_buiten_sensor_temperature
- binary_sensor.vijverpompen
- binary_sensor.vijverpompen_alterneren
- binary_sensor.vijver_donker_koud
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_toggle_override
card_mod:
style: |
.box ha-state-icon {line-height: 0px;}
.box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
{
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
.box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
{
{% if is_state('switch.vijverpomp_rechts','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes colorize {
0% {color: var(--text-color-off);}
100% {color: aquamarine;}
}
and this shows perfectly fine on Desktop:
however, on mobile the icons are not resized/moved, so the right side icons overflow the card:
I couldnāt find anything in the core docs on a max number entities, so, figured maybe this has to do with the card_mod? taking that out doesnt make any difference, so probably a core card thing.
shortening the title helps:
But I would rather squeeze the icons a bitā¦ question here would be: can we auto-fit those entities using card-mod maybe?
btw, how can we change an icon in the bottom bar? I tried the path to
ha-icon-button > ha-state-icon").shadowRoot.querySelector(āha-svg-iconā)
with:
card_mod:
style: |
.box ha-state-icon {line-height: 0px;}
.box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
{
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
.box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
{
{% if is_state('switch.vijverpomp_rechts','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
.box div:nth-child(3) div:nth-of-type(3) ha-icon-button ha-state-icon ha-svg-icon
{
{% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
mdi:toggle-switch
{% else %} mdi:toggle-switch-off;
{% endif %}
}
without luck.
Hi,
I am struggling to make this card work. I would like to make āGarage Doorā and āLaundry Lockā (please see picture below) turn red or with some animation like ābreathingā or āglowingā if the āGarage Doorā is not closed or the āLockā is not locked.
I have tried dozen examples people posted here past 2 weeks. Unfortunately, none of them worked. Can someone please give me a pointer with post with example would actually work? There are thousands of post here. Finding the working one was almost impossible for me. It would be super helpful if someone can point me to an example with code that actually works.
Thanks
1st post ā link at the bottom:
- styles for Glance card;
- animation for Entities card - create a similar animation for the Glance card by yourself.
Oh. Thanks. Didnāt see that link. Will give another try! Thanks again!
Wrong path and no property specified.
Try this:
type: picture-glance
title: vars
image: /local/images/test/blue_low.jpg
entities:
- entity: binary_sensor.night
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style: |
.box div:nth-child(2) div:nth-child(2) {
--card-mod-icon: mdi:microphone-outline;
}
.box div:nth-child(2) div:nth-child(3) {
--card-mod-icon: mdi:microphone;
}
.box div:nth-child(3) div:nth-child(1) {
--card-mod-icon: mdi:microphone-message;
}
.box div:nth-child(3) div:nth-child(2) {
--card-mod-icon: mdi:microphone-message-off;
}
.box div:nth-child(3) div:nth-child(4) {
--card-mod-icon: mdi:microphone-minus;
}
1 Like
Hi arganto,
sorry for the delay in my reply and thank you so much again for your help.
I tried to apply your suggested code but it didnāt work.
I will look into the issue again trying to understand better how card-mod works.
Have a great day