HUGE shout-out to LiQuid_cOOled!
Working through the problem together, the fix was found and itās smooth sailing again.
Couldnāt have done it without you!
1 Like
Newbie to card mod and css styles here. Iāve been playing around with some room cards using a combination of button card/mushroom. Following along with the ideas from https://www.youtube.com/watch?v=RSQwxuAm
I am having a lot of trouble adding in a background image to my card. Trialing first with the first card in the vertical stack below (Master).
Havenāt been able to get it to work under card mod or styles:. Hoping just a newbie mistake but I would appreciate if anyone has any suggestions.
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:button-card
name: Master
icon: mdi:bed-king-outline
entity: none
card_mod:
style: |
ha-card > div {
padding: 0px 0px 0px!important;
}
ha-card {
padding: 10px 10px!important;
border: none;
border-radius: 10px;
background-image: url("/local/background/MasterBW.jpg")
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb-outline
entity: light.philips_bulb_1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_bulb_1', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.philips_strip_1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_1', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:television
entity: media_player.bedroom_tv
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('media_player.bedroom_tv', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 10px 10px 10px
- height: 132px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: light-grey
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: '1'
img_cell:
- position: absolute
- width: 60px
- height: 60px
- left: 0
- bottom: 0
- margin: 0 0 10px 10px
- background: rgba(0,0,0,0.1)
- border-radius: 10px
icon:
- width: 50px
- color: light-grey
- opacity: '1'
show_state: true
- type: custom:button-card
name: Living
icon: mdi:sofa-outline
entity: none
card_mod:
style: |
ha-card > div {
padding: 0px 0px 0px!important;
}
ha-card {
padding: 10px 10px!important;
border: none;
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:bullhorn-outline
entity: switch.neo_siren_1_alarm
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('switch.neo_siren_1_alarm', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.philips_strip_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_2', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 10px 10px 10px
- height: 132px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: light-grey
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: '0.7'
img_cell:
- justify-content: start
- position: absolute
- width: 60px
- height: 60px
- left: 0
- bottom: 0
- margin: 0 0 10px 10px
- background: rgba(0,0,0,0.1)
- border-radius: 10px
icon:
- width: 40px
- color: light-grey
- opacity: '1'
- padding: 10px
show_state: true
columns: 2
Wrong thread, this one is about themes.
1 Like
must have changed something in my themes somewhere, but can not find the specific variable responsible for my current trouble, so please let me explain.
Using some modding on the sidebar items, example:
a[data-panel='ui-develop'] paper-icon-item ha-icon {
{% set core = is_state('update.home_assistant_core_update','on') %}
--card-mod-icon: {{'mdi:package-up' if core else 'mdi:home-assistant'}};
color: {{'red' if states('sensor.memory_use_percent')|int(default=0) > 25 or
core else 'var(--ha-color)'}};
animation: {{'blink 2s ease infinite' if core else 'none'}};
}
which does this:
regular state, using the ha colors (and some extra notification, which is not the issue at hand, so left that out in the yaml above):
update available:
so far so good.
And then when I select that menu item, it shows a selected colorization I can not explain:
somehow, it overrides the card-mod with my primary-color on sidebar-selected-icon-color: (which also controls the highlighted background) and seems to not touch sidebar-selected-text-color:
I havent set that sidebar-selected-icon-color in my theme anywhere though, so it probably is done in core. (unless anyone here can explain it otherwise)?
The second challenge is, how to keep that alert-color when the menu-item is selected?
appreciate any help or hint
update
As far as I have been able to find the official variables we have this:
sidebar-background-color: red #ok also above view icons
sidebar-icon-color: pink #ok
sidebar-text-color: green #ok
sidebar-selected-background-color: orange # ??
sidebar-selected-icon-color: purple #ok !! also sets selected-background-color
sidebar-selected-text-color: yellow #ok
which seems to indicate the sidebar-selected-background-color: is no longer functional, and background is set by the sidebar-selected-icon-color.
Still is unclear why my system defaults to the primary-color, unless this is somewhere set inside the core styling (havent found that yet) as fallback default.
Hi guys, I also have some issue:
I want to push the two buttons on the āHaustĆ¼reā on the right side (Mushroom Lock) more towards the top. The
mushroom-shape-icon {
--shape-color: none !important;
}
ha-state-icon {
padding-right: 0px;
padding-left: 10px;
padding-top: 20px;
color: #8C7D75;
height: 20px;
width: 50px;
}
Seems not to work, the buttons always stay otside the cardā¦ I am desperate for help please someone has an idea? Thanks a lot in advance!
Hi everyone, I have a question posted in the auto-entities post. Maybe itās more of a question for the card-mod pros:
Does anyone have an idea on how to solve it?
Really like the sections. It fixes a problem with Nest Hub calculating masonry layout. I see one problem though which Iām not sure how to handle. The grid-section-min-width is set to 320px for the responsive design which mean only two columns will be used for Google Nest hub (1024x600). Is it any possibility to override the value using card-mod on the section? Using Chrome I can try to override it and it works perfectly with 290px for instance but Iām not sure how to do it in CSS
What is a āsecond card-mod settingā?
Guess there is no need to post whole code (170 lines).
Suggest to post only a relevant part.
If you mean two consecutive ha-card - surely the 2nd style overrides the 1st.
And similar questions are supposed to be asked in card-mod thread, this thread is for themes.
Also, suggest to ask in community first before registering a ābugā in GitHub.
1 Like
Because itās wrong to do so !
PS: This is a fun example āFind Five Faultsā !
1 Like
Since HA 2024.3 some styles are not working properly for me (like āmarginā)
Is this about something i am doing wrong? e.g.:
card_mod:
style: |
ha-card {
border: 0px;
margin-top: -95px;
margin-right: -120px;
--icon-size: 35px;
}
Thanks a lot!!
have you tried adding !important after the settings that arenāt working? If that doesnāt work, please share a cardās code where itās not working.
card_mod:
style: |
ha-card {
border: 0px;
margin-top: -95px !important;
margin-right: -120px !important;
--icon-size: 35px;
}
Also, I would suggest to post this detailed info in a card mod thread, this current thread is for themes.
Hello Colleagues,
Iām stuck, despite much trial and error, trying to move working code (styling a Vertical Stack header) in my card to my theme file.
Working code in Card:
decluttering_templates:
ents_6.2:
card:
type: custom:mod-card
style:
**hui-vertical-stack-card:**
** $:**
** .: |**
** .card-header {**
** display: block !important;**
** font-size: var(--x-vs-hdr-font-size) !important;**
** text-transform: var(--x-vs-hdr-tt);**
** letter-spacing: var(--x-vs-hdr-ls) !important;**
** #background: var(--x-vs-hdr-background) !important;**
** line-height: var(--x-vs-hdr-lh) !important;**
** border-radius: var(--x-border-radius) var(--x-border-radius) 0px 0px !important;**
** color: var(--x-vs-hdr-font-color) !important;**
** padding: var(--x-vs-hdr-padding) !important;**
** }**
card:
type: vertical-stack
title: '[[title]]'
cards:
- type: markdown
content: ' '
- type: entities
show_header_toggle: false
state_color: true
card_mod:
class: adjust-top-margin
entities:
- entity: '[[ent_1]]'
name: '[[ent_1_name]]'
icon: '[[ent_1_icon]]'
card_mod:
Latest attempt in the Theme (not working):
card-mod-theme: "Blue Dusk"
card-mod-card-yaml: |
.: |
hui-vertical-stack-card $: |
#root {
background: orange !important;
}
@keyframes fadeIn {
0% { opacity: 0.1; }
100% { opacity: 1; }
}
.adjust-top-margin {
margin-top: -24px; # usually for Entities
}
.adjust-top-margin-special {
margin-top: -12px;
Help, please.
Thank you,
Joe
Hello to all,
The card mod is really awesome and i only recently discovered it 
but i am getting there. I have made a conditional sidebar with inteface options to show or hide parts of my dashboard and it looks like this:
The sidebar is on the right side.
My question is, is it possible for the sidebar not to overlap the interface but rather to push it to the left?
Thank you in advance
This is wrong, shadowRoot-related styles cannot be inside the ā.:ā section.
Try using a STANDARD sidebar-layout.
This is not an option because i want to have the sections for dragān drop. Currently i use the custom card mod card with css to position it on the right side and all this inside a conditional card with a toggle helper. When the helper is on the sidebar appears. When its off it hidesā¦ Hope it makes senseā¦
Sections are in alpha testing now.
Thank you for your comment but it doesnāt help my question.
Both comments donāt. I asked if there is any way to push the interface to the left with card mod and i mentioned that i use a conditional sidebar. Your response was to use the standard sidebar. When i said that i use the sections your response is that it is testing (which i know). I donāt know what your comments have to do with my question. A simple ānoā would suffice.