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
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;
}
You got several “}” brackets missing.
1 Like
Thank you, that fixed the problem.
I think I don’t understand how to apply a card-mod.
I have a component that looks like this:
type: custom:mushroom-light-card
entity: light.guest_room_lights
name: Lights
fill_container: true(
show_brightness_control: true
layout: horizontal
and if I use the inspector, I find this div that I want to change:
<div class=" container ">
<div id="slider" class="slider" style="--value: 0.21; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div class="slider-track-background"></div>
<!--?lit$960817067$--><div class="slider-track-active"></div>
<!--?lit$960817067$-->
</div>
</div>
if I manually add “margin: 0 40px 0 0;” to the .slider style via chrome inspector, it does what I want it to (shrink the slider so there’s a gap between the slider and the end of the tile).
but I can’t seem to get it to work with card mod:
card_mod:
style: |
.slider {
margin: 0 40px 0 0;
}
how should my card_mod look?