class:
has been moved to
card_mod:
class:
1 Like
Weird that it only affected mobile.
ā¦if I had a dollar for every timeā¦
Itās the wonderful world of caching.
1 Like
Except I did do a Ctrl + F5 on the desktop. Iāll double check before I start updating all my cards.
Yep, just double checked, still working fine on desktop after a Ctrl+F5 and Ctrl+Shift+R on card-mod 3.0.1.
Also replacing this:
class: top-level-card
entities:
- entity: sensor.uptime
- entity: sensor.last_boot
name: Last Boot
- entity: sensor.cert_expiry_timestamp_mydomainredacted_duckdns_org
name: Certificate Expiery
show_header_toggle: false
title: System Info
type: entities
With this:
card_mod:
class: top-level-card
entities:
- entity: sensor.uptime
- entity: sensor.last_boot
name: Last Boot
- entity: sensor.cert_expiry_timestamp_mydomainredacted_duckdns_org
name: Certificate Expiery
show_header_toggle: false
title: System Info
type: entities
Fixes the background and border on mobile but now does not display the border or background on the desktop (yes cache cleared).
With v3.0.3 this
card_mod:
class: top-level-card
Now produces no background or border on mobile or desktop. And this:
class: top-level-card
Continues to display background and border on desktop but not mobile.
With 3.0.3 i now have a blinking header.
Latest chrome on ubuntu 18.04, no issue in FF.
This is the card-mod part of my theme
# Card mod
card-mod-theme: darkorange_rk_tpad
header-height: 48px
card-mod-root-yaml: |
ha-tabs$: |
/* This hides tab scroll arrows, remove next 3 lines if you want them. */
paper-icon-button {
display: none;
}
/* This makes it so arrows are only displayed when needed. */
.not-visible {
display: none;
}
.: |
/* Let's get going! */
/* We still need this, because we need to compact edit mode. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* This hides the help button, menu button and title */
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none !important;
}
ha-menu-button {
display: none !important;
}
@media (orientation: landscape) {
ha-tabs::after {
font-size: 20px;
content: "{{ state_attr('sensor.date_time_formatted', 'friendly_name') }}, {{ states('sensor.time') }}";
text-transform: none;
white-space: pre;
}
# More Info
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(0,0,0,0.3);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#background: none !important;
#box-shadow: none;
border-radius: 1em;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: rgba(38, 49, 55, 0.8)
}
Back to 3.0.2 fixes this.
This line:
app-header, app-toolbar {
background: var(--primary-background-color) !important;
should really be
app-header-background-color: var(--primary-background-color)
and not be the concern of card-mod at allā¦
But I can reproduce the problem and have a fix ready. Look forward to 3.0.4 soon.
1 Like
I blindly copied parts of code in this topic without understanding it. 
EDIT: From the Theme cookbook.
Hello everyone after updating card-mod my graphs that I use with min graph card do not work correctly if I move the mouse over the bars of the graph the card changes size and the blinkano bars I have to stop on a bar and this defect disappears but how I move it starts again. For the sake of completeness, I would like to point out that not doing this update everything works regularly
Thatās my fault. Although if you want edit mode compact header to work, I believe this is needed.
1 Like
If this was the same problem as before, then the latest release should fix it.
Hi I tried to load 3.05 but the problem I described above only persists when I move the PC mouse on the graph, if instead I access the mobile interface with Home assistant the problem does not occur
Hi, Iām looking for a bit of help. Iāve just updated card-mod to the latest release and my theme broke. I need to bring the header to the bottom instead than the top. In the previous version it was working fine and I canāt really understand why it is now back to the top of the page. Hereās the code, any suggestion?
dark_custom:
card-mod-theme: dark_custom
header-height: 75px
bg-filter: blur(5px)
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 75px !important;
}
.: |
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: var(--primary-color) !important;
color: var(--app-header-text-color) !important;
margin-bottom: 20px
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
app-header {
top: calc(100vh - 75px) !important;
bottom: 0 !important;
transform: unset !important;
background: rgba(0,0,0,0.5); !important;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px)
}
ha-menu-button {
display: none !important;
}
paper-tabs$: |
paper-icon-button {
display: none;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.5);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 20px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
card-mod-card: |
ha-card {
backdrop-filter: var(--bg-filter);
-webkit-backdrop-filter: var(--bg-filter);
}
# Header:
background-image: url ("/local/wallpaper/19730")
app-header-background-color: var(--secondary-background-color)
app-header-text-color: rgb(229, 229, 234)
# Main Interface Colors
primary-color: rgb(10, 132, 255)
light-primary-color: var(--primary-color)
primary-background-color: rgb(0, 0, 0)
secondary-background-color: rgba(0, 0, 0, 0.5)
divider-color: rgb(44, 44, 46)
accent-color: rgb(10, 132, 255)
# Text
primary-text-color: rgb(242, 242, 247)
secondary-text-color: rgb(174, 174, 178)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgb(72, 72, 74)
# Sidebar Menu
sidebar-icon-color: rgb(199, 199, 204)
sidebar-text-color: var(--primary-text-color)
sidebar-background-color: rgb(28, 28, 30)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: rgb(10, 132, 255)
sidebar-selected-text-color: var(--sidebar-selected-icon-color))
# Buttons
paper-item-icon-color: rgb(174, 174, 178)
paper-item-icon-active-color: rgb(10, 132, 255)
# States and Badges
state-icon-color: rgb(10, 132, 255)
state-icon-active-color: rgb(174, 174, 178)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: rgb(242, 242, 247)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: rgb(10, 132, 255)
paper-slider-active-color: rgb(10, 132, 255)
paper-slider-secondary-color: var(--paper-slider-active-color)
# Labels
label-badge-background-color: rgb(28, 28, 30)
label-badge-text-color: rgb(242, 242, 247)
label-badge-red: rgb(255, 69, 58)
label-badge-green: rgb(48, 209, 88)
label-badge-blue: rgb(10, 132, 255)
label-badge-yellow: rgb(255, 214, 10)
label-badge-gray: rgb(72, 72, 74)
# Cards
card-background-color: var(--secondary-background-color)
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: "20px"
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
paper-card-backdrop-filter: blur(5px)
code-editor-background-color: var(--disabled-text-color)
# Switches
switch-checked-button-color: rgb(242, 242, 247)
switch-checked-track-color: rgb(48, 209, 88)
switch-unchecked-button-color: rgb(242, 242, 247)
switch-unchecked-track-color: rgb(99, 99, 102)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: rgb(28, 28, 30)
table-row-alternative-background-color: rgb(44, 44, 46)
data-table-background-color: rgb(0, 0, 0)
# Dropdowns
material-background-color: rgb(28, 28, 30)
material-secondary-background-color: rgb(44, 44, 46)
mdc-theme-surface: var(--secondary-background-color)
# Pre/Code
markdown-code-background-color: rgb(58, 58, 60)
Well. Iām usually the person who handles this kind of stuff; however Iāve been holding off on the 3.0 upgrade. The next time I feel like investing some time into HA, Iāll try working on this. For now, your post is going into my bookmarks with a reminder.
Anyway, we might still be able to debug this. Could you show a screenshot, first of all?
You were right of course.
Despite trying Ctrl+F5 and Cltr+Shit+R the Firefox browser inspector still showed v2 installed. Loaded in private mode and all was well with this:
card_mod:
class:
I guess Iāll have to trash my entire browser history to get rid of the cached version.
Apologies for the confusion.
In chrome F12 and right click refresh icon āempty Cache and Hard Reloadā followed by a couple of CTRL+F5
Maybe Firefox has similar?
Or in the iOS app reset frontend cache optionā¦
Bloody annoying though
Scorched earth did the job. Just logging back into my accounts as I use them now.
Over 600 instances of class: to replace. Iām 2/3rds of the way through. Cant just use bulk find/replace as they all have different levels of indentation.
As you may imagine, caching can be kind of a problem when developing this thing.
Iām getting pretty good at recognizing he signsā¦ 
Sorry about the inconvenience with moving stuff.
Iām sure you had your reasons for the change. Itās no biggie. Iām all done.
I was considering simplifying things and removing as much custom card use as I could. I made a test dashboard and after looking at it for 10 seconds decided not to go that way. I like the customisations that are possible thanks to your excellent card that isnāt a card. 