Card-mod or mushroom issue

[the-buzz-man]

I have an issue with either card-mod or mushroom, I believe. On my main computer browser and HA app on android, the dashboard looks correct. But on any other browser on other computers, it seems to not be formatting correctly. The image below with the red fonts is correct. The other is what I see on other browsers. Not sure what is causing this or where I should start investigating.

Appreciate any ideas you could point me to.

the_buzz_man

[the-buzz-man]

Still trying to figure this out. It works fine on Chrome on my main computer only. Edge on my main computer doesn’t format correctly or any browser on any other computer. I’ve tried clearing cache and history on the others, but doesn’t change. Any ideas on what to look for?

[couch67]

The only thing I can think of is to check the theme that is being used on the other instances, and confirm its the same as the one you use on your main pc.

[d_sellers1 (Derek)]

Can you post some code to show what you’re working with? Pictures don’t show how you set things up.

[LiQuid_cOOled]

You need to upgrade Mushroom to 3.4.1. It fixed that issue that 3.4.0 created earlier this week.

[the-buzz-man]

Here is the code for the time card:

type: custom:mushroom-entity-card
entity: sensor.time
name: ’ ’
icon_type: none
card_mod:
style: |
ha-card {
align-items: center;
–secondary-text-color: red;
–card-secondary-font-size: 100px
}

I did run the update yesterday or the day before, whenever it popped up. I am now running 3.4.1 and it did not make a change. Also, I am not using any themes.

[LiQuid_cOOled]

This will work.

Please post code using the back tick going forward.

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

Post #11

type: custom:mushroom-entity-card
entity: sensor.basement_sensor
name: test
icon_type: none
card_mod:
 style: |
    ha-card {
      --card-primary-color: lime !important;
      --card-secondary-color: orange !important;
      --card-secondary-font-size: 100px !important;
      --card-secondary-line-height:  100px !important;
         } 

[the-buzz-man]

Sorry about the code not looking right, I was in a rush when I posted that. What you posted seems to work right now, so I definitely appreciate that. Can you advise what the purpose of using “!important” in the code is? I noticed it works with or without it, but I am sure this is a reasoning for using it.

Posting the current code below to make sure I know how to post it properly:

type: custom:mushroom-entity-card
entity: sensor.time
name: ' '
icon_type: none
card_mod:
  style: |
    ha-card {
      align-items: center;
      --card-primary-color: white !important;
      --card-secondary-color: red !important;
      --card-secondary-font-size: 100px !important;
      --card-secondary-line-height: 100px !important;
    }

[LiQuid_cOOled]

The !important rule in CSS is used to add more importance to a property/value than normal and will override previous styling rules for that specific property on that element!

For what we are doing, !important should override most themes unless the theme itself has everything set to !important. It’s not necessary on all mods, but if a mod isn’t working you should try it to ensure the JS is truly being overridden.