I use mushroom title card and then modify that
after having played with this some time, I suddenly realize that my 5 tabs (with icons only) on iOS app arenāt showing (only 4 in view) , and I need to scroll the tabbed header.
using:
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab-bar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color)) !important'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 20px !important;
background: var(--primary-color) !important;
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
# .: |
# tabbed-card {
# --mdc-tab-horizontal-padding: 0px;
# }
(commented section does not do anything, so I left it out for now)
and
card:
type: custom:tabbed-card
# attributes:
# minWidth: true
# isMinWidthIndicator: true
# isFadingIndicator: true
styles:
--mdc-tab-horizontal-padding: 0px;
--mdc-theme-primary: gold
--mdc-tab-color-default: var(--text-primary-color)
tabs:
I see 5 tabs on desktop,
but 4 on mobile.
Since there is no < or > , there is no visual indicator Ine can scroll at all, so a bit of an issue hereā¦
Could you please check if my mobile issue can be reproduced in your configs? And is yes, how to fix it maybe?
as a matter of fact, taking out the complete min-width: 20px !important; or setting any other px there makes no difference?
also, I had
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
set the active icon, but that no longer works eitherā¦
Iāve managed to sort it with the following code:
type: media-control
entity: media_player.kitchen_ray
card_mod:
style: |
{% if states('media_player.kitchen_ray') == "playing" %}
ha-card {
margin-left: 10px; margin-top: 10px;
margin-right: 10px;
}
:host {
z-index: 999 !important;
position: sticky !important;
position: -webkit-sticky !important;
bottom: 0 !important;
}
.card-content {
padding: 0 !important; margin: 0 !important; }
{% else %}
ha-card {
display: none !important;
:host {
display: none !important;
}
{% endif %}
Will try to check it when will have access to PC.
1 Like
I want to change the the thickness of the slider in a tile card with feature slider.
I didnāt found a way to do this.
I tried this (and many other combinations):
card_mod:
style: |
ha-control-slider {
--control-slider-thickness: 20px !important;
}
But there is no change.
In Inspector i have this:
Is there a chance to change this value?
Thanks for helping, on my mobile its very big, so the dashboard gets very high.
Could you explain why a background is defined twice?
mwc-tab-bar {
background: ...
}
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
...
}
.: |
.mdc-tab {
...
background: var(--primary-color) !important;
}
Also, that code is not correct, should be smth like:
mwc-tab:
$:
...
.: |
mwc-tab-bar {
...
}
Next, what is a purpose of this?
.material-icons {
display: contents !important;
}
In my setup (Win+Chrome) it makes huge iconsā¦
Also, in my setup this code does not affect changing an icon:
.mdc-tab--active {
--mdc-icon-size: ...
}
It happens probably because the āāmdc-icon-sizeā is not defined for the āha-iconā element level, it is defined for another place which is BELOW in hierarchy; seems that ārevealā pointer does not cause using that variable.
Same, I see different number of tabs on different clients - and I consider this as expected.
Ok this is weird.
I have this card that shows the correct style in the editor preview but not when displayed in the dashboard. What the heck?
card_mod:
class: top-level-card
style:
$: |
h1.card-header {
font-size: 20px !important;
font-weight: 300 !important;
letter-spacing: 0px !important;
padding-top: 0px !important;
padding-bottom: 28px !important;
}
If I remember correctly, the first is for the full tabbed bar itself, the second is for the individual tabs.
hmm, wonder why it worked thenā¦ will see what has happened in the c&p action maybe
tbh, I dont remember. Iāll take it out, and report the consequences. It does not make huge icons here. It must have been copied from another config. will check.
see this: š¹ Card-mod - Add css styles to any lovelace card - #4332 by Mariusthvdb
it resizes And correctly positions the active icon
niw we get to the actual issue 
sop this did change the size of the active icon. I take it, something must have changed somewhere. Probably not Tabbed-card itself. And I still am using card-mod 3.1.4, albeit with the fix to make it work in HA 2023.4.
Which makes me think, didnt that have to do with the menu tabs somehow? What if we have the same issue in tabbed-card as we had in button-cardā¦
here is another post with proof of succes for the mod I posted.
tbh, thats totally unexpected. We set the min-width, and padding 0px. which one would expect to be sufficient to show all icons, check your own mod somewhere above, with all the tiny icons only. Its really odd mobile only shows 4 while there is plenty of space to show many moreā¦
testing some more, to get the difference on the background:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 40px !important;
background: green;
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
.: |
:host {
background: yellow;
}
notice I now use the host And color on the .mdc-tab to indicate the difference between the 2
also notice that this Does bring back the icon size pin active.
Ofc, I now lost my
mwc-tab-bar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color)) !important'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
mod, have to see how I get that back in and retain the other functionality
ok, this works, though maybe (maybe?) a bit of a hack, as it sets the min width of the tabs so it wont show background of the tab-bar itself (the yellow in the above post)
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 100px !important;
background: {{'radial-gradient(var(--primary-color),var(--card-background-color)) !important'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
this way, I have the icon resized nicely and the individual tabs take the theme mod colors. Which is the reason why I moved that to the tabbed bar. I dont want this:
but this for the background
grrr
++update++
type: custom:mod-card
card_mod:
style:
tabbed-card $:
.: |
mwc-tab-bar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color)) !important'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
}
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 80px !important;
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
makes it happen!. Play a bit with the tab width.
What is more, when I use
.mdc-tab {
min-width: 60px !important;
}
all 5 tabs are shown on mobile too 
Are the card-mod and style tags in your HTML for the second? You might be running into the loading issue thatās described on the GitHub page.
I recently completely rebuilt a table that was in a markdown card, because of this. I noticed with some luck that where the page loading was a bit slower than usual, that the style would be applied, only to disappear a moment later. To my surprise, the mods were completely gone. Initially though it got stripped somehow by HA.
So, maybe do some reloads, or even try simulating a slow connection with the browserās dev tools (I didnāt try that myself, now that I think of it) and maybe you see the same effect.
EDIT: For reference, hereās the issue I logged.
Not sure what you mean by this?
Iāve been reading through the posts here trying to write a card-mod to hide a div element in a ha-panel with ādisplay: none;ā
I nailed down to using ShadowDOM for this (assuming that it will work for HA panels as well), but cannot get the mod right 
Can anyone write a short snippet for me which I can build upon?
Thanks a lot in advance.
PS. The solution mentioned here is not enough as the calendar cards does not show the event text in month-view but only as dots.
Apologies, that was pretty lazy phrasing.
I was on my phone at the time and it looked like there were 3 screenshots, but I see now the 2nd has both your card config and HTML. I wasnāt sure for which picture the HTML was.
If you expand the card-mod tags, is it populated with your CSS, and do you have more card-mod tags as you open more children (e.g. if you open the card-content div, is there a card-mod tag in it)?
Stumped, like in my own case. I canāt offer more help at this stage, but just out of curiosity, if you directly apply the CSS to one of the elements (via the dev tools), does it render then? It has the highest CSS precedence, so nothing should be able to override it.
At least at a wrong position in live-mode in your screenshot. As it shout appear inside the shadow root there as well to have any effect.
Tested it as well nad currently with same, but slightly different behavior.
type: custom:windrose-card
title: Wind direction
hours_to_show: 4
max_width: 400
refresh_interval: 300
windspeed_bar_location: bottom
windspeed_bar_full: true
wind_direction_entity: sensor.bewegungsmelder_kuche_extra_illumination
windspeed_entities:
- entity: sensor.bewegungsmelder_kuche_extra_illumination
name: ddd
wind_direction_unit: degrees
input_speed_unit: mps
output_speed_unit: bft
direction_compensation: 0
windrose_draw_north_offset: 0
cardinal_direction_letters: NESW
matching_strategy: direction-first
direction_speed_time_diff: 1
card_mod:
style:
.: |
ha-card { color: red; }
$: |
h1.card-header { color: blue; }
In adjust-mode, both styles are applied and both card-mod parts are there, outside and inside shadow root:
But in live mode, only the second is there (so the important as in you case is not there), but the second is empty as well.
Very confusing indeed. With mod-card is stays, but I have to re-add the background.
type: custom:mod-card
card_mod:
style:
windrose-card$ha-card$: |
h1.card-header { color: blue; }
windrose-card$: |
ha-card { background: var(--ha-card-background,var(--card-background-color,#fff)); }
card:
Tried with wind rose as well.
The card with the style for a header:
ā displayed as āstyledā in Editor only:
ā displayed as NOT styled otherwise:
ā and very often it is not displayed at all - even w/o card-mod:
trying that card, I cant even gt it to display anythingā¦ TypeError: undefined is not an object (evaluating 'this.directionData.forEach')
sorry for off topic. (can confirm neither .cardheader mod to work though, not even using CM 3.1.4)
hello all.
how to address elements in top menu using theming/card-mod?
Prior to latest GUI changes I was using the following code which I found somewhere in the Internet.
But right now it doesnāt do anything.
Mainly I want to remove chevrons and both menu icons, and also change padding of the menu icons
card-mod-root-yaml: |
paper-tabs$: |
.: |
/* This moves the header up. */
.header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
.header, .toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
padding: 0;
}
/* We're still going to need a way to see that we're in edit mode. */
.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. */
.-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
.toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.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. */
.header.edit-mode > div {
padding-left: 5px;
}
paper-tab {padding: 4px 4px 10px 4px}
ha-menu-button {
display: none !important;
}
ha-button-menu {
display: none !important;
}
with regards