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.
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?
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;
}
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!
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;
}
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
How can I modify (or remove) height transition time of all entity popup cards? They all have animation that looks really bad. In browser debug console I have manually changed value from 0.3s to 0.01s and that fixes the issue until I close the browser window. But how do I make it permanent via card-mod or theme?
div class="animation-container"
.animation-container {
overflow: hidden;
height: 0px;
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
Adding this to theme fixes the problem. Chart transition is still there, but now there appears no flash of scrollbar on the right side of the popup window and popup window size is correct right away.
ha-dialog {
--mdc-dialog-min-height: 568px !important;
}
Hello, I am trying to set a fixed width to my sidebar when using the sidebar layout/view on my dashboard. I see there is an earlier post with the needed code. I added the card mod theme code into the theme I am using, and the command to switch the sidebar position is working. For some reason, the “min-width” command is not affecting anything in my dashboard, even after a restart…
Here is how I have it setup in my yaml theme file. Would anyone be willing to assist a beginner?
card-mod-theme: "minimalist-desktop"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
.container div#sidebar {
min-width: 800px;
}