it IS applied (just not like as expected).
type: custom:hourly-weather
entity: weather.pirateweather
icons: true
show_precipitation_amounts: true
show_precipitation_probability: true
name: null
That does work. Thank you. I didn’t realise I could do that. Although I am still curious as to why the browser-mod method didn’t work
what method again?
Typo, I meant card-mod
hey good news - i got it on my own 
The card-mod style needs to be outside the entity, on the same level as “type: entities” then it does the trick!
type: conditional
conditions:
- entity: sensor.error_code
state_not: no request
card:
type: entities
card_mod:
style: |
ha-card {
--ha-card-border-color: orange;
}
entities:
- entity: sensor.error_code
card_mod:
style: |
:host {
--card-mod-icon-color: orange;
}
type: custom:multiple-entity-row
name: Fehler!
secondary_info: last-changed
state_header: Code
state_color: true
entities:
- entity: sensor.error_time
name: Aufgetreten am
Markdown: how to colorize a text:
It is 2024, people are going to Moon (& killing other humans in many ways) - and yet there is no working way to colorize a text in Markdown w/o card-mod.
We can colorize a text by card-mod like:
type: markdown
content: |-
xxx
<h1>xxx</h1>
xxx
card_mod:
style:
ha-markdown $: |
h1 {color: red}
But consider a list of items - and we need to colorize only some of them (here - only “off” items):
content: >-
{% for FLAG in states.input_boolean |
selectattr('entity_id','search','.test_') |
map(attribute='entity_id') |
list -%}
{{states(FLAG)}}
{% endfor %}
We could use “inline” formatting like:
<... define color here ...>{{states(FLAG)}}</...>
but “solutions” from Internet either do not work at all or do not work with CSS vars - see here.
Workaround which MAY BE used in SOME cases: wrap a “to be colored” text into “span”:
content: >-
{% for FLAG in states.input_boolean |
selectattr('entity_id','search','.test_') |
map(attribute='entity_id') |
list -%}
{%- if is_state(FLAG,'off') -%}
<span>{{states(FLAG)}}</span>
{%- else -%}
{{states(FLAG)}}
{%- endif -%}
{{'\n'}}
{%- endfor %}
and then use card-mod:
card_mod:
style:
ha-markdown $: |
span {color: red}
2 Likes
Hi all!
Since HA 2024.3 some styles are not working properly for me (like ‘margin’). Is this about something i am doing wrong?
The following card used to be like this:
Now it looks like this:
This is the code:
square: false
type: grid
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/local/habitaciones/dormitorio.jpg');
background-position: center;
background-size: cover;
--primary-text-color: #ffffff;
}
cards:
- type: custom:mushroom-template-card
primary: Dormitorio
secondary: >-
{{ states('sensor.sensor_temperatura_dormitorio_temperature') | int
}}ºC | {{ states('sensor.sensor_temperatura_dormitorio_humidity') |
int }}%
icon: ''
card_mod:
style: |
ha-card {
border: 0px;
}
tap_action:
action: none
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:bed
icon_color: teal
tap_action:
action: none
card_mod:
style: |
ha-card {
border: 0px;
--icon-size: 100px;
margin-left: -25px;
margin-bottom: -35px;
margin-top: -20px;
}
mushroom-badge-icon {
margin-right: 10px;
margin-top: 10px;
--badge-icon-size: 10px;
--badge-size: 20px;
}
badge_icon: >
{% if (states('sensor.sensor_temperatura_dormitorio_humidity') | int)
>= 60 %} mdi:water {% elif
(states('sensor.sensor_temperatura_dormitorio_temperature') | int) >=
26 %} mdi:fire {% elif
(states('sensor.sensor_temperatura_dormitorio_temperature') | int) <=
18 %} mdi:snowflake {% endif %}
badge_color: >
{% if (states('sensor.sensor_temperatura_dormitorio_humidity') | int)
>= 60 %} blue
{% elif (states('sensor.sensor_temperatura_dormitorio_temperature') |
int)
>= 26 %} red
{% elif (states('sensor.sensor_temperatura_dormitorio_temperature') |
int)
<= 18 %} blue
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: mdi:ceiling-light
entity: light.bombilla_dormitorio
icon_color: >
{% if (states('light.bombilla_dormitorio')) == 'on' %} teal {% endif
%}
card_mod:
style: |
ha-card {
border: 0px;
margin-top: -135px;
margin-right: -120px;
--icon-size: 35px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: mdi:lightbulb-variant-outline
entity: light.bombilla_dormitorio_filamento
icon_color: >
{% if (states('light.bombilla_dormitorio_filamento')) == 'on' %} teal
{% endif %}
card_mod:
style: |
ha-card {
border: 0px;
margin-top: -95px;
margin-right: -120px;
--icon-size: 35px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: mdi:television
entity: media_player.tv_dormitorio
tap_action:
action: more-info
icon_color: >
{% if (states('media_player.tv_dormitorio')) == 'off' %} {% else %}
teal {% endif %}
card_mod:
style: |
ha-card {
border: 0px;
padding-bottom: 0px!important;
margin-top: -55px;
margin-right: -120px;
--icon-size: 35px;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/local/habitaciones/salon.jpg');
background-position: center;
background-size: cover;
--primary-text-color: #ffffff;
}
cards:
- type: custom:mushroom-template-card
primary: Salón
secondary: >-
{{ states('sensor.salon_temperatura') | int }}ºC | {{
states('sensor.salon_humedad') | int }}%
icon: ''
card_mod:
style: |
ha-card {
border: 0px;
}
tap_action:
action: none
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:sofa
icon_color: lime
tap_action:
action: none
card_mod:
style: |
ha-card {
border: 0px;
--icon-size: 100px;
margin-left: -25px;
margin-bottom: -35px;
margin-top: -20px;
}
mushroom-badge-icon {
margin-right: 10px;
margin-top: 10px;
--badge-icon-size: 10px;
--badge-size: 20px;
}
badge_icon: >
{% if (states('sensor.salon_humedad') | int) >= 60 %} mdi:water {%
elif (states('sensor.salon_temperatura') | int) >= 26 %} mdi:fire {%
elif (states('sensor.salon_temperatura') | int) <= 18 %} mdi:snowflake
{% endif %}
badge_color: |
{% if (states('sensor.salon_humedad') | int) >= 60 %} blue
{% elif (states('sensor.salon_temperatura') | int)
>= 26 %} red
{% elif (states('sensor.salon_temperatura') | int)
<= 18 %} blue
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: mdi:floor-lamp
entity: light.bombilla_salon
icon_color: |
{% if (states('light.bombilla_salon')) == 'on' %} lime {% endif %}
card_mod:
style: |
ha-card {
border: 0px;
margin-top: -135px;
margin-right: -120px;
--icon-size: 35px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: mdi:television
entity: media_player.tv_salon
tap_action:
action: more-info
icon_color: >
{% if (states('media_player.tv_salon')) == 'off' %} {% else %} lime {%
endif %}
card_mod:
style: |
ha-card {
border: 0px;
margin-top: -95px;
margin-right: -120px;
--icon-size: 35px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
layout: vertical
icon: mdi:wifi
tap_action:
action: navigate
navigation_path: '#wifi'
icon_color: lime
card_mod:
style: |
ha-card {
border: 0px;
padding-bottom: 0px!important;
margin-top: -55px;
margin-right: -120px;
--icon-size: 35px;
}
columns: 2
1 Like
Hello,
I’m trying, in custom:logbook-card, to style the attributes displayed in the logbook, based on the value of an attribute related to the entity displayed on each line of the logbook.
I succeed to style all attributes without condition :
card_mod:
style: |
.attribute {
color: red !important;
}
and I’d like to achieve this:
if attribute “Type” = “info” then color = green
if attribute “Type” = “alarme” then color = red
Do you think it could be possible ?
I’ve been trying to put a frame around the time like in the first part for a while now. What am I doing wrong.
I tried using the examples styling on input_datetime" row (part 2).
entity: input_datetime.wohnzimmer_rolladen_zu_spatestens_um
name: compact + transparent + border
card_mod:
style:
ha-time-input:
$ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-time-input-wrap {
height: 38px;
border: 2px solid rgba(127,127,127,0.5);
border-radius: 5px !important;
}
.:
:host {
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
}
Hi all,
I’m trying to “replicate” the Minimalist Room Card with Mushroom and Card-Mod. I’m doing it with copy&paste of what I found on the web, I’m not so good with card-mod and I need a little bit of help 
This is what I’ve done:
The issues that I have are:
-
I would like that the height of the room on the top right “Bagno Ale”, would be the same as all the other rooms.
-
I would like in the bottom half of each card, a big icon in the background so I can easily know which room it is at a glance. Best thing is that it changes color from grey to orange if I turn on a light of that room.
-
Put a shadow to the whole card, or even change other stuff.
Here is the code of the room “Salone” on the top left
Card "Salone"
type: custom:mod-card
style:
.: |
ha-card {
background: var(--ha-card-background, var(--card-background-color, #fff));
}
hui-vertical-stack-card:
$:
.: |
#root {
gap: 0px !important;
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Salone
icon: mdi:sofa
entity: light.salone_tavolo_finestra
icon_color: '{% if is_state(''light.all_salone'',''on'') %} orange {% endif %}'
tap_action:
action: toggle
double_tap_action:
action: call-service
service: light.turn_off
target:
area_id: soggiorno
data: {}
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
--ha-card-background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.riscaldamento_temperature
content: '{{ states(''sensor.riscaldamento_temperature'') | round(1) }} ºC'
icon: >-
{% set state=states('sensor.riscaldamento_temperature')|float(0)
%} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
icon_color: >-
{% set state=states('sensor.riscaldamento_temperature')|float(0)
%} {% if state<20 %} blue {% elif state<24 %} green {% elif
state<27 %} amber {% else %} red {% endif %}
tap_action:
action: navigate
navigation_path: salone
- type: template
entity: sensor.riscaldamento_humidity
content: '{{ states(''sensor.riscaldamento_humidity'') | round(1) }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.riscaldamento_humidity')|float(0) %}
{% if state<30 %} blue {% elif state<60 %} green {% elif
state<80 %} amber {% else %} red {% endif %}
tap_action:
action: navigate
navigation_path: salone
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
margin-top: -10px;
padding-top: 0px;
--chip-height: 35px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
entity: light.salone_tavolo_finestra
icon_color: >-
{% if is_state('light.salone_tavolo_finestra','on') %} orange {%
endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-right: 50px !important;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
entity: light.salone_divano_finestra
icon_color: >-
{% if is_state('light.salone_divano_finestra','on') %} orange {%
endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-right: 50px !important;
padding-right: 50px !important;
--ha-card-background: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
entity: light.salone_tavolo_corridoio
icon_color: >-
{% if is_state('light.salone_tavolo_corridoio','on') %} orange
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-right: 50px !important;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
entity: light.salone_divano_corridoio
icon_color: >-
{% if is_state('light.salone_divano_corridoio','on') %} orange
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-right: 50px !important;
padding-right: 50px !important;
--ha-card-background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.aqara_finestra_salone_piccola_contact
icon: >-
{% set
state=states('binary_sensor.aqara_finestra_salone_piccola_contact')
%} {% if state=='on'%} mdi:window-open {% else %}
mdi:window-closed {% endif %}
icon_color: >-
{% set
state=states('binary_sensor.aqara_finestra_salone_piccola_contact')
%} {% if state=='on'%} amber {% elif state=='unavailable' %}
red {% else %} grey {% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.aqara_finestra_salone_grande_contact
icon: >-
{% set
state=states('binary_sensor.aqara_finestra_salone_grande_contact')
%} {% if state=='on'%} mdi:window-open-variant{% else %}
mdi:window-closed-variant {% endif %}
icon_color: >-
{% set
state=states('binary_sensor.aqara_finestra_salone_grande_contact')
%} {% if state=='on'%} amber {% elif state=='unavailable' %}
red {% else %} grey {% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
margin-top: -10px;
padding-top: 0px;
--chip-height: 40px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:fire
entity: climate.salone
icon_color: >-
{% set state=states('climate.salone') %} {% if state=='heat'%}
amber {% else %} grey {% endif %}
tap_action:
action: navigate
navigation_path: '#salone-hvac'
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:snowflake
entity: climate.153931628014499_climate
icon_color: >-
{% set state=states('climate.153931628014499_climate') %} {% if
state=='off'%} grey {% else %} blue {% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:robot-vacuum
entity: vacuum.gregorio
icon_color: >-
{% set state=states('vacuum.gregorio') %} {% set
stanza=states('input_text.gregorio_stanza_pulizia') %} {% if state
== "cleaning" and stanza=='8'%} green {% elif state == "returning"
and stanza=='8' %} yellow {% else %} grey {% endif %}
tap_action:
action: call-service
service: script.DO_Gregorio_pulisci_stanza
service_data:
rooms: 8
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
--ha-card-background: none;
}
{% if is_state('vacuum.gregorio','cleaning') and
is_state('input_text.gregorio_stanza_pulizia','8') %}
ha-card { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
- type: custom:mushroom-template-card
primary: null
icon: >-
{% set state=states('cover.tapparelle_salone') %} {% if
state=='open'%} mdi:window-shutter-open {% else %}
mdi:window-shutter {% endif %}
entity: cover.tapparelle_salone
icon_color: >-
{% set state=states('cover.tapparelle_salone') %} {% if
state=='open'%} amber {% else %} grey {% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
--ha-card-background: none;
}
And here is the code of the room “Bagno Ale” on the top right:
Card "Bagno Ale"
type: custom:mod-card
style:
.: |
ha-card {
background: var(--ha-card-background, var(--card-background-color, #fff));
}
hui-vertical-stack-card:
$:
.: |
#root {
gap: 0px !important;
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Bagno Ale
icon: mdi:face-woman-shimmer
entity: light.bagno_ale
icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
tap_action:
action: toggle
double_tap_action:
action: call-service
service: light.turn_off
target:
area_id: bagno_piccolo
data: {}
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
--ha-card-background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.bagno_piccolo_temperature
content: '{{ states(''sensor.bagno_piccolo_temperature'') | round(1) }} ºC'
icon: >-
{% set state=states('sensor.bagno_piccolo_temperature')|float(0)
%} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
icon_color: >-
{% set state=states('sensor.bagno_piccolo_temperature')|float(0)
%} {% if state<20 %} blue {% elif state<24 %} green {% elif
state<27 %} amber {% else %} red {% endif %}
tap_action:
action: navigate
navigation_path: bagno_piccolo
- type: template
entity: sensor.bagno_piccolo_humidity
content: '{{ states(''sensor.bagno_piccolo_humidity'') | round(1) }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.bagno_piccolo_humidity')|float(0) %}
{% if state<30 %} blue {% elif state<60 %} green {% elif
state<80 %} amber {% else %} red {% endif %}
tap_action:
action: navigate
navigation_path: bagno_piccolo
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
margin-top: -10px;
padding-top: 0px;
--chip-height: 35px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
entity: light.bagno_ale
icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-right: 50px !important;
padding-right: 50px !important;
--ha-card-background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: null
icon: mdi:fire
entity: climate.bagno_piccolo
icon_color: >-
{% set state=states('climate.bagno_piccolo') %} {% if
state=='heat'%} amber {% else %} grey {% endif %}
tap_action:
action: navigate
navigation_path: '#bagno_ale-hvac'
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
--ha-card-background: none;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:robot-vacuum
entity: vacuum.gregorio
icon_color: >-
{% set state=states('vacuum.gregorio') %} {% set
stanza=states('input_text.gregorio_stanza_pulizia') %} {% if state
== "cleaning" and stanza=='4'%} green {% elif state == "returning"
and stanza=='4' %} yellow {% else %} grey {% endif %}
tap_action:
action: call-service
service: script.DO_Gregorio_pulisci_stanza
service_data:
rooms: 4
card_mod:
style: |
ha-card {
padding-top: 5px !important;
padding-bottom: 0px !important;
box-shadow: none;
margin-left: 100px;
padding-right: 50px !important;
--ha-card-background: none;
}
{% if is_state('vacuum.gregorio','cleaning') and
is_state('input_text.gregorio_stanza_pulizia','4') %}
ha-card { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
The code that I don’t understand, is the first part of both cards:
type: custom:mod-card
style:
.: |
ha-card {
background: var(--ha-card-background, var(--card-background-color, #fff));
}
hui-vertical-stack-card:
$:
.: |
#root {
gap: 0px !important;
}
I’m trying to put some card-mod/css attributes, like “color: red”, just to see if something changes, but actually nothing changes
Could someone help me please? It would be very much appreciated
Thanks!
I would like to ask our gurus another question: I want to add lighting border to vertical-stacked-navigation-card like I have on my mushroom-template-card, but it’s not working. I understand it’s a different type of cards but is that even possible or I am asking for something what is not exist?
Code for my navigation card:
type: custom:vertical-stacked-navigation-card
nav_name: ' '
nav_items:
- name: First Floor
icon: mdi:home-floor-1
sub_nav_items:
- name: 📺 Living Room
destination: living-room-1
active: false
card_mod:
style: |
ha-card {
{% if states('light.living_room_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.living_room_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
- name: 👩🍳 Kitchen
destination: kitchen
active: false
- name: 👒 Hallway
destination: hallway
- name: 🚿 My Bathroom
destination: my-bathroom
- name: 🚙 Garage
destination: garage
- name: 🧸 Kids Room
destination: kids-room
- name: 🏝️ Outside
destination: outside
active: false
unfolded: false
- name: Second Floor
icon: mdi:home-floor-2
destination: ''
sub_nav_items:
- name: 🔺 Upstairs
destination: upstairs
- name: 👩❤️👨 Master Bedroom
destination: master-bedroom
- name: ♌ Sonia's Room
destination: sonia-room
- name: ♉ Artem's Room
destination: lovelace
- name: Basement
icon: mdi:home-floor-b
destination: ''
sub_nav_items:
- name: 🔻 Basement
destination: basement
- name: 🧺 Laundry
destination: laundry
- name: ⚒️ Utility Room
destination: utility-room
- name: 💻 HA Info
destination: ha-information
custom_styles:
colors:
text:
main: White
sub: White
hover:
main: Teal
sub: Teal
active:
sub: orange
background:
main: Transparent
sub: Transparent
font_size:
text:
main: 25px
sub: 20px
card_mod:
style: |
ha-card {
background: url('/local/MyPictures/rock wall.jpg');
background-size: 100%;
}
Code for template card:
type: custom:stack-in-card
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Second Floor
icon: mdi:home-floor-2
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: rem;
font-weight: bold;
margin-left:5rem;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Upstairs
secondary: null
icon: mdi:escalator-up
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.upstairs_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.upstairs_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
margin-left: 5px !important;
--card-primary-font-weight: bold !important;
}
tap_action:
action: navigate
navigation_path: upstairs
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: null
icon: mdi:bed-king
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.master_bedroom_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.master_bedroom_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
--card-primary-font-weight: bold !important;
}
tap_action:
action: navigate
navigation_path: master-bedroom
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Sonia Room
secondary: null
icon: mdi:zodiac-leo
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.sonia_s_bulbs') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.sonia_s_bulbs','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
margin-left: 5px !important;
--card-primary-font-weight: bold;
}
tap_action:
action: navigate
navigation_path: sonia-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Artem Room
secondary: null
icon: mdi:zodiac-taurus
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.artem_fan') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.artem_fan','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
--card-primary-font-weight: bold;
}
tap_action:
action: navigate
navigation_path: artem-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/second floor-1.jpg');
background-size: 100%;
}
Thank you
Question: How can I center the secondary info added with card-mod on a vertical HA tile card?
The problem is that, visibility: hidden; keeps the space, but with display:none; everything is hidden.
This is my code:
type: tile
entity: light.schalfzimmer_eltern
icon: mdi:bed-king
vertical: true
hide_state: false
name: Elternzimmer
tap_action:
action: navigate
navigation_path: /lovelace/master_bedroom
show_entity_picture: false
card_mod:
style:
ha-tile-info$: |
.secondary:before {
visibility: visible;
content: "{{ states('sensor.sonoff_snzb_02d_schlafzimmer_eltern_temperature') }} °C";
}
.secondary {
visibility: hidden;
color: grey !important;
}
And this is how it looks:
Any ideas?
Add a left margin to the secondary line.
card_mod:
style:
ha-tile-info$: |
.secondary:before {
visibility: visible;
content: "{{ states('sensor.sonoff_snzb_02d_schlafzimmer_eltern_temperature') }} °C";
}
.secondary {
visibility: hidden;
color: grey !important;
margin-left: 50px !important;
}
That was also my idea, but since the secondary info is just hidden, as it changes, depending on the length of the secondary info, so also the margin changes.
I tested shrinking and expanding the card and didn’t see an issue.
Tested this as well
.secondary {
visibility: hidden;
color: grey !important;
left: 50px;
position: relative;
}
Do you have an example of when it’s not aligned.
@LiQuid_cOOled
The size of the card is not the problem. The problem is the default secondary info, which is hidden, but the space is preserved.
So now if that hidden text is, let’s say “Off” or “On” the space used is different, so the text is not aligned right with one of those states. Which one depends which I use to calculate the right margin.
try this:
type: tile
entity: light.schalfzimmer_eltern
icon: mdi:bed-king
vertical: true
hide_state: false
name: Elternzimmer
tap_action:
action: navigate
navigation_path: /lovelace/master_bedroom
show_entity_picture: false
card_mod:
style:
ha-tile-info$: |
.secondary:before {
visibility: visible;
margin: 0px auto -20px auto;
content: "{{ states('sensor.sonoff_snzb_02d_schlafzimmer_eltern_temperature') }} °C";
}
.secondary {
visibility: hidden;
display: contents;
color: grey !important;
}
A bit hacky and would probably suggest using custom:button-card for this or some other card, where the secondary info can use templates.
hi. is there a way to split styles to different files ?
I mean i wont to have 3 or more files with different templates.
style: |
:host {
perspective: 900px;
}
ha-card:active {
transform: rotateY(20deg);
transition: 0s;
}
ha-card {
background: rgba(28, 28, 28, 0.7); /* Przezroczyste tło (szare) */
}
This is my full.yaml file and in other file of my dashboard i set:
card_mod:
!include ../../../style/razem.yaml
and it work like a charm. i can use it in many cards.
But is there a way to use more different styles from few files?
for example in bg.yaml use:
ha-card {
background: rgba(28, 28, 28, 0.7); /* Przezroczyste tło (szare) */
}
and for active use:
ha-card:active {
transform: rotateY(20deg);
transition: 0s;
}
And in dashboard use:
card_mod:
!include ../../../style/bg.yaml
!include ../../../style/active.yaml
Hello to all,
I am seeking for some help with Card Mod as i have made a card that acts like a sidebar. The card itself is inside a conditional card that uses the screen condition to appear only on desktop and also if a helper is “on”. I positioned the card to the left of the screen and it currently looks like this:
For further understanding, here is the code of the card:
type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1024px)'
- condition: state
entity: input_boolean.show_interface_options
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
@media (min-width:100px) {
ha-card {
background: linear-gradient(180deg, rgba(39, 39, 39, 1) 11.2%, rgba(32, 36, 32, 01) 100%);
border-radius: 10px;
position: fixed;
top: var(--header-height);
z-index: 9;
right: 0px;
width: 25%;
height: 100%;
padding: 5px;
}
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Interface Options
- type: entities
entities:
- input_boolean.dashboard_automations
- type: divider
- input_boolean.show_location
- input_boolean.show_person_card
- input_boolean.show_notifications
- input_boolean.show_plex_button
- input_boolean.show_battery_information
- input_boolean.phone_control
- type: divider
- switch.tapo_c210_41a4_privacy
- switch.tapo_c210_41a4_auto_track
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(180deg, rgba(39, 39, 39, 0.93) 11.2%, rgb(32, 36, 32) 100%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
entity: input_boolean.show_interface_options
name: Hide Interface Options
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(145deg, rgb(195, 67, 129) 11%, rgb(90, 43, 186) 83.4%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
This card has toggle helpers and based on them i can show/hide other cards on the dashboard.
As it is now, the card appears on top (overlaps) of the other cards of the dashboard. I would like some help with the CSS code to do one of the following:
- Push the entire dasboard interface to the left so it doesn’t overlap. Essensially i am trying to immitate this colapsed sidebar: W3Schools Tryit Editor
- OR if the above is not possible, i would like to blur the rest of the interface when this card is visible. Very similar to bluring the background on a “more info dialog box” which i have already on my theme.
I posted already this question to the 🔹 Card-mod - Super-charge your themes! - #1674 by michaelkrtikos topic but i was re-directed here.
I would appreciate if someone has implemented something similar and can support.
Thank you very much in advance
Kind Regards
M