🔹 Card-mod - Super-charge your themes!

[Duke_box]

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.

[Mariusthvdb (Marius)]

check Custom header theme · GitHub

we made it use:

white-space: nowrap;

[Duke_box]

Good to know - will use that.

Thanks

EDIT: It works a treat! many thanks.

[arganto]

@arganto

Is there any way to style such dialogs as well? E.g. the more-info-parts like

Or to ingest css which has priority over every other stuff?

e.g. the new show more links. I would like to have them in secondery color instead of primary. Currently it is style this way

.header > a, a:visited {
    color: var(--primary-color);
}

But I’m not able to find a point, where and how to change styles in such pop-ups.

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.

[Mariusthvdb (Marius)]

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

[scstraus]

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?

[EarlGrey]

Hi all,

Does anyone have an idea how to add a border on cards in the integration page?

[KTibow (Kendell R)]

Ask @Mariusthvdb, I helped him out with that.

[Mariusthvdb (Marius)]

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

[skynet01 (Alex)]

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

[arganto]

@skynet01

with card background styling

I would suggest to use the other cord mod thread. This one is more related to theme modding.

[skynet01 (Alex)]

Sowwwyy didn’t see there was another thread on this. Moved it, thanks for pointing it out

[scstraus]

Hi Marius, @KTibow

Actually all the examples I posted were based on my attempts to implement the method shown in your custom header theme, but unfortunately they all failed to bring back my clock. Though your clear method did get rid of the dots. It may just be positioning as last time I had to use after rather than before, but I couldn’t find any combination that worked.

Do you have any other ideas?

[Mariusthvdb (Marius)]

sorry for the late response, I am struggling myself with these options, but maybe look here: homekit-infused/Default.yaml at a188b344fe16e468f1ca2df8b7dec48d8ce05e1c · jimz011/homekit-infused · GitHub Jim does it slightly different.

for me, I am tryin git get the selected background color, using:

        /* Set the background of the currently selected tab .*/
        paper-tab[aria-selected=true] {
          background-color: rgba(99,107,117,0.5);
        }

or

background-color: rgba(var(--primary),0.5);

ofc have the primary se in my main theme as primary: 99,107,117 so we can use it in a rgba(). However, this doesnt work (does nothing).

If I use a color name, it works fine, but then I can not use the opacity it needs. Also it overwrites the

        /* Set the color of the currently selected tab indicator. */
        ha-tabs {
          --paper-tabs-selection-bar-color: black !important;
        }

so we can no longer see that.

Any thoughts on optimizing that?

[Mariusthvdb (Marius)]

now that Ildar helped me out on adding a camera view as background of a card with

        ha-card {
          background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
          /*color: black;*/
          background-repeat: no-repeat;
          background-size: 100%;
        }

I was wondering if card-mod-theme could do the same for a View. according to Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub we can set things for
card-mod-view, and maybe use the same? Ofc I did give it a try, but not sure of the syntax for that wasnt successful just yet.

Update

  card-mod-view: |
    hui-masonry-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

actually makes happen!

as does:

  card-mod-view: |
    hui-masonry-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
      background-repeat: no-repeat;
      background-size: 100%;
    }

but you’d need a better stream than the 1 I test right now, showing a bit pixelated…

have to figure out the view-name for the custom:layout views… because right now I can only get it to work for the masonry-view, and not for vertical-view or horizontal-view created by that custom component.

  card-mod-view: |
    hui-masonry-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

    hui-horizontal-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

    hui-vertical-view {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

update2
found that:

    horizontal-layout {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

    vertical-layout {
      background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
    }

make it happen on the other views, probably also for grid-view, but I dont use that,so cant say for sure Doesnt work for Grid layout

trying to find a way to set a camera view on a single view, I found out that:

        paper-tab[aria-label='Weer & Klimaat'] {
          color: {{states('sensor.temperature_color_name')}};
          background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
        }

sets it to the tab in the menu bar. Pretty useless, but nice to know

this works too:

    {% if state_attr('sensor.browsermod_safari','path') == '/ui-overview/weer_klimaat' %}
      hui-masonry-view {
        background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
      }
    {% endif %}

but isnt yet what I am looking for

[aroe0546]

I need a little help I made a theme and 1 thing I can’t figure out.

Switches

switch-checked-button-color: rgb(138, 180, 248)
switch-checked-track-color: rgb(138, 180, 248)
switch-unchecked-button-color: rgb(172, 176, 185)
switch-unchecked-track-color: rgb(154, 160, 166)

These are my chosen colors for the switches but when I look at my theme the colors are displayed darker than chosen color.

Now I found out that home assistant applies a transparency and this makes my switch color darker.
how do i change this i already tried a few things with the card mod from hacs but i can’t figure it out i hope someone can help me.!!

1 = darker color
2 = the real choosen color
3 = the opacity makes color darker
Naamloos-2|690x388

[Ildar_Gabdullin]

This is the 1st my post here, can anyone give me a magical kick into the card-mod-themes?
Made a 1st try with this.
I got a themes file:

Custom Theme:
  ...........

  modes:
    light:
      ....
      secondary-text-color: rgb(166,166,166)
      ...

    dark:
      ...
      secondary-text-color: rgb(99,99,99)
      ...
      card-mod-view: |
        #columns .column > * {
          margin: 32px 16px;
        }

I am expecting larger margins (that was an example from Thomas).
And I see nothing(((
Dark theme is applied, variables are used.
What am I doing wrong?

Just added this:

      card-mod-theme: "Custom Theme"

does not help.

[arganto]

@Ildar_Gabdullin

What am I doing wrong?

Did you start smaler (without dark, liht, …)?

  card-mod-theme: noctis-grey

  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        #columns .column > * {
          margin: 32px 16px;
        }

is working here and might be a starting point.

[Mariusthvdb (Marius)]

just to be sure, begin with sluggifying your names:

custom-header:

  card-mod-theme: custom-header

and call that in you main theme.
Id start with a single mod, to see if anything is happening at all, as Arganto says above. Must admit several of the mods listed on the Githubs cookbook dont works for me either. Couldn’t get the

# https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#classes
#  card-mod-row-yaml: |
#      ...
#      :host(.teal) {
#        background: teal;
#      }
#      :host(.purple) {
#        background: purple;
#      }

section to work as example for that.

Hop over to my Custom header theme · GitHub gist to see what I could get working.

[KTibow (Kendell R)]

It could be card-mod doesn’t support seperate dark theming. Try putting that into the main theme, and setting the margin as a normal HA variable.