🔹 Card-mod - Super-charge your themes!

it works for me …

Using the code on it’s own without adding .: | works for me also.

I tried removing the .: | from the end in the full code and it works now and is aligned to the bottom of the page.

Thanks!

*addition that I just noticed.

When I enter Edit Dashboard mode the tabs / icons seem to disappear. If I exit Edit Dashboard they appear again

When I inspect element it seems the icons/tabs are positioned below the edit menu. Any idea how to bring them back up?

Also noticing that the button to add cards is positioned below the edit menu on the right side

I’d really like to be able to style vertical stack cards from a theme. I’ve tried a few things with limited success.

this seems to work intermittently, and I can’t work out any rhyme or reason for when it does / doesn’t

  card-mod-view-yaml: |
    grid-layout$hui-vertical-stack-card: |
      hui-vertical-stack-card {
        background-color: var(--ha-card-background);
        border-radius: var(--ha-card-border-radius);
        box-shadow: var(--ha-card-box-shadow);
      }

This is based on something I saw posted here but doesn’t work (for me) at all

card-mod-view-yaml: |
    .: |
    hui-vertical-stack-card$: |
      #root {
        background-color: var(--ha-card-background);
        border-radius: var(--ha-card-border-radius);
        box-shadow: var(--ha-card-box-shadow);
      }

Any ideas?

Hi guys!

I am running mushroom cards and theme. I love it but i have used card mod to style it further. To make active cards easier to see and for the looks.

right now i am mostly adding the same piece of code to every card i add, and it gets old. Can i achieve the same result with my theme file? I have tested a bit and i try, but my coding skills are terrible.

Here is an example screenshot and card code snippet.

card_mod:
  style: |
    ha-card {
      {% if is_state('light.living_room', 'on') %}
        background: rgba(225, 225, 225, 1);
        --primary-text-color: black;
      {%- else -%}
      {%- endif %}
    }
    ha-card {
      {% if is_state('light.living_room', 'off') %}
        background: rgba(150, 150, 150, 0.2);
        --primary-text-color: white;
      {%- else -%}
      {%- endif %}
    }
    ha-card {
      {% if is_state('light.living_room', 'unavailable') %}
        background: rgba(150, 150, 150, 0.2);
        --primary-text-color: white;
    {%- else -%}
    {%- endif %}

    }

you should be able to, but I’m afraid my brain is too fried to say how.

If you post what you’ve tried in your theme file it would help us to help you.

Note: Question moved to:
🔹 Card-mod - Add css styles to any lovelace card - #3729 by SimplyGardner

_
Hey, I am having issues with an annoying strange flash upon initial load.

I have played around with this and appears to be prioritising the initial CSS/Styles first then overlaying the updated card-mod styling which cases the weird flash behaviour.

In my config.yaml file I also put the following to see if it would prioritise the load but it has not worked.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

Anyone know what I can do to help fix this? Seems I am driving myself mad. I have added an issue here also.

Example:
Posted in incorrect place: Moved to 🔹 Card-mod - Add css styles to any lovelace card - #3729 by SimplyGardner

ezgif-1-b0d97a1b8e

Slowed down example:

ezgif-3-770374844a

This is not card-mod-them-related, is it? So I would suggest to put your question in the card-mod topic and not here.

And for the problem, I think, that you should search for transition in the css attributes and switch them off in your modding.

1 Like

Hi all,
I’m newbie of this fantastic tool. I’m struggling for days trying to center a div in the card.
Please find below the HTML code and my last test.
Any help on this will be very appreciated because this is driving me nuts. :frowning:
Many thanks in advance.
Roberto

type: custom:stack-in-card
card_mod:
  style:
    .: |
      ha-card {
        --ha-card-background: silver;
        opacity: 0.8;
        padding: 25px
      }
mode: vertical
keep:
  background: true
cards:
  - type: custom:mod-card
    card:
      type: energy-date-selection
    card_mod:
      style: |
        hui-energy-period-selector$: |
          div.period {
            justify-content: center;
          }

Same as directly above: This is not card-mod-theme-related, is it? So I would suggest to put your question in the card-mod topic and not here.

Thanks a lot

Hey all, I am new to HA and am having trouble with creating a theme with a side panel. I finally figured out how to create a new theme and move the side bar to the left using card-mod-theme. Now I am trying to change the background of the sidebar to a gray color; or change the background of a vertical stack card using this theme to a gray color. Could anyone help me with this? I am sure I’m missing something simple, but can’t seem to find it on Google anywhere. Here is what I currently have for trying to turn the background of a vertical stack a new color,

Left_sidebar_test:
  card-mod-theme: Left_sidebar_test
  card-mod-card: |
    hui-vertical-stack-card $: |
      #root {
        background-color: black;
        border-radius: var(--ha-card-border-radius);
        box-shadow: var(--ha-card-box-shadow);
      }
  card-mod-view-yaml: |
    hui-sidebar-view $: |
      .container {
        flex-direction: row-reverse;
      }
1 Like

I am trying to hide as much as I can from the new stats in more-info in version 2022.11.

Since you can click min/mean/max and show/hide the values,
could you force it to always only show mean (or state if there are no min/mean/max) ?
Like changing the default value from “show all three” to “show only mean”.

And as a separate question, could we hide the <div class="chartLegend"> to get rid of the legend?

card-mod thread → 1st post → link at the bottom → styles for statistics card

Do not think this can be controlled by CSS.
You cannot hide some graph since it is a “canvas” element.
And you cannot simulate “switched-off” legend’s element too.

Another point is that “mean graph” is NOT a “real graph” at all - it is absolutely wrong idea to show approximate data in more-info popup.
So, the right way is “show a real history graph (like it was before 2022.11)” and (optionally, and only if available) “show statistical graph” (probably with min/max/mean).

Thanks, I didn’t know about that other thread.
I really don’t understand the change to statistics in more-info but balloob made it quite clear there will be no reverting to the old state graphs and there will be no options to use states. So until someone invents a replacement for all more-info, I’ll try to make the best of it.

I suppose you mean this https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3414.

I have tried to read up on how it works, but I just don’t get it yet so I don’t know how to use the example in my scenario (within more-info). I hide a lot of other elements, but that’s thanks to you and Mariusthvdb and hours of trial and error…

Example of theme where I hide other more-info stuff: https://hatebin.com/hqqaomlwws

Once again a new HA release has changed how more-info popups show up. They for some reason changed the position yet again, while it alread was changed in september and it broke. Can someone pinpoint me what the correct code now is to center more-info dialogs?

    .: |
      ha-dialog {
        --vertial-align-dialog: center !important;
      }

Like anything else is done for more-info - like “hide logbook” etc.

Sad if it is true.

A part of a trend “make HA usable for inexperienced people” like getting rid of yaml for integrations and moving everything to UI.


A legend seems to be hidden in the future release:
изображение

Nice commit. I suggested that in beta when I realised I won’t get the states back. No response then, but someone listened. Thanks!

Is it possible to use arribute of a device to drive card background color?

I am quite happy with my theme setup right now, with active cards having a highlighted color. However, my smart ovens only shows activity through attribute.

my code:

    card-mod-card: |
      ha-card {
        background: {% if is_state(config.entity, 'on') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'home') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'open') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'heating') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% elif is_state(config.entity, 'playing') %} rgba(225, 225, 225, 1);
        --primary-text-color: black;
        {% endif %}
      }
      
        ha-card {  background: {{ 'rgba(225, 225, 225, 1)' if
        is_state_attr('config.entity', 'hvac_action',
        'heating') }}; --primary-text-color: black;

        } 


Try achieving the same result (i.e. dependingly of your oven) by using card-mod WITHOUT a theme.

That works very fine, and i could continue doing that. I just want to have most of my settings in my theme to keep it simple.