If what you’re saying is a question, I don’t speak that language. Someone else in the Soft UI community might, but you might want to try a translator: https://translate.google.com/
Sorry
Thank you
Since 0.117 and probably also due to the outphasing of Custom Header, I don’t have any header anymore at the top. In the default theme however it is present… Any others with this issue as well?
You need to use Card-Mod.
Take a look here: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook
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?