🔹 Card-mod - Super-charge your themes!

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.

check Custom header theme · GitHub

we made it use:

white-space: nowrap;

Schermafbeelding 2021-11-30 om 08.49.51

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

image

But it is only working here, but not within the other tabs like

image

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?

image

Ask @Mariusthvdb, I helped him out with that.

@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?

Schermafbeelding 2021-12-13 om 16.33.30

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