Apply padding-bottom: 50px; to app-header.
I tried, but the only thing that changed is that if i scroll the page down the header scrolls down as well a few pixels. No differences regarding the header dimension unfortunately
margin-bottom? Try applying to app-header, app-toolbar, and ha-tabs.
What happens if you put
* { color: red; }? Can it even apply? What if you donāt use the shadow root selector and apply directly with the*with.:?
Sorry, I donāt understand what this has to do with blurring the background. Did you mean to reply to a different person? If you were telling me how to add blur, can you please post an example?
Ok, the margin-bottom worked for the tabs, which are now in the position i want them! Thanks! The background of the header hasnāt changed size though, leaving me with the discrepancy seen in the attached picture!
1 Like
Wait, undo what I previously said, and wherever it says 48px in your theme file change it to 96px.
Hi,
Since about 5 days, in chrome, background image have stopped showing. It still works in Firefox fine. Is there anybody else experiencing this? Any idea?
Update: not sure this was the ābest wayā but adding the top lines to the code below solved it.
kiosk-snow:
###Added the lines here to make it work.
# The BG image wasn't showing anymore in Chrome in the "ha-app-layout" below
card-mod-theme: kiosk-snow
# Background image
lovelace-background: 'center / cover no-repeat url("/local/kiosktheme/snow.png") fixed'
## End of added lines
# Header
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
/*Uncomment this if you want the header on the bottom
#selectionBar {
bottom: unset !important;
}
*/
ha-app-layout$: |
/* This corrects top padding for the view. */
#contentContainer {
/* Change this to 0px if you want the header on the bottom */
padding-top: 48px !important;
}
ha-button-menu$mwc-menu$mwc-menu-surface$: |
.mdc-menu-surface {
margin: 10px;
box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
}
.: |
/* This hides the unused portion of the header. */
app-toolbar {
height: 0;
}
/* This forces background-color and text-color. */
.edit-mode, app-header, app-toolbar {
background-color: rgba(0,0,0,0.5) !important;
color: #FFFFFF !important;
}
ha-app-layout {
background: url("/local/kiosktheme/snow.png");
background-color: rgba(0,0,0,0.5)
}
app-header {
background: rgba(0,0,0,0.5) !important;
}
app-toolbar {
background: none !important;
}
/* Uncomment this if you want the header on the bottom
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
hui-masonry-view {
padding-bottom: 60px !important;
}
*/
/* This gives the header in edit mode a different look from the standard header. */
app-header.edit-mode {
border-bottom: 2px var(--primary-color) solid;
padding-bottom: 10px;
}
/* Make the color of the plus white instead of black. */
#add-view ha-svg-icon {
color: #EEE !important;
}
/* Bring voice button back down */
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
top: 0;
right: calc(48px * 1);
z-index: 2;
position: absolute;
}
/* Bring help button back in */
a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
right: calc(48px * 2);
position: absolute;
z-index: 2;
}
/* Bring close button back in */
mwc-icon-button[title="Close"] {
top: 0;
left: 0;
position: absolute;
z-index: 2;
}
/* Bring add view button back in */
mwc-icon-button#add-view {
position: fixed;
right: 48px;
}
/* Bring edit UI overflow menu back in */
ha-button-menu {
top: 0;
right: 0;
z-index: 2;
position: absolute;
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
/* Hide the title */
app-toolbar > [main-title] {
display: none;
}
/* Hide buttons that are taking up space, but invisible */
menu-button[style="visibility: hidden;"] {
display: none;
}
/* Bring sidebar button back in */
ha-menu-button {
z-index: 2;
top: 24px;
}
/* Set margin on left to be smaller,
and set the bar color to be the primary color
instead of white */
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 48px !important;
}
/* When not in edit mode, shrink the left margin */
app-toolbar:not(.edit-mode) > div > paper-tabs {
margin-left: 6px !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
paper-tab[aria-selected="true"] {
color: var(--primary-color) !important;
}
/* Styles for mobile */
@media (orientation: portrait) {
/* Hide sidebar button and keep room for the overflow menu button */
paper-tabs {
margin-left: 5px !important;
margin-right: 48px !important;
}
/* Hide voice button */
mwc-icon-button[label="Start conversation"] {
display: none !important;
}
/* Hide sidebar button */
ha-menu-button {
display: none !important;
}
}
/* Make help button have contrast */
app-toolbar a {
color: var(--primary-text-color) !important;
}
# Badges and columns
card-mod-view-yaml: |
hui-masonry-view$: |
/*Uncomment this if you want the header on the bottom
mwc-fab[title="Add Card"] {
bottom: 96px !important;
}
*/
This doesnāt work:
style: |
ha-card {
box-shadow: none;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
orange
{% elif is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% else %}
grey
{% endif %} ;
It doesnāt like the {% elif %}
I finally got what I wanted with:
style: |
ha-card {
box-shadow: none;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
orange
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
grey
{% endif %} ;
Is there a way to accomplish the same with a single background line??
What does it show in the template editor in devtools?
I was curious whether the styling had the ability to apply at all.
This shows the desired string in template editor:
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
orange
{% elif is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% else %}
grey
{% endif %}
Yes, this works in my cards:
style: |
ha-card {
box-shadow: none;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
orange
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
grey
{% endif %} ;
Does it work without elif, but with else?
Hmm. Did not try that. Maybe this?
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
orange
{% else % }
{% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% else %}
grey
{% endif %}
{% endif %}
Will give it a whirl. BTW, the styling was NOT working. I still had other coding inside the button-card that was sort of working and I managed to fine-tune to work. Still, if I can get card-mod to work thereās a little more styling Iād like to do.
trying my first CH replacement now for the overflow option, Id like to see this back happening:
content: "{{time}} - <div style='display:inline-block; height:32px; width:32px; vertical-align:middle;'><ha-icon icon='{{states('sensor.weather_icon')}}';></ha-icon></div> - {{states('sensor.temp_current')}}Ā°";
to have it show like:
but so far I am out of luck. would this in any way be possible?
this seems to work:
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: "{{states('sensor.time')}} - {{states('sensor.temp_current')}}Ā°";
position: absolute;
top: 14px;
right: 0px;
}
but the icon is still out of my css /html knowledge, returning:
thanks for having a look
HTML isnāt supported in CSS, and it shouldnāt. CSS is for styling, HTML is for layout. You could try using a special ligature font.
not sure how that would work? you mean trying to replace a weather icon with a ligature font somehow? seems not possible, since I simply want to show an mdi icon in the header, following this template:
weather_icon_backend:
value_template: >
{% set mapper_icon =
{'partly-cloudy-night':'night-partly-cloudy'} %}
{% set mapper_br =
{'pouring':'pouring',
'lightning-rainy':'lightning-rainy',
'snowy-rainy':'snowy-rainy'} %}
{% set mapper_ds =
{'clear-night':'night',
'partlycloudy':'partly-cloudy'} %}
{% set icon = states('sensor.dark_sky_icon') %}
{% set buienradar = states('weather.buienradar') %}
{% set dark = states('weather.dark_sky') %}
{% set weather = mapper_icon[icon] if icon in mapper_icon else
mapper_br[buienradar] if buienradar in mapper_br else
mapper_ds[dark] if dark in mapper_ds else
dark if dark in
['sunny','rainy','snowy','snowy-rainy','windy','fog','cloudy','hail','lightning']
else 'sunny-alert' %}
mdi:weather-{{weather}}
guess will have to do without that beautiful CH feature, yet again.
This might help:
Youāll have to settle on having the weather icon on the left or right side, not in the middle, and donāt try your fancy CSS inline styling.
that would be no problem at allā¦
yeah, I thought as much, so already tried that, but since that was with the template sensor in place, had no luck yet.
not sure I grasp the direction the link you posted sends me, so I need some study time hereā¦
Go download this:
https://github.com/google/material-design-icons/blob/96206ade0e8325ac4c4ce9d49dc4ef85241689e1/font/MaterialIcons-Regular.ttf?raw=true
Then see this:
Then test out this theme file:
slate:
card-mod-theme: slate
card-mod-root-yaml: |
.: |
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: "oldhere";
position: absolute !important;
top: 14px;
right: 0px;
}
mwc-icon-button[slot="trigger"]::before {
content: "done";
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 25px;
position: absolute !important;
top: 14px;
right: 0px;
font-family: Material Icons;
}
Increase the last margin-right if you need to.