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?
I would suggest the main Mushroom card threads here and here
try this
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
margin: 0 40px 0 0;
}
1 Like
Does anyone have any advice or examples for theming an auto-entities card with card-mod?
Iāve already successfully got my theme working with other card types, both with generic ha-card styling, and also targeting specific card type, but canāt get auto-entities to show as anything other than the non-card-mod colours, e.g. as an example Iāve got the following for other cards:
card-mod-card-yaml: |
.: |
ha-card {
--mdc-icon-size: 20px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background-color: rgba(var(--rgb-primary-background-color),.33);
}
:host(.type-heading) ha-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: transparent !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--accent-color) !important;
}
:host(.type-heading) .title > p {
font-size: 1.25em !important;
}
:host(.type-heading) .title ha-icon {
--mdc-icon-size: 24px;
color: var(--accent-color) !important;
}
:host(.type-heading) .subtitle ha-icon {
color: var(--accent-color) !important;
}
(Note, I know I may not be doing it the best way, but it seems to work ok!)
That successfully themes other cards, and overrides heading cards, but I canāt find a working config/selector to do the same for auto-entities (I want it to have the default āha-cardā theming.
Any examples of what anyone else has successfully done would be appreciated, and I can then adapt to what Iāve got. Iām on current versions of HA, card-mod, and auto-entities.
Thanks.
you should still set the class to the card you use inside the auto-entities. or any other card_mod modification for that matter, they should simply work transparently.
(only not if you happen to be still using version card_mod 3.5.0 which is buggy in that respect. You are using the 3.5.0 class formatting style, so thatās why I am askingā¦)
for specific auto-entities questions, hop over to the dedicated thread in this community, there are many examples
So yes Iām using 3.5.0 (as thatās the current version on HACS).
I did have to redo the selectors a couple of weeks back, which after reading about the changes in 3.5.0 I now realise were down to the new class formatting style (previously I had a simpler āha-card.type-heading .title > pā style), but wasnāt trying to format the auto-entitles card then so donāt know if it worked then.
I did take look in the auto-entities thread, but there didnāt seem to be anyone trying to format via a theme, just via config on the individual cards themselves, and trying to translate over to a theme didnāt work so well!
From what you say I wonder if itās a 3.5.0 issue, and whether I need to manually go back to 3.4.4 and see if it works better thereā¦
No, it isnāt.
It was only there for some hours. Then it was pulled back and is neither on HACS nor on the repositiry anymore.
yes, itās a card-mod 3.5.0 issue to NOT modify the auto-entities correctly anymore.
If you can not rewrite those using other cards, you really should go back to 3.4.4, and use your former classes.
and then still, set that class on the entities cards in your auto-entities configuration.
before we land in the same trouble as the GitHub repo:
please first downgrade to 3.4.3, reload/refresh cache etc etc, and next update to 3.4.4ā¦
