Should not be used to style a particular card.
Check docs & examples for “card-mod-card-yaml”.
Merry Christmas everyone! I need a bit of help 
I’m trying to create a custom theme and use the card mod to style the .primary span inside a ha-tile-info component that’s inside the ha-card component.
I can achieve this by editing the tile card directly and add the following:
type: tile
entity: switch.bedroom1_switch1_btn1
card_mod:
style:
ha-tile-info$: |
.info .primary {
color: red;
}
How can achieve the same thing inside a theme? I tried creating a custom theme and adding the card-mod-card styles as shown bellow but it’s not working.
frontend:
themes:
custom:
card-mod-theme: custom
card-mod-card: |
ha-card {
ha-tile-info$: |
.info .primary {
color: red;
}
}
1 Like
I’m trying to set the background transparancy of all cards to 70% using card-mod-view. I’m not so experienced, so not sure what I’m doing wrong here. Any ideas?
bg-theme:
card-mod-theme: bg-theme
card-mod-view: |
hui-view {
background: url("{{ states('sensor.unsplash_background') }}")
}
ha-card {
background: rgba(0, 0, 0, 0.7);
}
May I ask why did you create an issue for this in Github?
Already suggested to close.
Try
test:
card-mod-theme: test
card-mod-view-yaml: |
.: |
hui-masonry-view, hui-sidebar-view, hui-panel-view,
masonry-layout, horizontal-layout, vertical-layout {
background-image: url({{state_attr('person.xxxx','entity_picture')}});
}
You may also use one non-repeated image with this:
background-size: 100% 100%;
I’m sorry. I didn’t know card mod had its own community forum.
1 Like
Surely it has))))
Almost each popular card/plugin has a dedicated thread.
And when posting an issue on Github you get a warning like “use Community”.
Can someone help me please? I’m trying to do something that should be simple.
Here is a Mushroom Entity Card displaying my temperature sensors. Looks nice, but I’d like to have the Name text on top, the Icon in the middle and the Temperature on the bottom.
The Glance Card is just what I want, but I can’t figure out how to make customize the text size like I can do on the Mushroom Entity Card. Here is the Glance Card. I have searched and searched and can’t figure it out.
I have inspected the dashboard html code to try and add the text-size option, but nothing I do seems to work. I really prefer the separated look of the Mushroom Entity Card, so I’d prefer to fix that one if it’s possible.
Thanks in advance! It’s probably something simple.
Wrong thread, this one for themes. Go to the main card-mod thread. Check a link at the end of 1st post.
Given the following:
type: custom:auto-entities
card:
type: entities
title: Docker
filter:
template: >-
{%- for item in states.sensor |
selectattr('entity_id','in',integration_entities('portainer')) -%}
{%- if "portainer_server" in item.entity_id -%}
{{
{
'type': 'custom:template-entity-row',
'entity': item.entity_id,
'name': state_attr(item.entity_id,'friendly_name'),
'state': item.state,
'icon': 'mdi:docker'
}
}},
{%- endif -%}
{%- endfor -%}
sort:
method: friendly_name
I would like the state color to be green if running and red if not running. I’ve had a bit of a challenge trying to find a way to turn the actual item state a color in template entity row. And then what’s the correct syntax to implement that card mod in this auto entities template?
- This thread is for themes. You should have asked in the main card-mod thread.
- Examples for using card-mod for auto-entities are provided here: main card-mod thread → 1st post → link at the bottom titled “fantastic” → auto-entities.
- Particularly for template-entity-row: you may use a native “color” option which supports jinja. Using card-mod not required (unless you need smth specific like mediaquery etc). There is a dedicated thread for template-entity-row.
Scrollable badges:
card-mod-view-yaml: |
:first-child $:
hui-view-badges $: |
.badges {
overflow-x: auto;
flex-wrap: unset !important;
justify-content: unset !important;
}
.badges > * {
min-width: fit-content;
}
4 Likes
I’ve put this in my theme yaml, reloaded themes, cleared cache, and refreshed, but I still have no effect. Is there something simple I could be missing?
Check if you added card-mod-theme code properly into you theme file.
Could be useful: card-mod thread → 1st post → link at the bottom → themes → one of 1st links
Perfect, thank you. I realized I didn’t have “card-mod-theme” defined. Appreciate the help!
1 Like
Oh goody! I was just thinking about this earlier and thought I’d play with this tonight, but I ran out of time. Definitely going to try this.
At the moment, all I want to do is to have a transparent or semi-transparent background on every card. It seems on your example that you have put a image as background on every cards (so it is similar to what I want), however - if I try your code it puts the image as background behind all the cards, not on the cards themselves.
Not sure why we get different results. I have also tried this, but it didn’t do anything at all even though I can see in the generated html that the elements are called ha-card:
bg-theme:
card-mod-theme: bg-theme
card-mod-card-yaml: |
ha-card {
background: none !important;
}
Wrong thread. Ask in the main card-mod thread.
on classes in 3.5.0
(so !!!this does Not work in 3.4.4 or lower versions of card-mod!!!, you need the syntax from the older examples)
(basically using ha-card(.class-header-icon) .card-header .icon { on the first line
this is/was the new 3.5.0 syntax:
:host(.class-header-icon) ha-card .card-header .icon {
padding-left: 0;
padding-right: 4px;
/*color: pink;*/
}
:host(.class-header-margin-no-color) .card-header {
font-weight: 400;
font-size: 20px;
padding: 0 12px;
margin: 0 0 16px 0px;
}
:host(.class-section-heading) ha-card .container {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off);
--ha-heading-card-title-font-size: 20px;
--ha-heading-card-title-font-weight: 400;
border-radius: var(--ha-card-border-radius);
height: 48px;
padding: 0 12px;
box-shadow: var(--ha-card-box-shadow);
}
:host(.class-section-heading-no-color) ha-card .container {
--ha-heading-card-title-font-size: 20px;
--ha-heading-card-title-font-weight: 400;
height: 48px;
padding: 0 12px;
box-shadow: var(--ha-card-box-shadow);
}
:host(.class-header-margin) ha-card .card-header {
background: var(--background-color-off);
color: var(--text-color-off);
font-weight: 400;
font-size: 20px;
padding: 0 12px;
margin: 0 0 16px 0px;
}
1 Like
This is the card mod theme thread, right? I have solved the transparent background. Now I need the text on all the cards to be white, and have a black text shadow. However, I’m not sure what I’m doing wrong - but the text-shadow doesn’t appear on the text.
This is my current code:
bg-theme:
card-mod-theme: bg-theme
ha-card-background: "rgba(0, 0, 0, 0.4)"
primary-text-color: white
secondary-text-color: white
card-mod-view-yaml: |
.: |
hui-view {
background: url("{{ states('sensor.unsplash_background') }}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
ha-card {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
card-mod-card-yaml: |
ha-card {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
Solution:
Note:
config.entityis the entity id in this context found here
type: custom:auto-entities
card:
type: entities
title: Docker
filter:
template: >-
{%- for item in states.sensor |
selectattr('entity_id','in',integration_entities('portainer')) -%}
{%- if "portainer_sidmesh" in item.entity_id -%}
{{
{
'type': 'custom:template-entity-row',
'entity': item.entity_id,
'name': state_attr(item.entity_id,'friendly_name') | replace('Portainer SidMesh (local) ',''),
'state': item.state,
'icon': 'mdi:docker',
'card_mod': {
'style': ".state { background-color: {% if is_state(config.entity,'running') %} green {% elif is_state(config.entity,'created') %} orange {% else %} red {% endif %} }"
}
}
}},
{%- endif -%}
{%- endfor -%}
sort:
method: friendly_name