Huh. Iād recommend next downloading the ttf and woff2 files and hosting them yourself, and then updating fonts.css to use them and remove everything else.
Hi, did you happen to have an idea about this?
Create a simple theme:
no-height:
card-mod-theme: no-height
card-mod-card: |
ha-card.type-markdown{
height:0;
}
Will this ignore the new stylesheet introduced with HA 117? Sorry me asking, but I just want to know for sure before updating and having to revert back. !important wonāt work properly, thatās why I ask.
I dunno, didnāt test it at all.
hi guys,
I might of posted this in the wrong place after spotting this,
could someone please help me with the below, Iāve searched this thread but I canāt seem to get anything to do what Iām wanting.
Wrong one, not related to themes except if you want to globally apply the styling (in that case look at the wiki), but this should do:
style: |
ha-card.type-glance > h1.card-header {
padding-bottom: 0;
}
Hi, thank you for the assistance. Iāve added this yet nothing has changed. Iāve also checked the wiki and canāt see anything
Iām only look to change these two cards
HI Kendell,
sorry for my wait, this one got buriedā¦
the ttf and woff2 files, which are those? I did earlier dl the .css files, but know of no ttf and woff2 files (nor what the latter is, but Ill google that 
)
next, hosting means saving them in the www folder?
how do I update the fonts.css to see them then, and removing the rest means deletingā¦ what?
maybe best to turn it around: please tell me what to dl and where to load, so I can leave out what I did before.
thanksā¦
The CSS file has links to stuff that ends in ttf and woff2 inside of it.
So with the new Beta v1.0.0 the background image no longer continues behind the header. I have the header transparent and it was working before updating. Anyone else on the Beta and seeing this?
Can you share config?
FWIW this is still working in 1.0.0b0 for me
# CUSTOM-HEADER MODS
card-mod-theme: ios-dark-mode-blue-red-mod
card-mod-root-yaml: |
.: |
.edit-mode, app-header, app-toolbar {
background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
}
header-height: 48px
Iāve got an entities card with an image in the header. Iām trying to figure out the selector for the img. I can get to the header itself. Below, the red border shows up.
type: entities
style: |
ha-card div.header-footer.header {
border: 1px solid red;
height: 150px;
object-fit: cover;
}
entities:
- switch.garage
header:
type: picture
image: /local/snapshots/camera.malin_garage.jpg
The next element below is the hui-picture-header-footer, then the img element.
I canāt seem to figure out how to select the img element.
None of these work.
ha-card div.header-footer.header hui-picture-header-footer img
ha-card div.header-footer.header > img
Any ideas on how to select the img in a header?
Wrong one, try the non-theme one. Maybe @thomasloven should edit this in, given how many people do that?
Sorry for the late replyā¦ Here it is and thank you
kibibit-dark-cards:
card-mod-theme: kibibit-dark-cards
header-height: 48px
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
{% if user != 'kiosk' %}
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 18px;
height: 20px;
width: 100px;
margin-left: 0px;
color: orange
margin-right: 0px;
content: "{{ states('sensor.time') }} - {{ states('sensor.multi_sensor') }}Ā° ";
position: absolute;
top: 14px;
right: 0px;
}
{% endif %}
# Global
app-header-background-color: 'rgba(0, 0, 0, 0.0)'
app-header-text-color: 'rgba(255, 184, 5, 1)'
#background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
#lovelace-background: var(--background-image)
primary-color: "#209cee"
light-primary-color: "#B6B6C1"
primary-background-color: "#212121"
secondary-background-color: rgba(25, 25, 25, 0.7)
divider-color: var(--primary-background-color)
accent-color: rgba(255, 159, 9, 1)
# Fonts
primary-font-family: 'Comfortaa'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
# Text
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: "#8f0303"
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: "#7a0c02" # or make light icons yellow when active: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: 'rgba(0, 0, 0, 0.3)'
paper-card-background-color: var(--ha-card-background)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.6)
paper-item-icon-color: "#7a0c02"
more-info-header-background: rgba(25, 25, 25, 0.5)
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
I donāt even see a part in your theme where you set the background. Can you point it out?
Thatās the thing Iāve never had a background set for the header always just had it transparent, Unfortunately something has changed in the last update but I have gone with DavidFW1960,s suggestion although not a transparent header it looks like it so will have to suffice 
.
Thanks for the help though guys. Cheers
1 Like
What has changed in the last update of HA 2020.12.0?
The header bar was transparent, but changed color after the update.
I donāt know how to return a transparent color. Everything else works well.
card-mod-theme: "yourname"
# Header
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 48px !important;
}
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: #D2691E !important;
color: #696969 !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: #FF8C00 !important;
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
app-header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
/* This adds the time */
ha-button-menu::before {
font-size: 18px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.aktualni_den') }}";
position: absolute;
top: 16px;
right: 48px;
}
Okay, okay, everything changed. Iāll try to do some troubleshooting once I have some time.