Could you test this?
card_mod:
style: |
:host {
--card-mod-icon-color: green;
--card-mod-icon: mdi:power-plug-outline;
}
Iām having problems using card-mod.
I divided my maps into lovelace-ui-files. Specifically, I would like to design the icon on ācustom:minimalistic-area-cardā in color (green and red), since in images with white areas these are sometimes not visible at all.
- type: custom:minimalistic-area-card
title: Eingang
area: eingang
hide_unavailable: false
state_color: true
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity)=='on' %}
red
{% else %}
green
{% endif %}
}
tap_action:
action: navigate
navigation_path: /config/areas/area/eingang
entities:
- sensor.shellymotion_eingang_luminosity
- sensor.shellymotion_eingang_temperature
- binary_sensor.shellymotion_eingang_motion
- switch.shellyschalter_eingang_switch_0
I have tried out the application with a variety of different solutions. I hope I can be helped here.
Thank you
1 Like
Hi,
didnāt find a way to put a text between states of a mini graph card and didnāt find any tip in this long thread.
I succeded putting it after the second state:
with this code:
ha-card .states.flex::after { content: "{{ state_attr('climate.trv_studio', 'preset_mode') }}"; }
ā¦ but I want the ā0%ā and the āPianificatoā switched.
Can you please help?
Thanks!
Davide
trying to get some life back into my simple-thermostat card, Id like to only show the preset buttons, no name, and use the space for the buttons.
type: custom:simple-thermostat
card_mod:
style: |
ha-card .mode-title {
display: none;
}
takes it out effectively, but maybe a bit too much so 
id love the button to be evenly sized ofc, but couldnt find a relevant element to mod , would anyone here see the obvious?
taking out the top sensor section:
type: custom:simple-thermostat
card_mod:
style: |
ha-card .mode-title {
display: none;
}
ha-card .sensors {
display: none;
}
cleans up the somewhat legacy card nicely.
maybe even only use the buttons? (couldnt find a card config option for that, so resort to card_mod too
card_mod:
style: |
ha-card .mode-title {
display: none;
}
ha-card .body {
display: none;
}
padding is really ugly though, and still those buttonsā¦
beginning to wonder if I shouldnt simply use a horizontal stack grid of buttons.
yet I do like the fact there is no other backend logic required, and a lot of heavy lifting in the styles of those buttons
1st post - link at the bottom - mini-graph+card - how to add additional info.
These examples do not cover limitless use cases. The examples were made for educating ālearnersā, not to be blindly copy-pasted by āconsumersā
In your particular case you need to go a bit further - select a deeper element inside a āflexā structure.
Hi !
Can I do something like that with Card Mod ?
Havin a picture to the left and text to the right ?
Youāre right and I appreciate to learn, but you need to think that there are different levels of experience and I am at a basic level.
I already succeded in customizing a lot of things in the mini graph card, learning from this thread and not just copying code.
I read a lot of examples on customizing extrema and average text but nothing about the space ābetweenā states.
And I tried without success to use the Chrome Inspector to retrieve the name of the space between states. Thatās why I asked ā¦
This is great that you wish to learn! I myself never dealt with Css, even never heard about it 3 years ago)))
I am very far from a PC these days. Probably will get an access to peaceful human life in 3 days. So cannot help you right now.
But can give some advices.
There is an element called ā.statesā (means - class named āstatesā). It also has a class āflexā - that is why it is designated as ā.states.flexā.
This element contains states for 2 entities - 2 sub-elements, each contains 2 sub-sub-elements: value and unit.
If there is only 1 entity on the card - this element will contain 1 sub-element. So the code which you used will show an additional info in the ADDED element called ā:afterā (so called pseudo class) after this element, i.e. after the 1st entity data.
In your case there are 2 entities.
Means - you need to add that pseudo class between sub-elements:
bla bla .states.flex SUB-ELEMENT::after {
ā¦
And you need to define a designation for this SUB-ELEMENT.
Open Code inspector (in Chrome it is F12; find how to open it in your browser which may be not Chrome).
Point a mouse cursor on your card and make right click, then select in a context menu āshow in Code inspectorā. On the right in the Code Inspector you will see a tree-like structure of your card. Find the ā.statesā element and find out how to address its sub-elements.
1 Like
Hi again and thanks for your help, I really appreciate it, expecially since youāre on relax!
Onestly I did tried those steps before my first post.
The problem is that I cannot address the right sub-element.
If I use the unit sub-element, it goes attached to the unit and in both states:
ha-card .states.flex span.state__uom.ellipsis::after {
On the other hand, if I use the group name of the first state, it creates a new āspaceā/rectangle just after the unit one, but it is not centered:
ha-card .states.flex div.state.false::after {
I would like to put the new text in the violet space/rectangle shown below:
which unfortunately has no name as sub-element in the structure:
I also tried:
ha-card .states.flex .states--secondary::before {
but the result is not what I want:
ā¦ thatās why I posted looking for help
Try this code as a basis:
.states.flex > div.state::after {}
(no need to write āha-cardā)
Now the pseudo class is located in the same flex container as the 1st state.
All three elements should be distributed in this container: 1st on the left, pseudo class in the center, right on the right. Since I cannot test it myself - test it and post a screenshot. You will probably need to change some css flex attributes to get a desired distribution.
Thanks again for your help!
this is the result of that code:
unfortunately not far from one of the tests above.
Be really grateful if someone might be able to help me out with styling the root element of the card-layout mod (if its possible) highlighted below. I cant seem to work it out, tried lots of different things.
Thank you
Ok!
Then it seems to be a bit difficult to help remotely. Wait for 2-3 days, will come back, Davide.
Hi all,
Iām having some problems using the card mod style to change the font size. Iāve got the following code:
- type: markdown
card_mod:
style: |
ha-card {
font-size: 20px;
}
content: '{{state_attr(''sensor.rss_news'',''md'')}}'
title: News
Sometimes the font size shows up correctly, but most of the time it is not applying the style. Anything that I should look out for or need to adjust here?
Thanks
Hi, try this instead.
- type: markdown
card_mod:
style:
.: |
ha-card {
font-size: 20px;
}
content: '{{state_attr(''sensor.rss_news'',''md'')}}'
title: News
I canĀ“t explain why but itĀ“s consistent for me this way in all my cards.
If itĀ“s a lone card remove the dash at the beginning.
Looking for peoples opinions as to whats the best way to approach this.
I am still fairly new to Home Assistant and am loving the depth that you can go to in customising things. I am using pretty much mushroom cards with a slew of card-mod commands to alter the mushroom cards but am experiencing some pop-in issues. I am wanting it so that when the state of an entity is toggled to on, the background of the card that controls that entity changes color to better reflect that it has been activated. Currently i am using a card mod on each button with an if-else template that checks the state of the entity and if its state is on it will change the cards background colour. Now while this has worked, the problem is now that everytime i change between views (i use an indiovudal view per room of the house) the template is run after the default card colours sre loaded and it it leads to the card āflickeringā.
I started to dabble in creating custom button cards and while that has completely removed the āflickeringā issue, it does come with its own limitations. I was wondering if anybody had any better ways or suggestions to implement what I am trying to do.
Herea a snippet of my code:
cards:
- type: custom:mushroom-title-card
title: Aidan's Bedroom
alignment: left
card_mod:
style: |
ha-card {
--title-font-size: 36px;
--title-font-weight: 700;
--title-line-height: 0;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Routines
style: |
ha-card {
--subtitle-font-size: 24px;
--subtitle-font-weight: 400;
--subtitle-line-height: 0;
--subtitle-spacing: 0px 0px 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Relax
secondary: ''
icon: mdi:yin-yang
layout: vertical
icon_color: white
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.relax
data:
skip_condition: true
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: ;
width: Auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: Sleep
secondary: ''
icon: mdi:sleep
icon_color: blue
layout: vertical
tap_action:
action: call-service
service: automation.trigger
target:
entity_id: automation.new_automation
data:
skip_condition: true
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: ;
width: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
primary-font-size: 3px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Lighting
style: |
ha-card {
--subtitle-font-size: 24px;
--subtitle-font-weight: 400;
--subtitle-line-height: 0;
--subtitle-spacing: 0px 0px 0px;
}
- type: custom:mushroom-light-card
entity: light.aidan_s_light
fill_container: true
card_mod:
style: >
ha-card {
background-color: {{ '#303033' if is_state('light.aidan_s_light',
'on') }} !important;
}
- type: custom:mushroom-light-card
entity: light.aidans_lamp
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
card_mod:
style: >
ha-card {
background-color: {{ '#303033' if is_state('light.aidans_lamp',
'on') }};
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Climate
style: |
ha-card {
--subtitle-font-size: 24px;
--subtitle-font-weight: 400;
--subtitle-line-height: 0;
--subtitle-spacing: 0px 0px 0px;
}
- type: custom:mushroom-fan-card
entity: fan.aidan_s_fan
icon_animation: true
fill_container: true
show_percentage_control: true
card_mod:
style: >
ha-card { background-color: {{ '#303033' if
is_state('fan.aidan_s_fan', 'on') }}; }
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
subtitle: Media
style: |
ha-card {
--subtitle-font-size: 24px;
--subtitle-font-weight: 400;
--subtitle-line-height: 0;
--subtitle-spacing: 0px 0px 0px;
}
- type: custom:mini-media-player
entity: media_player.aidan_s_tv
artwork: full-cover
source: full
sound_mode: full
volume_stateless: true
toggle_power: false
replace_mute: play_pause
- type: custom:mini-media-player
artwork: full-cover
source: full
sound_mode: full
entity: media_player.aidan_s_speaker
volume_stateless: false
Please note this layout is entirely optimise for its mobile appearance.
This was very helpful, thank you.
How do I hide the text you made red here (āwas detected at ā¦ā)? I tried display: none; but this hides the whole line.
This is not a part of the line. The 1st word is an entity, you cannot style entity & rest of the line separately.
1 Like
Thatās what I thought, thank you. I was hoping that maybe it is somehow possible, since the entity name was not red while the text behind it was. Oh well.
Use Code Inspector to get a structure of UI elements.
No need to guess if you have a tool to know for sure.