Check Ildars post 🔹 Card-mod - Add css styles to any lovelace card - #1731 by Ildar_Gabdullin on vertical stack
I found the solution from your link, thank you!
type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card$: |
.card-header {
padding: 6px 16px 22px !important;
}
card:
type: vertical-stack
Probably daft/old or combi of those but I cannot modify the title of a markdown card (or other)
I read for about 2 hours, tried left/right but (see assumption above)
This is the simplest I could think off, it is not doing anything to the header ‘some title’
Please prove my lack-of-whatever … then at least I have a solution 
type: markdown
content: >-
whatever text
title: Some Title
card-mod:
style: |
.card-header {
color: blue;
}Has anyone tried to mod the browser_mod popup timeout? It uses primary-color, but in inspect element, there is no color value te be found. I use a primary-color that looks very close to my background-color, so the timeout bar is virtually invisible.
I’m talking about this progress bar btw:
I’ve dug around the CSS, but perhaps someone already has done this.
Try --primary-color: transparent; under style to hide the timeout bar
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Purifier
timeout: 300000
style: |
--popup-max-width: calc(385px + 495px);
--primary-color: transparent; /* hide timeout progress */
...
Thanks! Allthough, I don’t want to hide it (my issue is that it’s virtually invisible due to my colors), but with your code I managed to set a different color and make it visible !
this should work:
- type: markdown
title: Z-wave device status
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
or, I should say, it works in my config…
note that your spacing is completely incorrect, so start with fixing that
Thanks but it won’t work except in cards as Entities, Entity
for markdown, this works and colors all text red
type: markdown
title: Z-wave device status
content: |
some text
card_mod:
style: |
ha-card {
color: red;
}
this does nothing
type: markdown
title: Z-wave device status
content: |
some text
card_mod:
style: |
.card-header {
color: red;
}
The latter colors the title fine in type: Entity and Entities
I have seen excluding stack/condition/etc. but this is just basics for what I can understand
EDIT, browsed the github errors … and found this which works
type: markdown
title: HALLO
content: |
bla
card_mod:
style:
.: |
ha-card {
color: blue;
}
$: |
h1.card-header {
background-color: red;
}Ah yes, you must be using 3.2.0
I still use 3.1.4 because of errors/issues using the last 2 updates
What I am trying to achieve is to create a darker pop-up background, and I am not sure where to adjust this. It is a full screen pop-up. Code is underneath. can someone help me with this?
type: custom:vertical-stack-in-card
horizontal: true
view_layout:
grid-area: header
cards:
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: menu
card_mod:
style: |
ha-card {
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
- type: template
content: Casa
card_mod:
style: |
ha-card {
padding-top: -15px;
--chip-height: 80px;
--chip-background: rgba(var(--rgb-green), 0.0);
}
- type: entity
entity: input_button.dummy
icon: mdi:magnify
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: custom:search-card
max_results: 50
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: browser_mod.navigate
data:
path: '?disable_km'
- service: browser_mod.refresh
browser_id: THIS
content_info: none
card_mod:
style: |
ha-card {
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
margin-right: -10px;
margin-left: -10px;
margin-top: -10px;
height: 70px !important;
}
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: 0;
}
problem with display… How to hide state-label if some conditions are met in card type picture-elements.
my code:
- type: state-label
entity: cover.shelly25_boiler
attribute: current_position
suffix: '%'
style:
top: 60%
left: 25%
transform: scale(0.6,0.6)
color: white
font-size: 20px
font-family: Calibri
border-radius: 100%
border-style: solid
border-color: white
background-color: gray
text-align: center
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: gray;
color: gray;
background-color: gray;
}
.badge-container .title {
color: gray;
}
i tried with below code a the end of above code and unfortunately nothing happens… but it works for state-badge… 
… probably something simple 
ha-label-badge {
display: {% if is_state('input_boolean.czujnikruchu', 'on') %} none {% elif is_state('input_boolean.pietro', 'on') %} none {% else %} inline-block {% endif %};
}
Hello,
I hope someone can help me out.
Currently I’m working on building a “custom” sidebar menu. I’ve added a current date and time and now working on a few navigation buttons. I cannot seem to get the spacing right… Can someone help me out here? I would like to have the menu buttons touching each other. What am I doing wrong.
type: custom:layout-card
layout:
grid-template-columns: auto
grid-template-rows: auto
grid-template-areas: |
"date"
"time"
"break"
"menu1"
"menu2"
"menu3"
"menu4"
layout_type: custom:grid-layout
cards:
- type: markdown
content: '{{states(''sensor.huidige_datum'')}}'
view_layout:
grid-area: date
card_mod:
style: |
ha-card {
background: transparent;
border: none;
font-size: 12px;
text-align: center;
}
- type: markdown
content: '{{states(''sensor.huidige_tijd'')}}'
view_layout:
grid-area: time
card_mod:
style: |
ha-card {
background: transparent;
border: none;
font-weight: bold;
font-size: 50px;
text-align: center;
padding-bottom: 30px
}
- type: markdown
content: Home <ha-icon icon="mdi:home"></ha-icon>
view_layout:
grid-area: menu1
card_mod:
style: |
ha-card {
background: red;
box-shadow: 10;
border: none;
text-align: left;
border-radius: 0px;
padding-left: 30px;
}
- type: markdown
content: Lampen <ha-icon icon="mdi:lightbulb-group"></ha-icon>
view_layout:
grid-area: menu2
card_mod:
style: |
ha-card {
background: grey;
border: none;
text-align: left;
border-radius: 0px;
padding-left: 30px;
}
- type: markdown
content: Lampen <ha-icon icon="mdi:lightbulb-group"></ha-icon>
view_layout:
grid-area: menu3
card_mod:
style: |
ha-card {
background: green;
border: none;
text-align: left;
border-radius: 0px;
padding-left: 30px;
}
view_layout:
grid-area: sidebar
Hello I was wondering if it is possible to round the corners of a webpage card. This is what I have however it isn’t doing anything.
type: iframe
url: >-
----------------------
aspect_ratio: 57%
card_mod:
style: |
ha-card{
border-radius: 25px
}
The code you posted seems to be absolutely not related to the picture.
Explanations are needed.
Also, I strongly suggest you never ever use dark theme when asking questions - many users can barely see different shades in such dark pictures.
Sorry, this is absolutely not to teach you - just a matter of assistance!
Never used layout-card as a card (only for a view) - but a similar thing may be achieved by stack-in-card, compare:
code for the bottom card
type: custom:stack-in-card
keep:
background: true
cards:
- type: markdown
content: '{{states(''sun.sun'')}}'
view_layout:
grid-area: date
card_mod:
style: |
ha-card {
background: transparent;
border: none;
font-size: 12px;
text-align: center;
}
- type: markdown
content: '{{states(''sun.sun'')}}'
view_layout:
grid-area: time
card_mod:
style: |
ha-card {
background: transparent;
border: none;
font-weight: bold;
font-size: 20px;
text-align: center;
padding-bottom: 30px
}
- type: markdown
content: Home <ha-icon icon="mdi:home"></ha-icon>
card_mod:
style: |
ha-card {
background: red;
box-shadow: 10;
border: none;
text-align: left;
border-radius: 0px;
padding-left: 30px;
}
- type: markdown
content: Lampen <ha-icon icon="mdi:lightbulb-group"></ha-icon>
card_mod:
style: |
ha-card {
background: grey;
border: none;
text-align: left;
border-radius: 0px;
padding-left: 30px;
}
- type: markdown
content: Lampen <ha-icon icon="mdi:lightbulb-group"></ha-icon>
card_mod:
style: |
ha-card {
background: green;
border: none;
text-align: left;
border-radius: 0px;
padding-left: 30px;
}
If you do not need a background & borders for the stack - this may be fixed by card-mod,
1 Like
Ildar - Your posts here have been unbelievably over the last year or so. Thank you!!!
I am stuck and just cannot figure this out. I am trying to modify the scrollbar to have a color of none.
When I add --scrollbar-thumb-color: red !important; or ::-webkit-scrollbar: none just about anywhere in the chrome devtools, the scrollbar changes color properly. However, nothing I have tried in yaml has worked.
Here’s just one version of the code I have tried:
card_mod:
class: middle-right
style: |
.content ha-logbook $ ha-logbook-renderer $: |
.container .ha-scrollbar {
overflow-y: auto !important;
--scrollbar-thumb-color: green !important;
}
ha-logbook {
height: 16.1vh !important;
}
I realize that code isn’t quite right. I have tried so many different frustrating versions…
I will really appreciate any help you send my way! I’ll bet the fix is simple for you to see 
The style may NOT be applied.
type: logbook
entities:
- sun.sun
hours_to_show: 72
card_mod:
style:
ha-logbook $:
ha-logbook-renderer $: |
.container.ha-scrollbar {
overflow-y: auto !important;
--scrollbar-thumb-color: cyan !important;
}
.: |
ha-logbook {
height: 200px !important;
}
Probably better to use a technics similar to styling images in Logbook.
2 Likes
Thank you for the fast reply!!! I looked at that method a few times, but it seemed a bit beyond me. I will give it a try and see what happens.
Interestingly, that may also help streamline code for a group of us who have been using the LCARS theme.
I appreciate it!
1 Like
Hello guys!
I’m struggling with the alignment.
I’d like to be able to do alignments for the Icons at the bottom of the card (start, justify, end and center). All the cards are Mushroom Template cards and I’m using stack-in-card to combine them and card-mod to style (remove borders, background and etc…)
How could I align the icons to the end? Thank you!
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {--ha-card-border-width: 0}
ha-card {padding-top: 5px !important}
ha-card {padding-bottom: 0px !important}
ha-card {padding-left: 5px !important}
:host { --mush-icon-size: 55px }
primary: Office
secondary: >-
{{ states('sensor.bedroom_xiaomi_clock_sensor_temperature') |round }}°F |
{{ states('sensor.bedroom_xiaomi_clock_sensor_humidity') |round }}%
icon: mdi:flask
icon_color: orange
badge_icon: |-
{% if states('binary_sensor.closet_door_contact') != 'off' %}
mdi:door-open
{% endif %}
badge_color: red
- type: custom:stack-in-card
card_mod:
style: |
ha-card {--ha-card-border-width: 0}
mode: horizontal
cards:
- type: custom:mushroom-light-card
card_mod:
style: >
ha-card {padding-top: 3px !important}
ha-card {padding-bottom: 0px !important}
mushroom-shape-icon { --shape-color: none !important }
mushroom-shape-icon { --shape-color-disabled: transparent
!important}
:host { --mush-icon-size: 50px }
entity: light.office_wall_light
primary_info: none
secondary_info: none
layout: vertical
use_light_color: true
- type: custom:mushroom-light-card
card_mod:
style: >
ha-card {padding-top: 3px !important}
ha-card {padding-bottom: 0px !important}
mushroom-shape-icon { --shape-color: none !important }
mushroom-shape-icon { --shape-color-disabled: transparent
!important}
:host { --mush-icon-size: 50px }
entity: light.office_wall_light
primary_info: none
secondary_info: none
layout: vertical
use_light_color: true