Thanks @NdR, but I’ve got Card-Mod installed.
The strange thing is that I can see the header when the screen is loading (in a split second), but then it disappears…
Which theme are you using? Is it the soft UI theme I made? I still need to get around to updating it.
- This needs to be updated within the next hour!
- I need it updated within the next day.
- I don’t care, I can remove the card-mod part for myself, but you really shouldn’t waste a whole week on ignoring this.
0 voters
It seems that card-mod text alignment styling is broken in 0.117. There is an issue open on GitHub. If anyone has something that’s working, please share it here or GitHub 
Custom header has also been deprecated. Anything to replace the custom header is also appreciated! Thanks
Latest update solved the issue for me. Thanks!
Since upgrading to 0.117.2, I am seeing a large gap between the markdown card text that wasn’t previously there. See below
Does anyone know how to fix this gap? Here is the styling:
- cards:
- content: |
# Other Area
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
margin-top: 15px;
color: {% if states('sensor.other_area_lights_on') | float > 0 %} gold {% endif %};
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
- content: >
There {% if is_state('sensor.other_area_lights_on', '0') %} are
currently no lights on {% elif
is_state('sensor.other_area_lights_on', '1') %} is currently
{{states('sensor.other_area_lights_on')}} light on {% else %}
are currently {{states('sensor.other_area_lights_on')}} lights
on {%
endif %}
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
color: {% if states('sensor.other_area_lights_on') | float > 0 %} gold {% endif %};
}
ha-markdown:
$: |
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
FYI: I came across this issue myself as well and created a ticket at HA Frontend: https://github.com/home-assistant/frontend/issues/7578#issuecomment-720539351
I came across this issue myself with my own UI. Saw your thread here and the ticket on Github after that. Figured I’d share this with you, so you can stay up to date.
1 Like
Thank you! I’ll keep an eye on it
Same problem here!
I have the same problem. Does anyone have a solution for this “issue”?
Try asking over on the card-mod forum.
Hopefully someone knows a viable workaround, because it doesn’t look like the changes will be reverted 
!important variable is not a viable solution in this case btw.
I just use a h1 (#) and a h2 (##) in the same markdown card so you don’t have the issue of the gap between the cards:
content: >
# Lights
{% set lights = states |
selectattr('entity_id','in',['light.big_lamp','light.small_lamp','light.tv_lamp','light.backlight'])|selectattr('state','eq','on')
| list | count %} ## There {% if lights == 0 %}are currently no lights{% elif
lights == 1 %}is 1 light{% else %}are {{ lights }} lights{% endif %} on
style:
.: |
ha-card {
--paper-card-background-color: none;
box-shadow: none;
margin-top: 15px;
}
ha-markdown:
$: |
ha-markdown-element {
letter-spacing: 0;
}
h1 {
font-size: 20px !important;
margin-bottom:5px;
}
h2 {
font-size: 15px !important;
margin-top:0;
opacity: 1;
}
type: markdown
2 Likes
I’ve been testing updating my UI to use the new lovelace Grid card in 0.118 - particularly for the smaller button groups. These have been fixed width up until now, which looked fine on my Android, but my partner’s iPhone cuts off the last icon.
The advantage is that you can adjust how many buttons you have per row, and any extra wrap below quite nicely. Had to use card-mod to set the width as CSS as % width within the button card didn’t work for me. I adjusted the width/height to 90% as this gave a nice gap between each for the shadows, and 6 buttons per row with these settings gives the closest match to the current styling
type: grid
columns: 6
cards:
- entity: input_boolean.night_mode
icon: >-
[[[ if (entity.state == "off") return "mdi:sleep-off"; else return
"mdi:sleep" ]]]
show_icon: true
show_name: false
state:
- styles:
card:
- box-shadow: |
[[[if (states['input_boolean.dark_mode'].state == 'off')
return "inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03)";
return "inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3)";
]]]
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
styles:
card:
- padding: 0px
- background: none
- height: 90%
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: heavy
type: 'custom:button-card'
style:
.: |
ha-card {
width:90% !important;
}
- entity: // more buttons here
3 Likes
Can you have a template in both h1 and h2? So two separate lines but each with a template markdown?
And what if you have 7 lines of template markdown? Like this:
How could I recreate this with markdown with the new stylings?
Or a markdown header above a mini-media-player card so it’s near the top of the card, like this:
Edit: I think for the first problem I can use h1, h2 etc till h6 (so 6 lines). Which would not be enough for my setup. I’ll experiment and see what I can do. Though I really hope I can just delete the stylesheet someway… Thanks for the tip in any case!
2 Likes
You can use IDs for that maybe, use #id to target an ID
Can you elaborate this or point me somewhere to read up about this?
type: markdown
content: |
<h1 id="part1">thing</h1>
style: |
#part1 {
color: red;
}
Of course I haven’t bothered using shadow-roots in this example, you’ll need to add them.
1 Like
Hi I wanted to know if there is the possibility of being able to change the color of an icon based on a certain value reached. For example, I would like the temperature icon green if the temperature is between 20 and 25 degrees, orange if the temperature is between 25 and 30 degrees and red if it is greater than 30 degrees. How can you create a condition within a card?
Using card-mod. Try asking over in that thread.
Hello and thanks for the suggestion I’m studying above, I wanted to tell you something strange despite having followed your guides on how to install “layout-card-griddier” I keep getting the message "Custom element doesn’t exist: layout-card-griddier . " if I use “layout-card” everything works. Can you help me? Thanks