The freaking markdown card css has changed for each of the last three or four releases. Itās like playing whack-a-mole.
I have different styling codes since a few HA versions ago when stuff changed. Mine is like this:
.: |
ha-card {
height: 20px;
--ha-card-background: none !important;
box-shadow: none !important;
left: -8%;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
Strange that your code has worked like that all this time. Maybe try my example.
Just the markdown section?
Iād first copy/paste just to see if the styling are applied or not. Before weāre troubleshooting the wrong thing. If it works, then you can edit the code so the card style itself is like you have now.
Also test with h2 instead of h1 if it doesnāt work. I noticed I have h1 while you have h2 in your code. But first just copy and paste the exact code as a starting point. The code goes under style: so keep the indentations in mind.
Also if it doesnāt work, please post your exact code (including the style variable).
But to clear thing up: Iām still on HA 116. The reason I posted my code is because mine are different since 111. The way you have it now stopped working for me back then. So maybe this code works fine on 117 now for you.
Btw, I was refering to this issue on github and solution from a user: https://github.com/thomasloven/lovelace-card-mod/issues/52#issuecomment-644780111
Has been working solid for me since HA 0.111 (what broke it first). I believe there is a code for h2 styling as well under my link somewhere.
1 Like
So the thread you linked really helped. It seems that using h2 doesnāt work very well so I changed to h1 and used this:
- type: markdown
style:
ha-markdown:
$: |
h1 {
display: block;
letter-spacing: -0.012em;
line-height: 32px;
font-size: 24px;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: normal;
}
content: >
# Chromecast on LG TV
As an example
2 Likes
Iām scratching my head on a small mod. I have a popup which contains three cards included in a custom:vertical-stack-in-card . Iād like to get rid of the border radius as in the screenshot below, while retaining the border radius of the popup.
My code:
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- type: 'custom:state-switch'
entity: sensor.living_room_tv_source
transition: flip
states:
HDMI1:
type: picture
image: /local/ui/swisscomTV.png
Plex:
entity: media_player.plex_plex_for_lg_lg_oled77w7v_z
group: false
hide:
controls: true
name: true
power: true
source: true
volume: true
icon: true
style:
mmp-powerstrip:
$: |
.label {
display: none;
}
artwork: full-cover
type: 'custom:mini-media-player'
YouTube Kids:
entity: media_player.living_room_tv
group: false
hide:
controls: true
name: true
power: true
source: true
volume: true
icon: true
style:
mmp-powerstrip:
$: |
.label {
display: none;
}
artwork: full-cover
type: 'custom:mini-media-player'
YouTube:
entity: media_player.living_room_tv
group: false
hide:
controls: true
name: true
power: true
source: true
volume: true
icon: true
style:
mmp-powerstrip:
$: |
.label {
display: none;
}
artwork: full-cover
type: 'custom:mini-media-player'
Screen Share:
entity: media_player.living_room_tv
group: false
hide:
controls: true
name: true
power: true
source: true
volume: true
icon: true
style:
border-radius: 0vw
mmp-powerstrip:
$: |
.label {
display: none;
}
artwork: full-cover
type: 'custom:mini-media-player'
- entity: media_player.living_room_tv
group: false
hide:
power_state: false
source: true
volume: true
name: true
icon: 'mdi:television'
shortcuts:
buttons:
- data:
button: HOME
entity_id: media_player.living_room_tv
icon: 'mdi:menu'
id: webostv.button
type: service
- data:
button: UP
entity_id: media_player.living_room_tv
icon: 'mdi:arrow-up-bold'
id: webostv.button
type: service
- data:
button: BACK
entity_id: media_player.living_room_tv
icon: 'mdi:undo-variant'
id: webostv.button
type: service
- data:
button: VOLUMEUP
entity_id: media_player.living_room_tv
icon: 'mdi:volume-high'
id: webostv.button
type: service
- data:
button: LEFT
entity_id: media_player.living_room_tv
icon: 'mdi:arrow-left-bold'
id: webostv.button
type: service
- data:
button: ENTER
entity_id: media_player.living_room_tv
icon: 'mdi:keyboard-return'
id: webostv.button
type: service
- data:
button: RIGHT
entity_id: media_player.living_room_tv
icon: 'mdi:arrow-right-bold'
id: webostv.button
type: service
- data:
button: VOLUMEDOWN
entity_id: media_player.living_room_tv
icon: 'mdi:volume-medium'
id: webostv.button
type: service
- icon: ' '
id: YouTube
type: source
- data:
button: DOWN
entity_id: media_player.living_room_tv
icon: 'mdi:arrow-down-bold'
id: webostv.button
type: service
- id: ' '
type: source
- data:
button: MUTE
entity_id: media_player.living_room_tv
icon: 'mdi:volume-low'
id: webostv.button
type: service
- icon: 'mdi:plex'
id: Plex
type: source
- icon: 'mdi:television-classic'
id: HDMI1
type: source
- icon: 'mdi:youtube'
id: YouTube Kids
type: source
- icon: 'mdi:cast'
id: Screen Share
type: source
columns: 4
type: 'custom:mini-media-player'
style: |
ha-card {
box-shadow: none !important;
}
- entities:
- entity: sensor.pioneer_avr_volume
icon: 'mdi:volume-low'
name: ' '
type: entities
style: |
ha-card {
box-shadow: none !important;
}
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
z-index: 5
title: TV salon
I tried applying border-radius: 0 !important to ha-card and :host on both the mini-media-player and state-switch and it didnāt change anything.
Any help appreciated, as Iām not exactly a CSS wiz.
Thatās because youāre not using card mod correctly. It doesnāt work on cards like vertical stack, state switch. This is all explained in the docs, so I advise you to read that. This will make the use of card mod a lot easier for you 
Here is the link how you can still use card mod with state switch etc. All the way to the bottom, part about mod-card (different than card mod).
Hello
Could anyone help me removing space between label and toggle switch, please? The entry is rendered by multiple-entity-row
There is ha-switch HTML element which have padding-top set to 13. I need to set it to lower value or to zero
Thank you in advance
What do you mean? Aligning the switches left, or top?
Thanks! Couldnāt get mod-card to work for some reason. Did some digging around with the inspect tool of my browser, managed to find the culprit but didnāt manage to override its border-radius setting. Iāll keep digging sometime, but for now, Iāll move on to different parts of my UI.
I mean remove space between labels (Left, Right, Main) and respective toggles
Would someone mind helping me with the required style syntax for adjusting the grid margin values in the layout below please?
I have the following button layout where Iād like to reduce the gap between each button.
If I look at the console to inspect CSS layout, I can see the following margin information:
Which is linked to the following:
When I click on that element, it shows this around the buttons:
Does anyone know what style syntax is required within ha-card to reduce the margin size please?
My yaml is as follows:
- type: vertical-stack
cards:
- type: custom:layout-card
layout: grid
gridrows: 50% 50%
gridcols: 15% 35% 15% 35%
gridgap: 1px
cards:
- type: "custom:button-card"
entity: light.test
gridrow: 1 / 3
gridcol: 1 / 1
style: "ha-card { height: 100%; }"
- type: "custom:button-card"
entity: light.test
gridrow: 1 / 1
gridcol: 2 / 2
style: "ha-card { height: 55px; }"
- type: "custom:button-card"
entity: light.test
gridrow: 2 / 2
gridcol: 2 / 2
style: "ha-card { height: 55px; }"
- type: "custom:button-card"
entity: light.test
gridrow: 1 / 3
gridcol: 3 / 3
style: "ha-card { height: 100%; }"
- type: "custom:button-card"
entity: light.test
gridrow: 1 / 1
gridcol: 4 / 4
style: "ha-card { height: 55px; }"
- type: "custom:button-card"
entity: light.test
gridrow: 2 / 2
gridcol: 4 / 4
style: "ha-card { height: 55px; }"
Try setting grid-gap to -2px.
Hi and thanks you for this plugin/custom_card !
Thanks you for this example.
the card has evolved and now there are variables we can use.
I have a problem with the plan apparently.
Do you know how to fix the problem?
I donāt know what to write: The entity on it or the card or the class of the mapā¦
If you can help meā¦
Thanks
Card:
type: entities
style: |
ha-card {
background: none;
box-shadow: none;
--text-divider-color: purple;
--text-divider-font-size: 14px;
--text-divider-line-size: 5px;
--text-divider-font-weight: bold;
--text-divider-margin-top: -10px;
--text-divider-margin-bottom: 0em;
--divider-color: blue;
}
entities:
- entity: timer.timer_1h_temps
- type: divider
- entity: timer.timer_1h_temps
- type: 'custom:text-divider-row'
text: test
style: |
.text-divider{
--text-divider-text: green;
}
- entity: timer.timer_1h_temps
I answer myself :
type: entities
style: |
#states > div:nth-child(5) > text-divider-row {
overflow: unset;
}
ha-card {
--text-divider-color: purple;
--text-divider-font-size: 14px;
--text-divider-line-size: 5px;
--text-divider-font-weight: bold;
--text-divider-margin-top: -10px;
--text-divider-margin-bottom: 0em;
--divider-color: blue;
}
entities:
- entity: timer.timer_1h_temps
- entity: sensor.timer_1h_temps_restant_int
- type: divider
- entity: sensor.timer_1h_temps_restant
- type: 'custom:text-divider-row'
text: test
style: |
.text-divider{
--text-divider-text: green;
}
- entity: sensor.timer_1h_temps_restant
Thank you, that seems to have done the trick!
May I ask what Iām wrong about. I would like to change the color for the card name according to the state of automation. Thank you so much for your help
- type: horizontal-stack
cards:
- type: 'custom:button-card'
name: OFF
tap_action:
action: toggle
entity: script.record.off
icon: none
styles:
card:
- font-size: 14px
- background-color: null
style: |
ha-card {
font-variant: small-caps;
height: 35px;
color: [[ if(automation.record == "on", "green", "") ]];
: var(--button-card-light-color)]];
}
Youāre using JS templating where Jinja is accepted. Iād recommend youād use button-cardās built-in styling feature, though, instead of card-mod. Read button-cardās docs.
I probably will be asking a NOOB questionā¦
But in a glance card, can I change the color for the icon when the state is āonā with this mod??
And if yesā¦ how to proceed??
Card mod is not required for that. You only need to set state_color to true. See: https://www.home-assistant.io/lovelace/glance/#state_color
Need your help, as card-mode doesnāt work for me ;(
Iāve installed HACS, then from it Iāve installed card-mod - I can see it in HACS frontend.
Next Iāve added in Lovelace Resources card-mode as JS module.
In inspector network I see that itās loaded. But when I add ātestā style there is no difference.
type: entities
style: |
ha-card {
color: red;
}
entities:
... list of entities
Am I missing something?