Congrats! For future reference this is the thread related to what you’re working with in this specific case 
How to set a custom width? I can’t find an example you did this already.
What I have:
- type: custom:stack-in-card
title: ''
mode: vertical
keep:
background: true
box_shadow: true
margin: true
outer_padding: true
border_radius: true
cards:
- type: entities
entities:
- entity: climate.thermostat
secondary_info: last-changed
card_mod:
style:
.: |
ha-card {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
margin-bottom: -13px;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:slider-entity-row
entity: climate.thermostat
name: ''
hide_when_off: false
full_row: true
min: 7
max: 32
step: 1
attribute: temperature
toggle: false
show_state: true
state_color: true
secondary_info: last-changed
state_header: ''
column: false
- type: custom:climate-mode-entity-row
entity: climate.thermostat
name: ' '
icon: none
secondary_info: none
modes:
- hvac_mode: auto
icon: mdi:calendar-sync
color: green
- hvac_mode: heat
- hvac_mode: 'off'
card_mod:
style:
.: |
ha-card {
margin-left: -10px;
margin-right: -10px;
margin-top: 0px;
margin-bottom: 15px;
#box-shadow: none;
}
What I want:
Using about 75 % for the left row, 25 % for the right one. Currently it is equally (50 %).
@Ildar_Gabdullin I’m not in a hurry. There are much much MUCH more important things nowadays than HA GUI modding. Take care, I hope you’re safe.
Hi all.
I have a problem with a style.
This is the object and the DOM.
I have this code
- type: entities
title: Durata
entities:
- entity: input_number.durata1_zona1
card_mod:
style:
.: |
ha-card {
border-radius:5px!Important;
}
"ha-slider$": |
div#sliderContainer {
margin-left: 0;
margin-right: 0;
}
paper-progress {
background-color:orange!Important;
border-radius:5px!Important;
padding:0!Important;
}
div#secondaryProgress {
background:red!Important;
}
"ha-slider$ paper-progress$": |
div#progressContainer {
height:30px;
background:grey!Important;
}
div#primaryProgress {
background:orange!Important;
}
This working for change slider style, but I need to change the border of card and the H1, but I have try in different ways without success.
Can you help me?
Ragards,
Marco
I have two issues using the custom:stack-in-card (more precise: the horizontal-stack inside it):
-
MAJOR: On mobile devices (on desktop everything is fine!) the cards exceed their border limits, resulting in cut off content on the right:
-
MINOR: See 🔹 Card-mod - Add css styles to any lovelace card - #2853 by e-raser for custom width inside
horizontal-stackcard
This is what I use:
type: entities
title: ABC
state_color: true
show_header_toggle: false
entities:
- type: section
label: GRUPPEN
- type: custom:stack-in-card
title: ''
mode: vertical
keep:
background: true
box_shadow: true
margin: true
outer_padding: true
border_radius: true
cards:
- type: entities
entities:
- entity: cover.rollladen_alle
name: Alle
secondary_info: position
card_mod:
style:
.: |
ha-card {
margin-left: -15px;
margin-right: -15px;
margin-top: -15px;
margin-bottom: -13px;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:slider-entity-row
entity: cover.rollladen_alle
name: ' '
icon: none
hide_when_off: false
full_row: true
min: 0
max: 100
step: 1
attribute: position
toggle: false
show_state: false
state_color: true
secondary_info: ''
state_header: ''
column: true
- type: custom:cover-position-preset-row
name: ' '
icon: none
entity: cover.rollladen_alle
reverseButtons: true
customSetpoints: true
openPosition: 100
midOpenPosition: 71
midClosePosition: 17
closePosition: 0
customText: true
customOpenText: AUF
customMidOpenText: Mitte (1/2)
customMidClosedText: Fast zu
customClosedText: ZU
state_color: false
card_mod:
style:
.: |
ha-card {
margin-left: -10px;
margin-right: -10px;
margin-top: 0px;
margin-bottom: 15px;
box-shadow: none;
}
Try putting the styles for the card at the level of the card itself, not the entity. Hopefully this should work:
- type: entities
card-mod:
style:
.: |
ha-card {
border-radius: 5px;
}
ha-card h1.card-header {
<your-style-key>: <your-style>
}
title: Durata
entities:
- entity: input_number.durata1_zona1
card_mod:
style:
ha-slider$: |
div#sliderContainer {
margin-left: 0px;
margin-right: 0px;
}
and so on...
Seems there are some new variables in 2022.3.x?
My input_select now looks like this:
- type: entities
title: Theme Switcher
show_header_toggle: false
entities:
- input_select.theme_switcher
How can I make it use the background colour instead of whitesmoke?
this is what I use (in my generic theme settings):
# set colors on quickbar
mdc-text-field-fill-color: var(--card-background-color) # quickbar header
mdc-text-field-ink-color: var(--primary-text-color) #var(--mdc-theme-primary)
# set colors on input_select
mdc-select-ink-color: var(--primary-text-color)
mdc-select-fill-color: var(--card-background-color)
and here are the official variables:
and
true, some changes in 2022.3
which lead to another nice guide
Changed the alpha to 0 on the card-background-color has fixed it but I can’t wait to find out what else this might have screwed up…
Hi guys,
I would like to edit the flex properties of the button-card within a conditional card.
The reason is that with the default 1 1 0 flex parameters the conditional cards are evenly distributed within a horizontal stack. However, I want them to be left-aligned and as close together as possible, which is possible with a flex setting of 1 1 1.
I thought I could solve this with the help of Card Mod. Unfortunately, my code does not seem to be correct. I hope someone here can help me.
This is my current code excerpt.
- type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style: |
button-card {
flex: 1 1 1;
}
card:
type: conditional
conditions:
- entity: binary_sensor.spuehlmaschine
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.spuehlmaschine
ulm_chip_mdi_icon_only_icon: mdi:dishwasher
- type: custom:mod-card
card_mod:
style: |
button-card {
flex: 1 1 1;
}
card:
type: conditional
conditions:
- entity: binary_sensor.waschmaschine
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.waschmaschine
ulm_chip_mdi_icon_only_icon: mdi:washing-machine
maybe use card-mod, within type:conditional
copy-paste from card-mod-documentation:
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.
Read further for how to and code example for cards without ha-card element: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Cards that don’t have a
<ha-element>can still be styled by using the suppliedcustom:mod-cardcard. This is only necessary in very few instances, and likely to bring more problems than it solves. Most likely your card contains another card, in which case that is the one you should apply the styles to.
1 Like
me myself have(still) struggling with ideas, in regards to card-mod, some times i end up using “entities-card” as base, thou, thou i want different cards, and some CSS, i prefer in “View-configuration”( applied to all (almost) cards in my View … it’s my copy/paste/pick approach to make it work( and to “verify” what the Docs. says ) … not that i don’t trust the authors, im just curious 
… i.e “What happens if i…”
edit: i mend Theme, not View
try this:
styles:
justify-content: flex-start;Nope, that doesn’t seem to work 
- type: horizontal-stack
cards:
- type: conditional
style:
justify-content: flex-start
flex-grow: 1
flex-shrink: 1
flex-basis: 1
conditions:
- entity: binary_sensor.spuehlmaschine
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.spuehlmaschine
ulm_chip_mdi_icon_only_icon: mdi:dishwasher
- type: conditional
style:
justify-content: flex-start
flex-grow: 1
flex-shrink: 1
flex-basis: 1
conditions:
- entity: binary_sensor.waschmaschine
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.waschmaschine
ulm_chip_mdi_icon_only_icon: mdi:washing-machine
- type: conditional
style:
justify-content: flex-start
flex-grow: 1
flex-shrink: 1
flex-basis: 1
conditions:
- entity: binary_sensor.trockner
state: "on"
card:
type: 'custom:button-card'
template: chip_mdi_icon_only
variables:
ulm_chip_mdi_icon_only_entity: binary_sensor.trockner
ulm_chip_mdi_icon_only_icon: mdi:tumble-dryer
view_layout:
grid-area: chips_c
ok, that’s what i thought thx. for the pic"overview", always good to know the whole context, as the code-snippet dont tell whether you are editing yaml, or a card, with cards within a card … also a browser, + refresh of same is essential
… seems like in the code-snippet you have 3 “button-card” , but pic showing 2 ?
anyway, justify-content: flex-start might not work on a “conditional” card ( as it’s not a card )
If you f.ex. use paper-button-row, you get exactly ( the most “intensified” packed to the left ) view, thou maybe then you have to “specify” your “conditions” else where, i don’t even know what the purpose here, setting each button to “on” vs “of”, or what are you trying to achive with the 1 “condition”, isn’t it something that should/could be in a template ?
To be honest it looks like your view is a “grid-view”
PS: you have (it shows) 2 cards> with content to the most left ! , will never be(look) different, unless you pack that “row” with cards
Edit2: https://github.com/jcwillox/lovelace-paper-buttons-row
Edit3: or you have in fact 1 row -2 column ?
@CM000n … i did type “styles” above, anyway wont be of any use due to your “setup” … unless you skip your “card-setup”, use other cards to achieve what/which “look” you want