🔹 Card-mod - Super-charge your themes!

KTibow · October 19, 2020, 3:25pm

I think you mean removed, not centered.

Pirol62 · October 19, 2020, 3:34pm

No, I definately mean centered.
Another axample:
The art_nouveau theme makes this:

the airy one (now modified):

it seems, that pictures in the art_nouveau format are aligned left and not centered

KTibow · October 19, 2020, 3:35pm

They’re just example themes, not actually meant for you to use them.

Pirol62 · October 19, 2020, 3:36pm

I know that, no problem at all.
But is there a css element, which not only styles the backgound but centers the picture of a background?

By the way: I’ve learned a lot with these themes.
And that was the goal, wasn’t it

D34DC3N73R · October 20, 2020, 3:05am

https://www.w3schools.com/cssref/css3_pr_background.asp

Pirol62 · October 20, 2020, 5:49am

Thanks, that helped to solve the problem:

ha-state-label-badge $ ha-label-badge $: |
      .label-badge {
         background-position: center !important;
         background-repeat: no-repeat !important;
         background-size: cover !important;
      }

MantasI · October 20, 2020, 4:03pm

Whitespace at the bottom when adding ?kiosk to end of my url. Actually, even without adding, just when installing kiosk-mode.
The whitespace is uneven. Sidebar bg is css code, main container bg is an image.

Any help is much appreciated.

clemalex · October 20, 2020, 4:25pm

Is there the possibility of hiding the menu entirely at the top and the possibility of opening the menu on the left?
I built my theme in order to have only one view and the navigation is done by buttons.

The kiosk solution is not suitable because it can be easily deactivated in my opinion (remove kiok characters).

So I want to know, if we can hide all the menu: at the top (the buttons) and prevent the opening of the left menu?

Thank you for your help.

PS: I just noticed that without CH, browsing on android mobile is much faster than before … At least one good thing … the only one.

Sorry but understandable that CH stops.

KTibow · October 20, 2020, 4:32pm

You should be using a kiosk app if

atomicpapa · October 20, 2020, 4:37pm

Try Fully Kiosk Browser

Steven_Rollason · October 20, 2020, 5:20pm

I wanted to be able to use card-mod to enable a compact header without needing to change my existing theme. Since the card-mod-theme variable is basically a CSS variable, I hacked this together:

gist.github.com

https://gist.github.com/gadgetchnnel/c8dfcb117ad3850a043865b7e708154c

compact-header-enabler.js

class CompactHeaderEnabler {
	enableCompactHeader(compactHeaderTheme = "compact-header"){
		let root = document.querySelector("html");
		root.style.setProperty("--card-mod-theme", compactHeaderTheme);
		
		setTimeout(() => {
			let theme = JSON.parse(localStorage.getItem("selectedTheme"))["theme"];
			this.fireEvent("settheme",theme, document.querySelector("home-assistant"));
		},1000);
	}

This file has been truncated. show original

compact-header.yaml

compact-header:
  card-mod-theme: compact-header
  card-mod-root-yaml: |
    ha-app-layout$: |
        /* This corrects top padding for the view. */
        #contentContainer {
          padding-top: 48px !important;
        }

    paper-tabs$: |

This file has been truncated. show original

You simply need to:

Add the compact-header.yaml as a theme (you don’t need to actually select it as your theme)
Add compact-header-enabler.js to your www folder and include it in your Lovelace resources.

You can also use this with any other theme you want to use as a card-mod theme, simply change the header.enableCompactHeader(); in compact-header-enabler.js with header.enableCompactHeader("name of your card-mod theme");

Edit: The script fires a settheme event passing the currently selected theme to force the page to rebuild.
This may only work if you are using browser-mod (otherwise you will need to navigate to another dashboard and back) and may possibly cause weird effects (I’ve not had any problems myself so far).

KTibow · October 20, 2020, 8:14pm

Wrong place, kiosk JS isn’t related to card-mod.

Mariusthvdb · October 21, 2020, 7:26am

would this card-mod for custom header also allow for customized icons depending on states of entities?

before Lovelace, we could customize the group icon of the page we were on, with CH add-on, we could simply use:

tab_icons:
  developer: >-
    {{states('sensor.developer_icon')}}

but now we seem to be back to a single icon for each view?

secondly, I’d love to be able to color those icons in a same way:

tabs_color:
  developer: >-
    {{'red' if is_state('binary_sensor.github_repo_has_update','on')}}

please help me find out if this is possible, it would so enhance the visual feedback of the current header.

mikesweden · October 21, 2020, 9:12am

I’m sorry similar questions have been asked. I’ve been trying to make the header more compact but can’t get it working. I even tried using the “google light theme” but it doesnt change my header:

Google Light Theme:
  # Header:
  app-header-background-color: "#F8F8F8"
  app-header-text-color: "#424242"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#F8F8F8"
  secondary-background-color: var(--primary-background-color)
  divider-color: var(--primary-background-color)
  # More stuff here that I cut out
  card-mod-theme: "Google Light Theme"
  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      }
      */
      /*More stuff I cut out*/

I’ve reloaded the themes and I have choosen the theme in the editor. I previously used custom header but I don’t keep it in my current dashboard-yaml.

Here is my dashboard:

views:
  - panel: true
    theme: Google Light Theme
    title: Home
    background: '#272E38'
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: vertical-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: glance
                    entities:
                      - entity: sensor.nextsunrise
                      - entity: sensor.nextsunset
                    show_name: false
                    show_state: true
                    state_color: false
  - title: Scenes
    path: scenes
    theme: Google Light Theme
    badges: []
    background: '#272E38'
    cards:
      - type: entities
        entities:
          - entity: group.light
        title: Turn off

KTibow · October 21, 2020, 1:36pm

That’s just an example, as you can clearly see:

It’s a general example of how you can merge a theme. Replace all of this:

mikesweden:

Google Light Theme:
  # Header:
  app-header-background-color: "#F8F8F8"
  app-header-text-color: "#424242"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#F8F8F8"
  secondary-background-color: var(--primary-background-color)
  divider-color: var(--primary-background-color)
  # More stuff here that I cut out

With your theme.
Replace this with your theme name:

And then get the full compact header code over at Theme cookbook · thomasloven/lovelace-card-mod Wiki · GitHub

KTibow · October 21, 2020, 1:48pm

Yeah! You can do that! Try adding something like

paper-tab[label="My Tab Title"] {
  color: red;
}

To the end of the compact header code.

KTibow · October 21, 2020, 1:52pm

By the way, looks like we might be going compact in 0.117!

Of course, I think you still might need card-mod for additional modding.

Mariusthvdb · October 21, 2020, 2:04pm

ok, thanks, cool.
Is this for individual tabs? or a generic tab mod.
And, did you have a look at the icon question? can we change that according to states (like:

      value_template: &icon
        >
          {% set presence = states('sensor.family_home') %}
          {% set mapper = {'0':'mdi:account-off',
                           '1':'mdi:account',
                           '2':'mdi:account-multiple',
                           '3':'mdi:account-multiple-check'} %}
          {{mapper[presence] if presence in mapper else 'mdi:account-group'}}

?

KTibow · October 21, 2020, 2:07pm

You can select all paper-tabs including the selected one if you remove the bracket stuff at the end, but right now you change the name to the tab you want to style. And Jinja is supported, here’s an example:

  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
          animation: spin 4s infinite linear;
        {% endif %}
      }

Mariusthvdb · October 21, 2020, 2:13pm

thanks! will start experimenting on the test instance

I fear though this is going to be such a complex card-mod, it would be better if a dedicated add-on would take up on this… why o why did CH have to go…

taking in to account we dont have the internal variables anymore, unless card-mod gives us these too? So we can show the tab-name (View name) in the header. And can template based on those variables.

Maybe we should all see what 117 brings us, and continue from there.