Removed due to wrong topic, this one is about theming. I posted to š¹ Card-mod - Add css styles to any lovelace card - #2223 by e-raser.
had forgotten all about thisā¦ and yet, I can not get it to show a color according to my sensor, like:
paper-tab[label="Alarm"] {
color: {{states('sensor.alarm_panel_icon_color')}};
}
do we need to set this under a certain header? as it is, it is all under card-mod-root-yaml: |
sorry if this is too basic to not start laughingā¦
its just that I do something like that non a markdown card, and that has the desired effect:
**<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_item')|capitalize}}</font>**
as a matter of fact, I can not even get it to turn green:
paper-tab[label="Alarm"] {
color: green;
}
while I am here, could anyone point me to some explanation on device dependent settings? case: I want my header to show at the top on mobile and title at the bottom, and vice versa on desktop.
right now I cant get anything to happen to the menubar/title at all. All I see is this:
and of all settings I tested, only this sticks
compact-header:
header-height: 48px ## cant get anything to happen here....# Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
.: |
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-color);
color: var(--text-primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black;
}
paper-tab[aria-selected=true] {
color: gold;
}
/* 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);
}
paper-tab[label="Alarm"] {
color: green;
}
hope this isnt too extravagant 
thanks for having a look!
Does just this work for you at all? Have you checked thatās what the label actually is in devtools?
card-mod-root: |
paper-tab[aria-selected="true"] {
color: var(--primary-color);
}
works fine uses in my Clear theme:
Clear:
card-mod-theme: custom-header
and settings in the mod:
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black !important;
}
paper-tab[aria-selected=true] {
color: gold !important;
}
the same mod uses
paper-tab[label="Alarm"] {
color: green !important;
}
for the Alarm tab, but doesnāt color.
this is the header of the view:
title: Alarm
icon: mdi:shield-check
path: alarm
cards:
so I guess that should be good?
I can even do:
}
paper-tab[aria-selected=true] {
color: {{states('sensor.alarm_panel_icon_color')}} !important;
and have the selected icon change color according to the template. So we know thats alright. So this leave the tab selector to be straightened out
wait!! Ive found itā¦ !
because of this
I figured I had to do it with aria-label, instead of labelā¦
paper-tab[aria-label='Alarm'] {
color: {{states('sensor.alarm_panel_icon_color')}};
}
et voila:
1 Like
now how to change the icon? can we do that too? id need something like
paper-tab[aria-label='Presence'] {
icon: {{states('sensor.presence_icon')}};
color: {{state_attr('sensor.family_home','icon_color')}};
}
scondly, I can no longer get the template to show up in the three-dots area with:
card-mod-root: |
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: "{{states('sensor.time')}} - {{states('sensor.temp_current')}}Ā°";
position: absolute;
top: 14px;
right: 0px;
}
I know this is an older bit of code, but must have read this thread for 4 times now, and cant find a new way of doing itā¦ Id simply like my view title to be displayed.
not sure if that is even possible, but at least browser mod gives us path which I guess we could unslugify and capitalize using
{{state_attr('sensor.browsermod_id','path').split('/')[1].replace('_',' ').capitalize}}
took me a while, but finally I understood how to hide several option menu items (additional to hiding the Help)ā¦ sharing because I didnt find any reference to it before:
/* Hide several option menu items. */
a.menu-link[target="_blank"] {
display: none;
}
mwc-list-item[aria-label="Edit Dashboard"] {
display: none;
}
mwc-list-item[aria-label="Unused entities"] {
display: none;
}
still cant replace the vertical-dots with a template thoughā¦ anyone please help me out there?
Hi guys,
yesterday was a sad day. I had to finally get rid of Custom Header as it made problems with the newest Update. I am used to have my Header Icons colored, see image below or GitHub - philipp089/Home-Assistant-Config: HA Config and UI
After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:
- type: "custom:mini-media-player"
artwork: cover
entity: media_player.tv_samsung_q7_series_55
name: Fernseher Wohnzimmer
style: |
ha-card {
box-shadow: 1px 1px 1px 1px var(--divider-color);
}
but i have no clue how to affect the header. Can someone point me in the right direction here?
I posted the same question here:
in case one thread might seem wrong to anybody, please let me know and i delete the doubled question.
Cheers,
Philipp
I have what I hope is a simple question. I have a view that, depending on the width of the browser, can be either 1 or 2 columns. The main set of cards is always in the first column and includes many custom button cards for mainly device control. The column is resizeable using custom:grid-layout
type: custom:grid-layout
layout:
grid-template-columns: 1% minmax(425px, 660px) 1% minmax(425px, 1200px) 1%
grid-template-rows: auto
grid-template-areas: |
"marg1 col1 marg3 col2 marg2"
mediaquery:
"(max-width: 800px)":
grid-template-columns: 100%
grid-template-areas: |
"col1"
"col2"
and I am trying to automatically resize the fonts in all cards based on the width of the column. I have created mediaqueries in my theme as follows:
card-mod-card: |
@media (orientation: portrait) {
:host {
font-size: 12px;
}
}
@media (min-width: 350px) {
:host {
font-size: 10px;
}
}
@media (min-width: 400px) {
:host {
font-size: 12px;
}
}
@media (min-width: 500px) {
:host {
font-size: 14px;
}
}
@media (min-width: 575px) {
:host {
font-size: 16px;
}
}
@media (min-width: 650px) {
:host {
font-size: 18px;
}
}
This works great on my phone, and when there is only a single column in my browser. As I widen the screen, the fonts all get progressively larger. However, when the browser screen is wide enough to start a 2nd column, it no longer works because the queries are based on the screen width and not the column width. I have not been able to figure out how to do this. I have tried several things as follows but none of them work. Hopefully, it is just a syntax issue. Any help would be greatly appreciated.
@media (min-column-width: 350px) {
:host {
font-size: 10px;
}
}
@media (min-width / column-count: 1050px) {
:host {
font-size: 10px;
}
}
@media (min-width / columns: 1050px) {
:host {
font-size: 10px;
}
}
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.