Are you sure card-mod is installed? What version of HA are you using? Try reloading themes and the browser?
I am using card mod from here:
I have it working for changing the layout of text in various cards.
I am running HA version 0.116.4
Thank you very much for trying to help!
Can you do this:
Do you still have the problem? You can also try rebooting HA.
I have reloaded the themes inside developer tools and also restarted Home Assistant. I have reloaded the page and also restarted the browser. I’ve tried this in google chrome and on a samsung phone. The header still looks “big” as in the screen shot above.
Odd. It’s applying just fine for me. Is card-mod loaded in the browser console?
Odd. Try reinstalling card-mod with HACS.
Maybe that could be the problem. I installed card mod “manually” by downloading it. Thanks for your patience!
Can i get some help?
I have my header like this one:
I use the theme airy, from the docs on card mod. I will attach my full confirguration at the bottom of the post.
I found on this 🔹 Card-mod - Super-charge your themes!
That I need to add the following code to my theme in order to reduce the header size
card-mod-root: |
app-toolbar {
display: none;
}
So in my theme I found this lines
app-toolbar {
background: none !important;
#display: none;#Hide top bar
}
If I remove the # I got the following result:
The result is good in regards the top bar have been reduced as i like, my issue is that I do not have the 3 dots so I can enter edit mode. The 3 dots I refere to are this ones:
What do i need to add to get those 3 dots?
This is my full theme configuration (is the airy theme just cahgned the background image).
airy:
card-mod-theme: airy
primary-color: darkgreen
ha-card-background: none
ha-card-box-shadow: none
background-image: url("/local/wood1.jpg")
disabled-text-color: gray
theme-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),# modify box shadow on the bottom and opacity
0px 5px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
theme-border-radius: 10px
background-1: rgba(250, 250, 250, 0.5) #last digit changes the opasity of the background everywhere
background-2: rgba(150, 150, 150, 0.6)
bg-filter: grayscale(0.5) blur(0px)
theme-red: firebrick
theme-green: forestgreen
theme-blue: deepskyblue
paper-item-icon-active-color: var(--theme-green)
ha-label-badge-title-font-size: 1em
card-mod-view-yaml: |
"*:first-child$": |
:host {
background: none !important;
display: flex !important;
}
#badges {
padding: 8px;
display: flex !important;
justify-content: start;
flex-direction: column;
}
#columns .column > * {
margin: 32px 16px;
}
card-mod-root: |
ha-app-layout {
background: var(--background-image) !important;
background-size: cover;
}
app-header {
background: var(--background-1) !important;
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
}
app-toolbar {
background: none !important;
#display: none;#Hide top bar
}
card-mod-card: |
ha-card {
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
}
ha-card.type-entities,
ha-card.type-glance {
background: none;
backdrop-filter: none;
box-shadow: none;
}
.card-header {
text-align: center;
display: block !important;
padding: 8px;
margin-bottom: 12px;
font-variant: small-caps; #Change the font of the card header
}
.type-entities .card-header,
.type-glance .card-header {
background: var(--background-1);
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
box-shadow: var(--theme-box-shadow);
margin-bottom: 24px;
}
.card-header hui-entities-toggle {
display: none;
}
card-mod-glance: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
padding: 4px !important;
margin: 0 4px 12px;
width: calc(var(--glance-column-width, 20%) - 8px) !important;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 5s infinite linear;
{% endif %}
}
card-mod-row-yaml: |
.: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
padding-right: 8px;
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
margin: 0 -16px;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 5s infinite linear;
{% endif %}
}
card-mod-badge-yaml: |
.: |
:host {
display: inline-block;
background: var(--background-1);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
padding: 8px;
/* Make badge borders red/green for binary sensors and blue otherwise */
--label-badge-blue: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
--label-badge-red: teal;
margin-bottom: 24px;
}
# Make badges have transparent background
ha-state-label-badge $ ha-label-badge $: |
.label-badge {
background: none !important;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: var(--bg-filter);
background: {% if is_state(config.entityId, 'on') %}
rgba(0, 255, 0, 0.2);
{% elif is_state(config.entityId, 'off') %}
rgba(255,0,0,0.2);
{% else %}
rgba(0,0,255,0.2);
{% endif %}
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: rgba(250,250,250,0.7);
border-radius: var(--theme-border-radius);
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
I have checked this post 🔹 Card-mod - Super-charge your themes!
But If i paste that code at the end of my actual theme I got the following result:
So I got correct the top bar with the 3 dots, but I lost my configuration on the header (transparency) and lost my background image (get a blank one)
Thanks for any help.
Hey, I’ll help you out with this. Just give me a sec, and I’ll copy the wiki stuff and edit it in to your theme.
Here’s the compact header code: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#compact-header
airy:
card-mod-theme: airy
primary-color: darkgreen
ha-card-background: none
ha-card-box-shadow: none
background-image: url("/local/wood1.jpg")
disabled-text-color: gray
theme-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),# modify box shadow on the bottom and opacity
0px 5px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
theme-border-radius: 10px
background-1: rgba(250, 250, 250, 0.5) #last digit changes the opasity of the background everywhere
background-2: rgba(150, 150, 150, 0.6)
bg-filter: grayscale(0.5) blur(0px)
theme-red: firebrick
theme-green: forestgreen
theme-blue: deepskyblue
paper-item-icon-active-color: var(--theme-green)
ha-label-badge-title-font-size: 1em
card-mod-view-yaml: |
"*:first-child$": |
:host {
background: none !important;
display: flex !important;
}
#badges {
padding: 8px;
display: flex !important;
justify-content: start;
flex-direction: column;
}
#columns .column > * {
margin: 32px 16px;
}
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: var(--primary-background-color) !important;
color: var(--primary-text-color) !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;
}
ha-app-layout {
background: var(--background-image) !important;
background-size: cover;
}
app-header {
background: var(--background-1) !important;
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
}
app-toolbar {
background: none !important;
}
card-mod-card: |
ha-card {
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
}
ha-card.type-entities,
ha-card.type-glance {
background: none;
backdrop-filter: none;
box-shadow: none;
}
.card-header {
text-align: center;
display: block !important;
padding: 8px;
margin-bottom: 12px;
font-variant: small-caps; #Change the font of the card header
}
.type-entities .card-header,
.type-glance .card-header {
background: var(--background-1);
backdrop-filter: var(--bg-filter);
border-radius: var(--theme-border-radius);
box-shadow: var(--theme-box-shadow);
margin-bottom: 24px;
}
.card-header hui-entities-toggle {
display: none;
}
card-mod-glance: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
padding: 4px !important;
margin: 0 4px 12px;
width: calc(var(--glance-column-width, 20%) - 8px) !important;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 5s infinite linear;
{% endif %}
}
card-mod-row-yaml: |
.: |
:host {
display: block;
background: var(--background-1);
box-shadow: var(--theme-box-shadow);
padding-right: 8px;
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
margin: 0 -16px;
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
background: var(--background-2);
}
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spin2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 5s infinite linear;
{% endif %}
}
card-mod-badge-yaml: |
.: |
:host {
display: inline-block;
background: var(--background-1);
border-radius: var(--theme-border-radius);
backdrop-filter: var(--bg-filter);
box-shadow: var(--theme-box-shadow);
padding: 8px;
/* Make badge borders red/green for binary sensors and blue otherwise */
--label-badge-blue: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
--label-badge-red: teal;
margin-bottom: 24px;
}
# Make badges have transparent background
ha-state-label-badge $ ha-label-badge $: |
.label-badge {
background: none !important;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: var(--bg-filter);
background: {% if is_state(config.entityId, 'on') %}
rgba(0, 255, 0, 0.2);
{% elif is_state(config.entityId, 'off') %}
rgba(255,0,0,0.2);
{% else %}
rgba(0,0,255,0.2);
{% endif %}
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: rgba(250,250,250,0.7);
border-radius: var(--theme-border-radius);
}
ha-header-bar $: |
.mdc-top-app-bar {
background: none !important;
}
THanks, thats a fast response.
Just if you can comment what you add, so if I need to modify another theme I know what to do?
I know it is more work, but please teach me how to fish.
Thanks again.
Edited it in.
Can anyone on HA 0.117 confirm that the code to completely disable the header still works?
card-mod-root: |
app-header {
display: none;
}
I’d like to know beforehand so I know what I can expect when 117 drops 
Yeah, it still works. It’s easier to use header-height: 0 without card-mod though.
Where would that go? I tried that as a variable in theme.yaml (like other theme variables) but that doesn’t work. Or am I misunderstanding you?
That one worked like magic, I need to study it to see what you did.
THANKS A LOT.
Side question, on 0.117 we won’t need to do this with card-mod? and it will native on the ui? or how it will work?
Well, kinda. It’ll be a thick header, and I made a new version tested on 0.117 that thins it out, and works in edit mode. If you want to see my latest version, being coded by me live, download atom: atom.io, and go to this link: https://tinyurl.com/y3cjwvw7 (make sure you have teletype installed).
Great work @KTibow, I am impressed with the amount of questions you answer and the work you do.
Keep it up! 
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
Any help appreciated, as I’m not exactly a CSS wiz.
Try appling * { border-radius: 0 !Important; } on the element with the border radius.