You might find you can do this with another of Thomas LovĂ©nâs custom cards template entity row
Does anyone know how to use the visibility and before/after CSS to replace information on a card?
Im tryign to change secondary info to say something custom on a mushroom light card
.text span {
visibility:hidden;
}
.text:before {
content: 'after';
}
1st post â link at the bottom â link to âafter/beforeâ
It does not have examples for mushrooms but might give you ideas.
Just for a light card in general.
. The secondary information is limited to a few choices, and I jsut want it to alwsy say a custom word. Can you tell me how or if I can do that using this?
I just started using Card-mod and Iâm verry happy with it.
Now i come to a situation, where I stuck in the middle of nowhere:
In the picture you can see the green padding-top and padding bottom. I try to modify the padding-bottom.
But whatever I put in the code, it has no effect. Here is my code:
`
`
type: custom:atomic-calendar-revive
style: |
ha-card {
background: none;
box-shadow: none;
}
div.headerName {
letter-spacing: 0.112em !important;
box-shadow: none;
font-size: 2.55em;
}
div.headerDate {
letter-spacing: 0.1em !important;
box-shadow: none;
font-size: 5.55em;
line-height: 1.2;
font-weight: bold;
}
div.cal-eventContainer {
letter-spacing: 0.1em !important;
box-shadow: none;
font-weight: normal;
font-size: 2.55em;
letter-spacing: 0.02em !important;
line-height: 1.2;
padding-bottom: 0px;
}
# the following code is not working
ha-card:
$:
div:
$:
table:
$:
tbody:
$:
tr:
$:
td {
padding-bottom: 100px;
}
``
I tried with the card-mod-helper as well:
"#view>hui-view>hui-panel-view$hui-vertical-stack-card$#root>atomic-calendar-revive$ha-card>div>table>tbody>tr:nth-child(1)>td:nth-child(2)"
But no success.
Any ideas? Thanks!
Styling statistics-graph card
What is changed:
- Header: textâs color, font-size, padding-bottom.
- Legend: margin-top, textâs color, font-size, bulletsâ color.
- Cardâs background.
- type: statistics-graph
chart_type: line
period: 5minute
days_to_show: 90
stat_types:
- mean
- min
- max
entities:
- sensor.xiaomi_cg_1_temperature
title: Statistics
card_mod:
style:
$: |
.card-header {
color: red !important;
font-size: 38px !important;
padding-bottom: 0px !important;
}
.content statistics-chart $ ha-chart-base $: |
.chartLegend li:nth-child(1) .label {
color: red;
font-size: 8px;
}
.chartLegend li:nth-child(1) .bullet {
background-color: yellow !important;
height: 8px;
width: 8px;
}
.chartLegend li:nth-child(2) .label {
color: white;
font-size: 12px;
}
.chartLegend li:nth-child(2) .bullet {
background-color: green !important;
height: 12px;
width: 12px;
}
.chartLegend li:nth-child(3) .label {
color: orange;
font-size: 18px;
}
.chartLegend li:nth-child(3) .bullet {
background-color: magenta !important;
height: 18px;
width: 18px;
}
.chartLegend ul {
margin-top: 0px !important;
}
.: |
ha-card {
background-color: lightgreen;
}
How to hide a legend (not needed since hide_legend option was added):
chart_type: line
period: 5minute
days_to_show: 90
type: statistics-graph
entities:
- sensor.xiaomi_cg_1_temperature
stat_types:
- mean
- min
- max
title: Statistics
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend {
display: none;
}
More examples are described here.
Assuming your pasted code has come out faithfully, Iâm not sure your indentation is 100% correct. You should also be using the card_mod key as standard practice by now.
However, it seems that this particular setting needs the !important rule to make it stick. Try this to see if it works for you:
type: custom:atomic-calendar-revive
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
div.headerName {
letter-spacing: 0.112em !important;
box-shadow: none;
font-size: 2.55em;
}
div.headerDate {
letter-spacing: 0.1em !important;
box-shadow: none;
font-size: 5.55em;
line-height: 1.2;
font-weight: bold;
}
div.cal-eventContainer {
letter-spacing: 0.1em !important;
box-shadow: none;
font-weight: normal;
font-size: 2.55em;
letter-spacing: 0.02em !important;
line-height: 1.2;
padding-bottom: 0px !important;
}
div.cal-eventContainer table tbody tr td {
padding-top: 10px !important;
}
Thanks a lot! Now its working!
1 Like
Grouping / aligning labels in a statistics-graph:
In a statistics-graph card, each sensor may have up to several labels (min, max, mean, âŠ).
This is how these labels may be allocated:
instead of:
There are at least 2 methods of grouping labels - check this example:
type: vertical-stack
cards:
- <<: &ref_card
type: statistics-graph
chart_type: line
period: 5minute
days_to_show: 90
entities:
- entity: sensor.xiaomi_cg_1_temperature
name: t1
- entity: sensor.xiaomi_cg_2_temperature
name: t2
stat_types:
- mean
- min
- max
- <<: *ref_card
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend li {
justify-content: center;
}
.chartLegend ul {
display: grid !important;
grid-template-columns: repeat(3,1fr);
}
- <<: *ref_card
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend li {
flex: 0 0 33.3333%;
justify-content: center;
}
.chartLegend ul {
flex-wrap: wrap;
display: flex !important;
}
Another case is when one sensor has a long name, another sensor has a short name:
instead of:
How to solve it:
type: vertical-stack
cards:
- <<: &ref_card
type: statistics-graph
chart_type: line
period: 5minute
days_to_show: 90
entities:
- entity: sensor.xiaomi_cg_1_temperature
name: temperature
- entity: sensor.xiaomi_cg_2_temperature
name: temp
stat_types:
- mean
- min
- max
- <<: *ref_card
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend li {
justify-content: center;
}
.chartLegend li:nth-child(3) {
flex-basis: 100%;
}
.chartLegend ul {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
}
1 Like
I recently encountered an issue with the background of my cards:
I had a setup where the background of all cards in a view was a big image over the whole view that was fixed.
Since some time (the HA update with the card stuff?) the background is shown on every card and not as a single image (as before).
Does someone hava a similar problem and did solve this?
Here is a sample theme:
theme_livingroom:
card-mod-theme: theme_livingroom
card-mod-card: |
ha-card {
background: url('/local/images/cards/livingroom.jpg') !important;
background-attachment: fixed !important;
background-size: cover !important;
}
I wonât to change icon colour based on status of two sensors.
If one of my windows is open then I want gold colour else colour must be steelblue
Does not work as expected.
Can you please check my code:
show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /devices-dashboarf/prozori_vrata
entity: ''
name: Prozori i vrata
card_mod: null
style: |
:host {
--paper-item-icon-color: {% if is_state("binary_sensor.senzor_prozora_dnevna_soba", "on") or ("binary_sensor.senzor_prozora_spavaca_soba", "on") -%} gold
{% else %} steelblue
{% endif %};
icon: mdi:window-closed-variant
show_state: true
icon_height: 70px
hold_action:
action: none
Iâm trying to use card mod to alter a card layout, and I have the individual elements working, but Iâm not sure how the syntax should be to merge the two styles Iâm trying to apply.
Could anyone advise what the correct syntax is to add this;
mushroom-state-item:
$: |
.container {
flex-direction: row-reverse !important;
}
onto this;
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
icon_color: blue
card_mod:
style: |
mushroom-card {
background: rgba(10,70,170,0.2);
padding: 6px;
border-radius: 12px
}
ha-card {
box-shadow: none !important;
padding-top: 0px !important;
padding-bottom: 10px !important;
--card-primary-font-size: 18px;
--card-primary-font-weight: 300 !important;
}
?
Iâm trying to adjust the font size of the âvalueâ for https://github.com/custom-cards/dual-gauge-card - if itâs been mentioned somewhere I accept the humiliation on failing to find the answer with Google.
Iâve attempted various combinations and tried to use developer view of browser but CSS is all Chinese to me.
What it looks currently:
Current attempt (yeah, I know 40px is not the value I want to use, but trying it for debug purposes to see when I wouldâve managed to change the value).
type: custom:dual-gauge-card
title: Teho vaihe 1
min: -1370
max: 8050
outer:
entity: sensor.shellyem3_1_channel_a_power
label: Koti
inner:
entity: sensor.shellyem3_2_channel_a_power
label: Laturi
min: 0
max: 3680
colors:
- color: var(--label-badge-red)
value: 3000
- color: var(--label-badge-yellow)
value: 1500
- color: var(--label-badge-green)
value: 500
- color: var(--label-badge-blue)
value: 0
colors:
- color: var(--label-badge-red)
value: 7000
- color: var(--label-badge-yellow)
value: 3000
- color: var(--label-badge-green)
value: -500
- color: var(--label-badge-blue)
value: -1370
card_mod:
style: |
ha-card.type-custom-dual-gauge-card {
font-size: 40px;
}
Thanks in advance!
Also screenshot from developer view, on separate message due to these being my first 2 messages here so Iâm allowed to post 1 media file per post.
I am trying to set font size of the âkitchenâ part of this card. But i am struggling a bit. The color and background and weight settings work, but not the font size. I am also not sure when to use ha-card vs :host? On a related note, can i set the background color as a rgb code, or take from the time, or does it have to be a ânamed colorâ?
cards:
- type: button
name: Kitchen
show_icon: false
card_mod:
style: |
:host {
--ha-card-background: teal;
font-size: 80px;
font-weight: 1000;
color: red;
}
How to combine icons?
This is an example of probably useless styling; consider it as a demo.
âUselessâ - because alternative ways may be used; anyway, this is up to a user which way to choose.
Consider some device with 2 attributes.
Each attribute may be expressed by some icon.
Here there is a device with 2 attributes:
- battery level - expressed by some âbatteryâ icon;
- âworking / not workingâ - expressed by some âfanâ icon.
This example contains 2 Entities cards:
- To select a battery level.
- To represent this device.
The 2nd Entities card has 2 rows:
- For battery level - has a hidden state label.
- For âworking/not workingâ state.
And both rows are placed in one row.
This is achieved by this styles:
- type: entities
card_mod:
style: |
div#states {
display: grid;
}
div#states > * {
grid-row-start: 1;
grid-column-start: 1;
}
Other styles are basically to improve a presentation.
Choose your own set of colors/opacities.
Battery color is implemented by Custom UI.
The whole code is here
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.test_level_1
name: battery level
- type: entities
card_mod:
style: |
div#states {
display: grid;
}
div#states > * {
margin: 0;
grid-row-start: 1;
grid-column-start: 1;
}
entities:
- entity: sensor.test_battery
name: ' '
card_mod:
style:
hui-generic-entity-row $: |
.text-content:not(.info) {
display: none;
}
state-badge {
opacity: 0.6 !important;
}
.: |
:host {
--mdc-icon-size: 32px;
}
- entity: input_boolean.test_boolean_2
name: some device
icon: mdi:fan
card_mod:
style:
hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
{% if is_state(config.entity,'on') %}
animation: spin 3s infinite linear;
color: black;
opacity: 0.2;
{% else %}
opacity: 0.2;
{% endif %}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
BTW, a similar functionality may be used with a custom:button-card - see this example.
(untested) Try to replace it with ha-card
I donât know enough about car-mod to know when host is right and ha-card is right, but in this case i tried ha-card first and it seems to give the same result. Background, color and font-weight changes how it looks, but font-size seems to make no difference.
Try !important in such cases first. Did you do this? You can see this good in developer tools in Chrome, etc. as well. Just open it and see which styles are applied and which are crossed out, etc. If your set value is crossed out then another one overruling and you can avoid via !important.
And you can set any color you want, not only named.
