🔹 Card-mod - Add css styles to any lovelace card

[alanmilinovic (Alan)]

I can see that it is more compact when lines are removed and I like it that way as well when height is smaller.

[Ildar_Gabdullin]

This is OK; my point was about a vertical alignment.
A section w/o a divider line is still a section; in my example with 2 same entities card there is a misalignment between 2 section lines caused by a hidden “divider” element.
A possible way could be just making the divider transparent instead of removing it - this way keeps same height for a section.
Repeat, if you satisfied with your solution - it’s OK.

[4integration]

I have had a card to display alarm status (green = disarmed, red/blinking = armed) but it has stopped working. Maybe with an update.

alarm_control_panel.9000_aaa_zone_1_alarm get correct status update

Any idea what could be wrong?

type: vertical-stack
cards:
  - show_name: false
    show_icon: true
    type: button
    style: |
      ha-card {
        border-radius: 0px;
        {% if is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'disarmed') %} 
          animation: none;
          --state-alarm_control_panel-disarmed-color: green;
        {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_night') %} 
          animation: blink 1s linear infinite;
          background-color: red;
          --state-alarm_control_panel-armed_night-color: white;
        {% elif is_state('alarm_control_panel.9000_aaa_zone_1_alarm', 'armed_away') %} 
          animation: blink 1s linear infinite;
          background-color: red;
          --state-alarm_control_panel-armed_away-color: white;
        {% else %}
          none
        {% endif %}
      }
      @keyframes blink {
        50% {opacity: 0;}
        }
    tap_action:
      action: none
    entity: alarm_control_panel.9000_aaa_zone_1_alarm
    icon: mdi:shield-home
    show_state: false
    hold_action:
      action: none

[Cactus_J (Jeremy)]

How do I change the font colour of the calendar events ?

type: custom:atomic-calendar-revive
view_layout:
  grid-area: Calendar
card_mod:
  style: |
    ha-card {
    border-style: none;
    color: red;
    font-size: 20px;
    background: transparent;            
    }  
name: null
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 300
maxEventCount: 5
refreshInterval: 60
showLocation: false
showMonth: true
showHiddenText: false
entities:
  - entity: calendar.ical_home

[Ildar_Gabdullin]

@4integration

    show_icon: true
    type: button
    style: |
      ha-card {

Consider reading release notes before updating card-mod.

[LiQuid_cOOled]

I don’t have the calendar loaded, but try adding these to card mod and see if adjusts the calendar text colors

 --primary-text-color: green !important;
 --secondary-text-color: blue !important;  

type: custom:atomic-calendar-revive
view_layout:
  grid-area: Calendar
card_mod:
  style: |
    ha-card {
    border-style: none;
    color: red !important;
    font-size: 20px;
    background: transparent;  
    --primary-text-color: green !important;
    --secondary-text-color: blue !important;          
    }  
name: null
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 300
maxEventCount: 5
refreshInterval: 60
showLocation: false
showMonth: true
showHiddenText: false
entities:
  - entity: calendar.ical_home

[slim971]

Hello,

I admit that I updated without reading but I saw that there were some changes.
Now I really have difficulty reproducing the animations that you gave us at the start… Bumping, stretching, coloring icons etc…

Can you please give us one updated example of animated icon ?

Thanks for helping
best regards

[Ildar_Gabdullin]

You should first start with fixing in accordance to changes described in release note for 3.4.
Now the “style” option must be under “card_mod” keyword like here:

card_mod:
  style: ...

As for examples for animations for button-card - check in the 2st post → link at the bottom, it has examples for animations. But if your code were working before the recent changes - you should start with the fix I told above.
You have just admitted that you have not read the release note - and probably you should read it now at last.

[Cactus_J (Jeremy)]

Thanks, Ill try it.

Can you (or someone) explain the ‘!important’ at the end of lines?

Is it just so I pay attention to the change?

[Ildar_Gabdullin]

@Cactus_J

important

may be found.

CSS !important Property

[LiQuid_cOOled]

Ha…you beat me to posting the same link

[slim971]

Thanks for your repply.
Dont worry i read changelog before posting, but i was missing something.
I managed to fix it, thanks

[Ildar_Gabdullin]

Very good! So, a small mistake may cause some headache(

[Ildar_Gabdullin]

@LiQuid_cOOled

posting the same link

It’s the very 1st link when googling “important css”.
Also, this particular site is very good, as you know; I usually advise this site.

[LiQuid_cOOled]

Between a few CSS sites, your guides as well as Dimitri’s, I have learned a ton in a short time.

[4integration]

Yes, I should have read change notes…thanks for the lead and it is now working again

[Ildar_Gabdullin]

Guess it is much better to give a tiny lead & let a man to solve the issue by himself )))

[Vince1024]

Hi all,

I don’t manage to make my ha-icon rotating on a markdown card.

the card-mod works like a charm on the card (ha-card) itself but nothing works with ha-icon or ha-svg-icon even with the ‘!important’ flag.

Can someone help me ?

My code :

type: markdown
card_mod:
  style: |
    @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
    @keyframes colorize {
        0% {
          color: var(--primary-color);
        }
        50% {
          color: green;
        }
        100% {
          color: var(--primary-color);
        }
      }
    ha-card {
              color: var(--primary-color);
            }
    ha-icon {
              color: red;
              animation: rotation 10s linear infinite;
            }
    ha-svg-icon {
              color: green;
              animation: rotation 10s linear infinite;
            }
content: >-
  ## The card Title...and code

[LiQuid_cOOled]

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

Page 5054

[arganto]

And now? This link is in the first post of this topic as well and hundrets of posts are refering to this first post and this link.