🔹 Card-mod - Super-charge your themes!

[arganto]

Hm. Where is the difference to your first try? I used the same for some months (not to hide, but for other colors). But unfortunately it works only on first tab.

[Mariusthvdb (Marius)]

@arganto

the difference to your first try

a:visited

[mkanet]

I am using the Compact header code from the cookbook for my custom theme. However, there’s an issue when I enable Edit Dashboard in Lovelace. I am not able to click on the + icon at the top/left of the screen to exit Edit Dashboard mode.

See below screenshot, I am hoping someone who knows CSS much better than me could help modify the CSS Compact Header code from the Cookbook so I can exit Dashboard mode again.

[DavidFW1960 (David)]

This is my mod for custom header. I don’t have your issue.

  # CUSTOM-HEADER MODS
  card-mod-theme: ios-dark-mode-blue-red-mod
  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
    }
  header-height: 48px 

Just tried to take a screenshot but I’m on beta and it looks like the new frontend has changed it to a done button now

[mkanet]

Thank you. That fixed the issue. However, when I enter “Edit Dashboard” mode, it wastes a lot of empty space. Do you (or anyone else) know how to make the “Edit Dashboard” header also compact?

This is what it looks like now:

[Ildar_Gabdullin]

@arganto

I think the second tab it is loaded asynchronously and then the mod is not re-applied. Something like this.

I guess so.
Here my test:

1. Create a theme:

  card-mod-more-info-yaml: |
    ha-more-info-history $: |
      .header {
        color: red;
      }
    .: |
      ha-more-info-history {
        --secondary-text-color: orange;
      }

2.Open more-info popup, switch to the 2nd tab - the color: red is not applied, the scale is orange:

3. Update the theme - run service: frontend.reload_themes.
4. Check that the header now is red:

5. Switch to the 1st tab, next back to the 2nd tab - the header is again of standard color.

[DavidFW1960 (David)]

it’s only while you are editing so what’s the problem? i don’t think you can fix that

[mkanet]

Yes, it’s only while I’m editing; which sometimes I use a lot. I thought it would be possible via card-mod since I saw CSS code referencing edit mode in the Cookbook link I posted. I just wasn’t sure what to change.

[arganto]

@Ildar_Gabdullin

I guess so.

Really a pity. If you can ever find a solution, I would be more than interested.

[Mariusthvdb (Marius)]

yes, check Fix Lovelace view edit mode "Done" button styling by spacegaier · Pull Request #11449 · home-assistant/frontend · GitHub

[Mariusthvdb (Marius)]

this may sound noobish, but with the changed icon variables I forgot/cant find which to use, so please help me out.

I want to have on/off colors for the toggle entities (binary/switch/boolean) and am not sure what to use. In custom-ui I do:

  customize_domain:

    automation:
      templates:
        <<: &state_color
          icon_color: >
            if (state === 'on') return 'var(--primary-color)';
            return 'var(--disabled-text-color)';

but I want to move that to themes

  paper-item-icon-color: var(--primary-text-color)                                                    # Icon color
  paper-item-icon-active-color: var(--primary-color) #'#F9C536'                             # Icon color active

is an option, but then all regular icon also are colored like that, and Id like to have the on/off icons stand out from regular icons.

do we have a dedicated theme variabel for on/off?

or would it be –mwc-switch-unchecked-button-color and --mwc-switch-checked-button-color? Didnt find the latter in that file, but hey that would be an estimated guess…

or, can we simply use switch-unchecked-button-color.

all a bit confusing to me. also what is mwc and mdc …?

hope you can have a look, thanks!

edit
wait, those are for the toggle, not the icon. hmm, have to look further.

[Ildar_Gabdullin]

It’s a very strange behaviour.

1. The more-info dialog is opened:
   
   The card-mod data does not contain styles for shadowRoot:
   

2. The 2nd tab is selected, then the theme is reloaded (as described here) - now the style for shadowRoot is still absent:
   
   But now we got a style inside the ha-more-info-history $:
   

So, the 1st style is stored in the card-mod element on the ha-dialog level, the 2nd style - on the ha-more-info-history $ level. It is not created on the dialog open.

[arganto]

@Ildar_Gabdullin

    .: |
      ha-more-info-history {
        --secondary-text-color: orange;
      }

Thanks for pointing me in this direction. At least I have a work-around for my case (color of text, but if @Mariusthvdb would set text to background, this should “hide” as well).

  card-mod-more-info-yaml: |
    ha-more-info-history:
      $: |
        .header > a, a:visited {
          color: var(--secondary-text-color);
          font-size: 12px;
        }
    ha-more-info-logbook:
      $: |
        .header > a, a:visited {
          color: var(--secondary-text-color);
          font-size: 12px;
        }  
    .: |
      ha-more-info-history {
        --primary-color:  var(--secondary-text-color);
      }
      ha-more-info-logbook {
        --primary-color:  var(--secondary-text-color);
      }

So first is, what I wanted, other color for the links and smaller. This is only working on 1. tab.

But as primary color is only used there for the link.color and not set before in this shadow the additional second is changing the color on tab 2 as well. So still not able to set the size or other attributes there, but color is fine now on tab 2 as well.

[Mariusthvdb (Marius)]

really sorry, but I dont follow…
what exactly are you hiding with which card_mod?

[arganto]

Hm. You wanted to hide the links here: 🔹 Card-mod - Super-charge your themes! - #1006 by Mariusthvdb. I only want another color. But then we discussed, that it is not possible to do this on second tab. And I found a way to color the link on second tab. And so, if you set link color to backrund, you should be able to “hide” there as well.

[Mariusthvdb (Marius)]

yes, I think I understood that bit

what I was wondering was if all of your code was necessary, or only some of it.

What I still dont get is why you use the a:visited . what does that refer to? Am now using:

      ha-more-info-history:
        $: |
          .header > a {
            display: {{'none' if is_state('input_boolean.hide_more_info_history_show_more','on')}};
          }

      ha-more-info-logbook:
        $: |
          .header > a {
            display: {{'none' if is_state('input_boolean.hide_more_info_logbook_show_more','on')}};
          }

and that hides (or not) the ‘Show more’ robustly.

AM I right in understanding you that adding:

    .: |
      ha-more-info-history {
        --primary-color:  var(--secondary-text-color);
      }
      ha-more-info-logbook {
        --primary-color:  var(--secondary-text-color);
      }

and then replace the var(--secondary-text-color); with the color variable for the more-info background, it should be ‘invisible’? can you show me? because I tried it and cant make it happen.

Its a bit of a problem finding a good entity, because I dont have that History tab on many entities I the first place…

btw, I also tried:

      .: |
        mwc-tab#mdc-tab-10 {
          display:  {{'none' if is_state('input_boolean.hide_more_info_history_show_more','on')}};
        }
        ha-more-info-logbook {
          display: {{'none' if is_state('input_boolean.hide_more_info_logbook_show_more','on')}};
        }

to really not display it, but that doesnt work either. Ildar, am I targeting the correct mwc-tab# path there?

i do believe those tabs are numbered along the number of them in the view, so we probably cant use that, but would need something like:

paper-tab[aria-label='History']

and

paper-tab[aria-label='Details']

…

[arganto]

@Mariusthvdb

what I was wondering was if all of your code was necessary, or only some of it.

In my case at least the size in first parts as well, because I want to change it, but this is only possibel on tab 1. for tab 2 I only added the work-arround. Of course, it would be possible to remove the color-line in first part, but this doesn’t matter and perhaps i’ll work in the future only with this, so I will remember better.

@Mariusthvdb

What I still dont get is why you use the a:visited .

Because as this was set in path as well and of course for hinding, this never has any relevance, but sometimes visited links have another color and then it would be necessary to overrule this as well. It is not a more granular think for .header and therefor without it is not more robust. It assigns CSS to is .header > a AND a:visted instead of having two assignments.

@Mariusthvdb

AM I right in understanding you that adding:

yes.

@Mariusthvdb

    .: |
      ha-more-info-history {
        --primary-color:  var(--secondary-text-color);
      }
      ha-more-info-logbook {
        --primary-color:  var(--secondary-text-color);
      }

I assign a color to --primary-color, because this one is used for the link. could be

--primary-color: red;

or your background color as well or in general

        --primary-color: var(--ha-card-background);

and then is is “hidden”:

P.S. Can you do me a favor and if you reply to a post, reply via this Reply

and not this

Then there is a better assignment and esp. an info.

[Mariusthvdb (Marius)]

@arganto

var(--ha-card-background);

well, thanks, but no matter what I try, I can only see the color of the text of ‘Show more’ change, and not the tab , nor is it disappearing for that matter.

it seems a hack too, and I dont really think we should be doing that. If there’s no real way of ‘not showing’ it, I guess we have to live with it, or file a FR in the Frontend repo, allowing us to hide those tabs.

[arganto]

I have never taked about hiding the tab, but only changing the link-color in this tab. As you have hidden (only) hidden the link in your starting post.

If you want to remove the row or secon tab, you can do this as well, but this is not refering to the problem, that you cannot style size or something else on tab 2.

  card-mod-more-info-yaml: |
    .: |
      mwc-tab-bar { display:none; }
      mwc-tab-bar mwc-tab:nth-child(2) { display:none; }

First row the hide the ow, second to only hide the second tab.

[Ildar_Gabdullin]

In short - if more-info dialog contains 2 tabs, then for the 2nd tab you may use only styles w/o entering to shadowRoot.
This works for the 2nd tab:

element {
  some style
}

This does not work for the 2nd tab:

element $: |
  element {
    some style
  }