The question asked here is more of a card_mod question so linking it here as I have the same question if someone has the style change figured out? Removing the tabs from the glance cards that were add in the last HA release?
Card-mod is not working inside an auto-entity card? Am I right or doing something wrong
Any idea why this is not working?
The “wind” icon always jumps to the next line when the view narrows. I would like to put the chevron in a very narrow “container” so there’s always enough space for the 3 chips on the left side.
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 80%;
flex: auto;
}
div#root > :last-child {
width: 20%;
flex: auto;
}
.: ''
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: Kamertemp {{state_attr(entity, 'current_temperature')}} °C
entity: climate.zolder
icon: |-
{% set state=states(entity) %}
{% if state=='cool' %}
mdi:snowflake
{% elif state=='heat' %}
mdi:heat-wave
{% else %}
mdi:power-off
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
double_tap_action:
action: none
hold_action:
action: none
- type: template
entity: climate.zolder
icon: |
{% set speed=state_attr(entity,'fan_mode') %}
{% if speed=='Auto' %}
mdi:refresh-auto
{% elif speed=='Silence' %}
mdi:volume-low
{% elif speed=='1' %}
mdi:numeric-1-circle-outline
{% elif speed=='2' %}
mdi:numeric-2-circle-outline
{% elif speed=='3' %}
mdi:numeric-3-circle-outline
{% elif speed=='4' %}
mdi:numeric-4-circle-outline
{% elif speed=='5' %}
mdi:numeric-5-circle-outline
{% endif %}
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: template
entity: climate.zolder
icon: mdi:weather-windy
icon_color: |-
{% set mode=state_attr(entity,'preset_mode') %}
{% if mode=='boost' %}
red
{% else %}
grey
{% endif %}
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.1662983926933
data:
variables:
airco_entity: climate.zolder
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
entity: input_boolean.dummy_living
icon: |-
{% if is_state(entity, 'on') %}
mdi:chevron-down
{% elif is_state(entity, 'off') %}
mdi:chevron-up
{% endif %}
alignment: end
Would anybody here know how to use card mod with browser mod so when I get my pop-up window it does NOT open full screen on my iPhone. I asked in the browser mode forum and I have got no response Except for one person with card mod coding that didn’t work
Because you specified a path for the 1st element (of some type) only.
Read this.
If your are using rows of different types (sensor-entity, text-entity, number-entity, …) - then probably easier to specify card-mod for each row - see example below.
But if you want to specify styles on the card-level (like you tried) - then you paths should be changed.
Your code:
hui-text-entity-row $: |
hui-generic-entity-row {
creates a “card-mod” element in the shadowRoot of the 1st element (of this type) only.
Use this instead:
hui-text-entity-row:
$: |
hui-generic-entity-row {
Correct, since you need to INCREASE the height.
Btw, there is also a difference in part of MDC input elements:
Changing
"height" - on the left, "line-height"- on the right.
type: horizontal-stack
cards:
- type: entities
entities:
- entity: sun.sun
name: Tpyq
card_mod: &ref_0
style: |
hui-generic-entity-row {
height: 50px;
font-size: 26px;
}
- entity: sensor.processor_use
name: Tpyq
card_mod: *ref_0
- entity: input_boolean.test_boolean
name: Tpyq
card_mod: *ref_0
- entity: input_number.test_number
name: Tpyq
card_mod: *ref_0
- entity: input_number.test_number_2
name: Tpyq
card_mod: *ref_0
- entity: input_select.test_value
name: Tpyq
card_mod: *ref_0
- type: entities
entities:
- entity: sun.sun
name: Tpyq
card_mod: &ref_1
style: |
hui-generic-entity-row {
line-height: 50px;
font-size: 26px;
}
- entity: sensor.processor_use
name: Tpyq
card_mod: *ref_1
- entity: input_boolean.test_boolean
name: Tpyq
card_mod: *ref_1
- entity: input_number.test_number
name: Tpyq
card_mod: *ref_1
- entity: input_number.test_number_2
name: Tpyq
card_mod: *ref_1
- entity: input_select.test_value
name: Tpyq
card_mod: *ref_1
1 Like
Just hide these elements:
type: horizontal-stack
cards:
- type: entities
entities:
- entity: input_number.test_number
card_mod:
style:
ha-slider $ div#sliderKnob .slider-knob-inner: |
:before, :after {display: none}
1 Like
Thank you for supplying all these examples, this made it so much easier to understand the card-mod in combination with the numberbox card. I encountered one small issue with example from the section Custom secondary_info. The character \A was not behaving as expected (at least in my config). Any text after \A was still shown on the same line. The issue was solved for me by adding the following property: white-space: pre-wrap;
.grid-content.grid-left .info .secondary::before {
color: red;
content: "Critical\A Line 2";
line-height: normal;
white-space: pre-wrap;
}
@Ildar_Gabdullin That’s perfect, thank you so much. Who would have thought that such a minor change would make such a big difference!
However I have just gone through your explanation and example and yes, I see that using the card_mod reference on each line is a better way to do it. Thanks again for taking the time to explain all this, I really appreciate it.
It depends.
Sometimes it is better to add some code in ONE place than placing it in many places.
Assume that you got some views (or dashboards) which are shown in different devices:
– your dev PC;
– mobile phone;
– wall-mount tablet - and here you need these these large fonts & row heights.
Means - sizes should be device-dependent.
Then you probably need to specify styles using “mediaquery” selector - some style is specified differently dependingly on viewport’s size.
Next, since you got several cards where you need to increase elements’ sizes - you need to repeat same code many times.
A possible solution is - specify styles for these adjustable cards (let it be Entities, Glance, etc) once in one place - card-mod theme (so called “card-mod classes”), then use these classes in views displayed on different viewports. And here you will have to specify card-mod styles on the card’s level instead on some row’s level (if talking about Entities card).
Hope this was clear. Sorry for non-native English.
P.S. Miranda, thanks a lot for buying a coffee ! )))
1 Like
The code provided here still works:
type: entities
entities:
- type: custom:numberbox-card
entity: input_number.test_number
name: Threshold 1
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left .info .secondary ha-relative-time {
color: transparent;
line-height: 0px !important;
}
.grid-content.grid-left .info .secondary::before {
color: orange;
content: "Warning\A";
line-height: normal;
}
In your case you tried to add ONE MORE LINE - i.e. to create a multiline string.
See a difference between content: "Warning\A" & content: "Critical\A Line 2".
Then you made a mistake - the “\A” is missing BEFORE the original secondary-info value (which is hidden):
.grid-content.grid-left .info .secondary::before {
color: red;
content: "Critical\A Danger\A";
line-height: normal;
white-space: pre-wrap;
}
Update 15.09.22: disregard all written above, see a corrected info below.
But anyway - there is an old note:
and now you do not need to use this “:before” trick (and elements are better aligned too):
- type: custom:numberbox-card
entity: input_number.test_number
name: Threashold 3
secondary_info: Critical<br/>Danger
card_mod:
style: |
.grid-content.grid-left .info .secondary {
color: red;
}
Hi, Ildar!
Wrong indentation are distorted in the forum post, everything is fine in my configuration. Thanks for the advice on compatibility with Apple devices, but in the presented variants, without displaying the design on another card, this does not work. Maybe there will be other tips on this problem?
Not clear, elaborate. Does my code work?
In my own configuration I’m using if and else statements to dynamically change the multi-line text of secondary info and not static multi-line strings (see down below in Example 4). I wasn’t sure if/ how you could use an if statement directly with secondary_info so I used the old method of ::before. My bad if it is actually possible to use if statements within secondary_info, because that would be the preferred solution. Could you point me in the right direction if it’s possible to implement an if statement directly into secondary_info?
I’m not sure if I misunderstood your explanation but the given example of content: "Critical\A Danger\A"; only works for me when the white-space: pre-wrap; is added, which wasn’t added in the original example. Adding only \A at the end of the content does not solve this issue (Example 2). Additionally, by adding \A at the end you won’t be able to use ::after properly anymore because the transparant last_changed text is moved over to the next line (Example 3). I’m not sure why someone would want to use ::after, but it’s good to know in case someone wants to use it.
Example 1: Dynamic text
Maybe it’s possible to do something similar directly in secondary_info?
.grid-content.grid-left .info .secondary::before {
content:
"Temp: {{ states('sensor.temperature_sensor') | round(1) }}°C \A"
"Damper: {%- set sensor = 'fan.damper_example_room' %}
{%- if states(sensor) == 'on' %} {{ state_attr(sensor,'percentage') }}%
{%- else %} Off
{%- endif %}"
;
line-height: normal;
white-space: pre-wrap;
}
Example 2: Without pre-wrap but with \A at the end of the line.
.grid-content.grid-left .info .secondary::before {
content: "Line 1\A Line 2\A";
line-height: normal;
}
Example 3: With pre-wrap, with \A, and with a 3rd line using ::after
The transparant last_changed information has moved over to the next line by using \A at the end of Line 2. This causes Line 3 to move over.
.grid-content.grid-left .info .secondary::before {
content: "Line 1\A Line 2\A";
line-height: normal;
white-space: pre-wrap;
}
.grid-content.grid-left .info .secondary::after{
content: "\A Line 3";
line-height: normal;
white-space: pre-wrap;
}
Example 4: With pre-wrap, without \A, with a 3rd line using ::after
The ::after content does start with \A to move the text to the next line.
.grid-content.grid-left .info .secondary::before {
content: "Line 1\A Line 2";
line-height: normal;
white-space: pre-wrap;
}
.grid-content.grid-left .info .secondary::after{
content: "\A Line 3";
line-height: normal;
white-space: pre-wrap;
}
1 Like
You are right, conditional content in "secondary-info" is possible only by using card-mod & “:before” method.
Now I see the point.
The original example has an error - there is no need to add a new string as a separate line.
The correct code is:
- type: custom:numberbox-card
entity: input_number.test_number
name: Threshold 1
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left .info .secondary ha-relative-time {
color: transparent;
}
.grid-content.grid-left .info .secondary::before {
color: orange;
content: "Warning";
}
And yes, if you need a multiline string - you need to add “\A” (do not add it right before the original “secondary-info”) and “white-space: pre”.
Also, there is no need in “line-height” since we only make the original secondary-info transparent.
The final variant is:
type: entities
entities:
- type: custom:numberbox-card
entity: input_number.wait_period_before_alarm_1_xiaomi_roborock_s50_mop_check
name: Threshold 1
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left .info .secondary ha-relative-time {
color: transparent;
}
.grid-content.grid-left .info .secondary::before {
color: orange;
content: "Warning";
}
- type: custom:numberbox-card
entity: input_number.wait_period_before_alarm_2_xiaomi_roborock_s50_mop_check
name: Threshold 2
secondary_info: last-changed
card_mod:
style: |
.grid-content.grid-left .info .secondary ha-relative-time {
color: transparent;
}
.grid-content.grid-left .info .secondary::before {
color: red;
content: "Critical\A Danger";
white-space: pre;
}
Updated the original example.
2 Likes
Hello
Can someone please help me to add top/bottom padding to a picture card? Please
Hi there, i am rebuilding my dashboard
Q1: Ca I get the entity names colored individually? I got it for the icons but cannot get the names
Q2: can I change the color parameter for entities (all the same in this case) in the card style as opposed to the entity style?.
- type: horizontal-stack
cards:
- type: entities
title: Blinds & Awnings
style:
.: |
.card-content {
color: white;
font-size: 20px;
padding: 0px 30px 0px 20px;
}
ha-card .name {
color: darkgrey;
margin-top: -20px;
padding: 0px 0px 0px 180px;
font-size: 28px;
}
entities:
- entity: cover.awning_e
icon: mdi:awning-outline
name: Awning SE
style: |
:host {
--paper-item-icon-color: yellow;
--text-color: green;
}
- entity: cover.awning_s
name: Awning SW
icon: mdi:awning-outline
- entity: cover.awning_w
1st post → link at the bottom
I am trying to change the icon colour for the media player using the mushroom theme using card mod. I have this working with my lights and plug sockets but cannot get it working with my media players.
The code i have tried is -
- type: custom:mushroom-media-player-card
entity: media_player.living_room_virgin_tv
icon_type: default
icon: mdi:set-top-box
style: |
:host {
--paper-item-icon-color:
{% if states('media_player.living_room_virgin_tv') == 'off' %}
white;
{% else %}
purple;
{% endif %}
}
Hello modders!
I’m trying to hide the b/g circle behind an entity image on a map.
I believe the css properties I want to modify are here in .marker here:
<ha-map>
#shadow-root (open)
<div id="map"...
<div class="leaflet pane leaflet-map-pane"
<div class="leaflet pane-marker-pane"
<div class="leaflet-marker-icon...
<ha-entity-marker entity-id="sensor.iss">
#shadow-root (open)
<div class="marker"
Adjusting properties in the chrome devtools gives me the result I’d like…
before:
after:
I’ve tried adding style to the card itself, and also tried adding it to the entity. Neither has worked. Here’s the script I used to try to add it to the entity.
- type: map
entities:
- entity: sensor.iss
card_mod:
style:
ha-map:
$:
ha-entity-marker:
$: |
.marker {
border: 0;
background-color: #1c1c1c00;
margin-left: -15px;
margin-top: 15px;
}
is this the right approach? Anything jump out as obviously wrong? Any thoughts would be much appreciated!