thanks a lot for pointing that out 
thanks again Marius, made my day 
Even more flexible then the old CH-way because of the integration in themes.yaml.
Google - Dark:
### Card Mod ###
card-mod-theme: Google - Dark
card-mod-root: |
paper-tab[aria-label='Licht'] {
color: #F4B400;
}
paper-tab[aria-label='Media'] {
color: #0F9D58;
}
etc. etc.
1 Like
help me back find a way we did the icon for the tabsā¦
just as color, Id love to change icons based on state for the tabs
tab_icons:
settings_motion: >-
{%- if states('binary_sensor.motion_sensors_all') == 'on' -%}mdi:motion-sensor
{%- else -%}mdi:motion-sensor-off
{%- endif -%}
to give but a legacy CH example. If havent found a way to touch the tab icons yet in the theme card-mod options
I did stuff like this with the following code, but not sure if that works for the tabs
switch: |
[[[
if(entity.state == 'on') return `<ha-icon
icon="mdi:toggle-switch"
style="width: 60%; height: 50px; color: #4285f4;">
</ha-icon>` ;
else
return `<ha-icon
icon="mdi:toggle-switch-off"
style="width: 60%; height: 50px; color: var(--text-primary-color);">
</ha-icon>` ;
]]]
no, that wont work I fear.
personally I dont use those domain settings in card-mod-theme, because it only changes that in the frontend, and eg not in more-info or logbook unfortunately.
need either backend logic, core HA frontend logic, or, ofc, custom-ui 
having said that, I can not imagine we shouldnāt be able to change those tab icons using card-mod-theme somehow. Just havent found it yet. I hope.
Custom Header was truly unique and I miss it on a daily base.
Iām now using card mod, but if i use this, i still sometimes see a black bar above, and then when i refresh page, the bar is goneā¦ how can i fix this? thnx in advance , appreciated
card-mod-root: |
app-header {
display: none;
}
card-mod-view: |
#view {
min-height: 100vh !important;
}
@KTibow , seems you helped me before with the code above a long time ago 
seems issue is back, you have any idea?
Hi,
I have just noticed I have the same issue. Did you find out how to get it to work again?
I use very similar code to you (probably copied from the same place).
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 19px;
height: 20px;
width: 50px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.local_time') }}";
position: absolute;
top: 14px;
right: 0px;
}
Is this a 2021.11.x issue as I have just updated to latest HA version?
Thanks
Hi all,
Both latest versions generate a loop of errors in browser console.
I found the below error in browser console:
card-mod.js:1 Uncaught (in promise) TypeError: this._requestUpdate is not a function
at HTMLElement.set (card-mod.js:1)
at styles.ts:365
at Array.forEach (<anonymous>)
at HTMLElement.value (styles.ts:365)
at HTMLElement.value (home-assistant.ts:66)
at HTMLElement._$AE (styles.ts:365)
at HTMLElement.performUpdate (styles.ts:365)
at HTMLElement.scheduleUpdate (styles.ts:365)
at HTMLElement._$EC (styles.ts:365)
Is it just me? Iām using all latest versions of addon and Home assistant.
I tried downgrading and the issue is gone.
Hi, seems iām seeing now background on my markdown cards, before there was none
cardmod version: 3.1.1
added below to the yaml, seems that helps for chrome browsers
but i still see the background on the HA android companion app?
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
what am i missing here?
been experimenting in the background with @KTibow on the motion menu settings, and have made some serious progress:
card-mod-root-yaml: |
.: |
ha-button-menu {
color: {% if is_state('input_boolean.menu_options_template','on')%}transparent /*var(--primary-color)*/
{% endif %};
}
ha-button-menu::before {
content: "{% if is_state('input_boolean.menu_options_template','on') %} {{states('sensor.temp_current')}}Ā° - {{state_attr('sensor.browsermod_id_safari','path').split('/')[-1].replace('_',' ').capitalize()}} {% endif %}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
top: 24px;
}
/* Uncomment this for header on the bottom. You're 3/3 there.
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
*/
etcetcetc
will now allow and create:
trick is to set the 3 dots color to transparent, and set a separate color And visible to the (template) text.
As you can see it even works based on a boolean, so we can change the layout in the frontend, via the frontend ofc, that can be anything.
hereās my full theme card mod
Only thing left to do is find a word-wrap setting, soon it doesnt wrap, but shows all on 1 line.
Maybe someone here knows how to do that?
cheers
1 Like
Hi,
Thanks for this, I would not have got there without you and @KTibowās input. You have saved me a lot of time.
This is what my relevant area of my header now looks like after your help.
And here is my theme yaml to achieve it
test:
card-mod-theme: test
header-height: 48px
card-mod-root-yaml: |
.: |
ha-menu-button {
display: none !important;
}
ha-button-menu {
color: transparent;
}
ha-button-menu::before {
content: "{{states('sensor.local_time')}} - {{states('sensor.local_date')}}";
color: var(--text-primary-color);
visibility: visible;
position: absolute;
font-size: 18px;
width: 250px;
top: 15px;
right: 0px;
}
I got it NOT to wrap by setting the width and making the position absolute, both were cribbed from the card mod themes wiki (and the original code we all used). Lots of trail and error as I donāt know what I am doing really.
Thanks again for getting me back to where I was a few weeks ago.
Good to know - will use that.
Thanks
EDIT: It works a treat! many thanks.
Figured it out in themes
card-mod-theme: noctis-grey
card-mod-more-info-yaml: |
ha-more-info-history:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
ha-more-info-logbook:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
Not that agressive anymore
But it is only working here, but not within the other tabs like
Any hint? I asked this already in card-mod-thread, but hopefully, here are esp. the card-mod-themes experienced user, who can help.
aware this is an old post, but couldnāt find another one remotely close to being effectiveā¦
Id like to hide the chevrons (on Mobile). Dont want to hide the app-toolbar completely though, which is what this does.
considering I do this also:
/* Set the toolbar background. */
app-header, app-toolbar {
background: var(--primary-color);
color: var(--text-primary-color);
}
can I still hide the chevrons somehow? using only:
/* Hide chevrons */
paper-tabs$: |
.not-visible {
display: none;
}
doesnt do anything as far as I can see
Hi Kendell,
I was wondering if I could ask you again for some advice, the code I was using to replace the three dots menu with a clock (which is also listed in the theme cookbook as an example) was working well until I updated to 2021.11. Then it turned back into 3 dots.
I have checked and it doesnāt appear the element names have changed. I also read the recent notes in the thread which provided some ideas how to get it working again, but they didnāt work for me. Here is the code that worked until 2021.11:
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 20px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 8px;
right: 0px;
}
Here are some things I tried to replace it.
Iāve been able to get the three dots to disappear with this:
ha-button-menu {
color: transparent;
}
but none of the following were able to make the clock reappear:
ha-button-menu::before {
font-size: 20px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 8px;
right: 0px;
}
or
ha-button-menu::before {
content: "{{ states('sensor.time') }}";
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
or
ha-button-menu::after {
font-size: 20px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 8px;
right: 0px;
}
Iāve also tried ajusting top and right a bit, but still nothing. Any ideas?
Hi all,
Does anyone have an idea how to add a border on cards in the integration page?
@scstraus have a look here: Custom header theme Ā· GitHub
working nicely.
next challenge is still open, hide the chevrons in that same header theme. This doesnt work:
/* Hide chevrons */
paper-tabs$: |
.not-visible {
display: none;
}
and somehow I should get at the iron-icon?
Hey guys, can anyone help me with card background styling? I am trying to remove the background but as soon as the card updates the background comes back. Any ideas?
I am using auto-entities and card-mod is loaded as a module in config.
Here is my card :
card:
show_header_toggle: false
type: entities
style: |
ha-card {
background: none ;
--ha-card-box-shadow: none;
}
filter:
exclude:
- state: /standby|off|idle|closed|False|clear|unavailable|paused|locked|away/
- entity_id: light.*strip
- entity_id: binary_sensor.monitor*
- entity_id: switch.power*
- entity_id: switch.server*
- entity_id: switch.*alarm
include:
- entity_id: group.lights*
options:
type: custom:fold-entity-row
group_config:
toggle: true
type: custom:slider-entity-row
- domain: light
options:
secondary_info: brightness
toggle: true
type: custom:slider-entity-row
- domain: lock
- domain: fan
- domain: switch
- domain: cover
type: custom:auto-entities
sort:
method: none