Help required combining some card-mod code on a Tile card

Configuration Frontend
1

Help with combining card-mod codes

I’ve got a Tile card which I want to use card-mod to do three changes to;

  1. Increase the font size and spacing
  2. Increase the icon size
  3. Set a conditional background colour

With a bit of tinkering (I’m no CSS expert, or coder) I can apply all of these changes independently with the three separate blocks of code below but I cannot get them to all apply at the same time. The best I can get (thanks ChatGPT) is the icon size and the background colour, but the font size doesn’t apply.

Any help would be greatfully received! Seems like such a basic thing.

#Font size

card_mod:
  style:
    ha-tile-info:
      $: |
        .primary {
          font-size: 30px !important;
          line-height: 35px !important;
        }


#Icon size

card_mod:
  style:
    .: |
      ha-tile-icon {
        --mdc-icon-size: 40px !important;
      }

#Background colour

card_mod:
  style: |
    ha-card {
      {% if states(config.entity) in ['off', 'unavailable'] %}
        background: rgba(50,50,50,0.6);
        --card-primary-color: rgba(150,150,150,1);
        --card-secondary-color: rgba(150,150,150,1);
      {% else %}
        background: rgba(255,128,0,0.3);
      {% endif %}
    }

The code that ChatGPT (and Gemini actually) gave which works only for Icon size and background colour is;

card_mod:
  style: |
    ha-card {
      {% if states(config.entity) in ['off', 'unavailable'] %}
        background: rgba(50,50,50,0.6);
        --card-primary-color: rgba(150,150,150,1);
        --card-secondary-color: rgba(150,150,150,1);
      {% else %}
        background: rgba(255,128,0,0.3);
      {% endif %}
    }
    ha-tile-icon {
      --mdc-icon-size: 40px !important;
    }
    ha-tile-info:
      $: |
        .primary {
          font-size: 30px !important;
          line-height: 35px !important;
        }
2

Here is a proper place to ask similar questions - main card-mod thread. Better than creating 100500 new threads.
Your answer is here: that thread → 1st post → link at the bottom titled “fantastic”-> other → combining

3

I appreciate the reply, but it doesn’t help me solve the problem. The linked thread contains many replies and the only one that I found to do with combining led to someone else who was equally as perplexed as me and didn’t seem to get a resolution. The reason I posted my specific code was so that I could get some specific guidance rather than a generic approach, because I’ve already spent far too long trying all sorts of approaches to fix this with no positive result.

4

Instead of writing the long post, you could just follow the link I provided.

5

:rofl: Not sure how you got that I didn’t follow and read the linked thread, I clearly did and even said so in my long reply. I thought these forums were about helping people, not being condescending and smart.

If you don’t want to help (because clearly you didn’t read my reply), then just move on and feel free to ignore.

6

Well, wait for someone posting you a READY solution instead of folowing a provided link to the exact post with explanations.

7

I did follow the link. I said that. But what you seem to be missing is that I don’t understand what I’m reading amongst all the other chatter. I said at the start that I am not a coder, or a CSS expert. If you are then good for you. I hope you never come across an issue which you can’t resolve by yourself and require some assistance.

If anyone else has ideas about how I can combine the three bits of code posted at the start then it would be greatfully received.

8

OK, let start again.
Here is the link I suggested.
I usually post links to tutorials & examples in this way:
card-mod thread → 1st post → link at the bottom titled “fantastic”-> SOME_CHAPTER → SOME_POINT
Of course I could give exact links. But instead I give this “path”.
Reasons behind this are as follows:
– if I give you a link - you will miss a “consolidation post” containing links to other things (which can be useful for you);
– last 2-3 years I usually spend home a few days a month due to some war-related reasons & usually use a mobile phone which is not the best way to post links.
Also, suggesting tutorials is better than giving a ready solutions - educating people is better than making consumers.

To the point:
That link contains a general schema:

card_mod:
  style:
    element_1 $: |
      element_2 {...}
    .: |
      element_1 {...}

Try to apply these schema to your case, post it here, we’ll see together.