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

[LiQuid_cOOled (Not really a...)]

With what? I cannot find a previous post in this thread by you.

This thread?

Custom:bar-card

hi there, I have a sensor contains few attributes: [sensor] I want to display the progress bar and the label with color of my senor ‘Couleur’ attribut it’s ok with the CSS for Label but i don’t know how proceed for the bar progress’s color. [Progress bar] Anyone have any idea? Thanks My code type: custom:bar-card entities: - entity: sensor.qualite_globale_saint_paer icon: mdi:alert-circle height: 30px min: 0 max: 8 positions: indicator: "none" icon: "n…

[LiQuid_cOOled (Not really a...)]

I’d drop the type: custom:mod-card if possible

type: custom:mushroom-title-card
title: "{{ now().strftime('%I') }}:{{ now().strftime('%M %p') | lower }}"
subtitle: >-
  {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{ now().strftime('%d')
  }}
card_mod:
  style: |
    ha-card {
      --title-padding: 12px 12px 3px;
      --title-spacing: 100px;
      --title-font-size: 34px !important;
      --subtitle-font-size: 25px !important;
    }

Just a heads up…Mushroom threads are here and here

[pmgsrosa (Pedro Rosa)]

@LiQuid_cOOled

ha-tile-icon $: |
      div.container {
      background: lightblue;
      height: 65px ;
      width: 65px;
      border-radius: 100%;
        }

Yep, that works. Thank you very much
Were you able to find that in develop tools?

[LiQuid_cOOled (Not really a...)]

I simply used Chrome’s DevTools via inspect

[cedricdelecole]

Hello @Ildar_Gabdullin and others,

I am trying to change the Heading card font size (In fact type and type, like bold, …) but no success.
I want to make to bigger, any idea what I am doing wrong here ?

To be honest card_mod is always difficult for me, with so many possibilities (To my view) :

      - type: grid
        cards:
          - type: heading
            heading: Tondeuse Worx
            heading_style: title
            card_mod:
              style: |
                ha-card {
                  font-size: medium;
                }
          - type: picture
            image: /api/image/serve/ed8305eea1730ec6decc142bed1d819d/512x512
            card_mod:
              style: |
                ha-card {
                  background: transparent;
                  border: 0px;
                }

Why is this not working ? I want to lake the text bigger, possibly in bold, and maybe use a different font

Many thanks !

[LiQuid_cOOled (Not really a...)]

This will work

            card_mod:
              style: |
                .content {
                  font-size: 20px !important;
                }

or

            card_mod:
              style: |
                .content {
                  font-size: medium !important;
                }

[cedricdelecole]

Many Thanks … so in this case .content and not ha-card …

I have found the way to put the font weight, but Text alignment to center is not working … :

      - type: grid
        cards:
          - type: heading
            heading: Tondeuse Worx
            heading_style: title



            card_mod:
              style: |
                .content {
                  font-size: 30px !important;
                  font-weight: bold !important;  # Make the text bold
                  text-align: center !important;  # Center align the text
                }

[LiQuid_cOOled (Not really a...)]

Use a margin setting margin-left: 100px !important;

[cedricdelecole]

@LiQuid_cOOled

margin-left: 100px !important;

mmm no …
I have also tried to apply it to the HA-card but also no luck

[cedricdelecole]

oh wait … this code is fine :

      - type: grid
        cards:
          - type: heading
            heading: Tondeuse Worx
            heading_style: title
            card_mod:
              style: |
                .content {
                  font-size: 30px !important;
                  font-weight: bold !important;  # Make the text bold
                  margin-left: 200px !important;
                }
                ha-card {
                  margin-left: 120px !important;
                }
          - type: picture
            image: /api/image/serve/ed8305eea1730ec6decc142bed1d819d/512x512
            card_mod:
              style: |
                ha-card {
                  background: transparent;
                  border: 0px;
                }

Many Thanks !!!

[LiQuid_cOOled (Not really a...)]

I tested it before I posted my response.

[FLaKas (Jorge)]

Found my problem:

frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
themes: !include_dir_merge_named themes

If i remove “themes: !include_dir_merge_named themes” from my configuration.yaml card-mod works, but my theme its ruined, Can anyone point out the next steps?

[LiQuid_cOOled (Not really a...)]

Have you reviewed this thread?

Card-mod - Super-charge your themes!

Nice! I like it much more than CSS variables hack. Though being able to use classes directly is much-much more cleaner. And it seems I nailed it after all ! Took slightly different approach than initially planned - now I’m looping through styles dictionary separately to find any starting with “…”. For any key/value found: Delete them from styles variable If parent (or host) contains all styles from key - just merge value into styles, otherwise - discard value So, basically,…

[sTaNy]

Hi folks,

is there any way to use card-mod with the TrashCard? I would like to rotate the icons one day before garbage collection.

event_grouping: true
drop_todayevents_from: "10:00:00"
next_days: 30
pattern:
  - icon: mdi:flower
    color: brown
    type: organic
    pattern: Biomüll
  - icon: mdi:newspaper
    color: blue
    type: paper
    pattern: Altpapier
  - icon: mdi:recycle-variant
    color: amber
    type: recycle
    pattern: Sack/Tonne gelb
  - icon: mdi:trash-can-outline
    color: grey
    type: waste
    pattern: Restmüll
  - icon: mdi:dump-truck
    color: purple
    type: others
  - label: Weihnachtsbaum
    icon: mdi:pine-tree
    color: green
    type: custom
    pattern: Weihnachtsbaum
day_style: counter
day_style_format: yyyy.MM.dd
card_style: icon
alignment_style: center
color_mode: icon
items_per_row: 1
refresh_rate: 60
with_label: true
layout: default
type: custom:trash-card
entities:
  - calendar.abfallkalender_cityname
icon_size: 54
fill_container: true

Tried different options together with chatGPT without any success.

Happy to get some help on this!
Thanks sTaNy

[Mariusthvdb (Marius)]

@sTaNy

with chatGPT without any success.

well, in that case it cant be done…

I mean didnt you see the hundreds of posts in this community not to use ChatGPT to get you working configs?

your chances would get better if you explain what you’d like a bit better, and, if related to the dom of the specific card, show the traversal of that in inspector.

@sTaNy

rotate the icons one day before garbage collection.

means what? a conditional updating of the card base on the pickup date if some sensor? then give us that sensor, and show what

@sTaNy

Tried different options

was.

if its related to the

@sTaNy

drop_todayevents_from: "10:00:00"
next_days: 30

settings, i am afraid card_mod cant help you out. Maybe a config-template-card could, because you’d really need to conditionally template the card config itself.

[LiQuid_cOOled (Not really a...)]

Card Mod will work with this card, but @Mariusthvdb makes sound points.

To dynamically change the icon, it will require an sensor/entity to monitor the calendar.

An Example

event_grouping: true
drop_todayevents_from: "10:00:00"
next_days: 30
pattern:
  - icon: mdi:dump-truck
    color: yellow
    type: others
day_style: counter
card_style: icon
alignment_style: center
color_mode: icon
items_per_row: 1
refresh_rate: 60
with_label: true
type: custom:trash-card
entities:
  - calendar.abfallkalender_cityname
icon_size: 54
fill_container: true
card_mod:
  style: |
     .icon-container {
       transform:{{ 'rotate(60deg)' if as_timestamp(state_attr('calendar.abfallkalender_cityname', 'start_time')) | timestamp_custom('%Y-%m-%d') == as_timestamp(now()) | timestamp_custom('%Y-%m-%d') else 'rotate(0deg)' }};
        }
         
     .badge {
        background-color: dodgerblue;
        color: white;
        font-weight: 700;
        width: 50px;
      }

[Mariusthvdb (Marius)]

tbh, I had no idea rotate the icon meant actually rotating the icon…

I figured he meant changing places with the other icons, like based on the date or something like that.

the transform part is easy

[Faecon (Jo)]

                    type: custom:layout-card
                    layout_type: custom:vertical-layout
                    layout:
                      width: 800
                    cards:
                      - type: iframe
                        url: https://192.168.129.24:8095
                        card_mod:
                          style: |
                            ha-card {
                              position: relative;
                              left: -150px;
                              width: 800px;
                              min-height: 605px !important;
                              border-radius: 8px;
                              box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                            }

I want my layout card more to the left, and wider. But what I’ve written is not ok. Can someone help me ?
And if I want the card moved a little higher ?

[sTaNy]

Thanks you @LiQuid_cOOled for the general feedback that there seems to be a solution.
In the first step, I tried to use ChatGPT to get the icons in the TrashCard to rotate without any conditions, in order to better understand card-mod and to familiarize myself with the DOM challenges and learn how to do it. Unfortunately, I wasn’t successful due to my lack of CSS and YAML experience.
For example, I used the following code:

card_mod:
  style: |
    ha-card {
      .icon-container {
        transform: rotate(60deg);
      }
      .badge {
        background-color: dodgerblue;
        color: white;
        font-weight: 700;
        width: 50px;
      }
    }

I expected to get the icons rotate at any time but it doesn’t. Unfortunately, nothing rotates with the code from @LiQuid_cOOled either, although I reversed the condition for testing purposes so that the icon always rotates like this:

event_grouping: true
drop_todayevents_from: "10:00:00"
next_days: 30
pattern:
  - icon: mdi:flower
    color: brown
    type: organic
    pattern: Biomüll
  - icon: mdi:newspaper
    color: blue
    type: paper
    pattern: Altpapier
  - icon: mdi:recycle-variant
    color: amber
    type: recycle
    pattern: Sack/Tonne gelb
  - icon: mdi:trash-can-outline
    color: grey
    type: waste
    pattern: Restmüll
  - icon: mdi:dump-truck
    color: purple
    type: others
  - label: Weihnachtsbaum
    icon: mdi:pine-tree
    color: green
    type: custom
    pattern: Weihnachtsbaum
day_style: counter
card_style: icon
alignment_style: center
color_mode: icon
items_per_row: 1
refresh_rate: 60
with_label: true
type: custom:trash-card
entities:
  - calendar.abfallkalender_mannheim
fill_container: true
icon_size: 70
card_mod:
  style: |
    ha-card {
     .icon-container {
       transform:{{ 'rotate(0deg)' if as_timestamp(state_attr('calendar.abfallkalender_mannheim', 'start_time')) | timestamp_custom('%Y-%m-%d') == as_timestamp(now()) | timestamp_custom('%Y-%m-%d') else 'rotate(60deg)' }};
        }
         
     .badge {
        background-color: dodgerblue;
        color: white;
        font-weight: 700;
        width: 50px;
      }

What kind of information can I provide to find the reason why card-mod seems to be not working in this case or together with my TrashCard?
card-mod in general seems to work because I tried to test it with a custom card, with a simple test to get an icon blinking:

type: custom:button-card
icon: mdi:flower
name: Rotierendes Icon
show_icon: true
card_mod:
  style: |
    ha-card {
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

@LiQuid_cOOled What exactly do you mean by a sensor/entity? The entity calendar.abfallkalender_mannheim exists and already displays the correct data with my TrashCard?
I created the calendar entity for the city using the Waste Collection Integration (calendar.abfallkalender_mannheim)

Many thanks in advance for your help!
sTaNy

[LiQuid_cOOled (Not really a...)]

The truck doesn’t rotate with this code?

event_grouping: true
drop_todayevents_from: "10:00:00"
next_days: 30
pattern:
  - icon: mdi:dump-truck
    color: yellow
    type: others
day_style: counter
card_style: icon
alignment_style: center
color_mode: icon
items_per_row: 1
refresh_rate: 60
with_label: true
type: custom:trash-card
entities:
  - calendar.abfallkalender_cityname
icon_size: 54
fill_container: true
card_mod:
  style: |
     .icon-container {
         transform: rotate(60deg);
        }