šŸ”¹ Card-mod - Super-charge your themes!

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 :wink:
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 :wink:

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}} :wink:

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;
      }
    }

read 3 posts up your post ā€¦

1 Like

thanks a lot for pointing that out :stuck_out_tongue:

thanks again Marius, made my day :+1:

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 :wink:

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 :slight_smile:
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:
Schermafbeelding 2021-11-28 om 16.12.33
Schermafbeelding 2021-11-28 om 16.12.41
Schermafbeelding 2021-11-28 om 16.12.51

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 :wink: 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.

image

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.