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

I have for both the mdi:fan icon

Why donā€™t you want to make a template fan?

this really is a confronting post now, and first time I feel thereā€™s a modern way of replacing the current custom-ui, which allows us to set icon_color and use templates in customize (among many other goodies)

your template resembles a customize glob/domain like I use now eg:

  customize_domain:

    fan:
      templates: &state_color
        icon_color: >
          if (state == 'on') return 'var(--primary-color)';
          return 'steelblue';

let me ask, since I am not fully confident: could we do like the above for all customizations and replace the customize from custom-ui completely?

One of the major advantages of custom-ui is the fact it is processed in the frontend browser, opposed to the jinja templates, which are processed in the backend server. I am not sure, but thought I read that these Card-mod templates are backend also? Wouldnā€™t this put a heavy load on the system the HA instance is running on (have over 2800 entities ti customize :wink: )

(given the fact many use simple Piā€™s as server, and modern and oversized specced browsers the choice seems obvious)

sorry if this sounds like a beginnerā€¦

Probably.

Only if your dashboard is super complex.

I need helpā€¦ I have a Mqtt switch and it gives the payload 0 & 1 I was trying to use card-mod to change the state that shows when the switch is pressed or not. Can someone help me here. Thanks

Please elaborate. Also, are you sure youā€™re using a theme?

yes ā€œsynthwaveā€ but I only want to change the name of the state only to that switch

Well then donā€™t ask in the theme thread.

Iā€™m using Google Chrome

@KTibow, Let me start off by saying that you have done an amazing job!! Kudos

I actually have 2 questions for you (related to the CH functionality):

  1. is it possible to have some kind of padding between the tab icons?
  2. is it possible to reverse the tabs like the old CH could do (e.g. the settings button is on the left instead of the right and the first tab starts at the right instead of the left side)?

I thank you beforehand for your kind answer

  1. Adjust the padding of each paper-tab.
  2. Apply transform: rotateY(180deg) to app-toolbar, and give the same to ha-icon if needed.
1 Like

@KTibow Thanks a lot this worked like a charm. I have one more question if I may.

I know it is possible to have different elements/config for each user by using an if statement. Would it also be possible to do this per dashboard?

E.g. it will hide the header on dashboard A but not on dashboard B?

I donā€™t think this is supported yet in Jinja.

I had this same question and couldnā€™t find the answer. Finally got it:
To replicate custom header fit_tabs

/* This makes the tabs evenly spaced across the top */
paper-tab {
    width: calc(20vw - 3.6px) !important; 
    padding: 0px !important;
}

edit: ehhhhā€¦maybe it doesnā€™t work perfectly. If anyone has tips on how to make this better it would be appreciated!

So you want to evenly space the tabs, right? Well, first of all, do you want to assume the sidebar is extended (with text), hidden (with icons), or not there? And how many tabs do you have, and what type of tabs are they? Also, do you have the 3 dots showing?

How to reset frontend cache in HA Companion app for Android? iOS has that great reset button, Android still complaining bout card canĀ“t be foundā€¦ :frowning:

Thereā€™s a clear cache / data setting in the app settings.

Where? Show me. Android, not iOS.

I have Samsungā€™s version of Android 8, so it might differ for you, but hereā€™s mine:

I did it that way already (even logged off and on) but I think thereā€™s a specific issue with a custom frontend element (layout-card):

This happens on my Android (Amazon) device only on the HA Companion app. Works perfectly on all other platforms and the browser on the Same device.