Editing Mushroom Theme

Configuration Frontend
1

Hi,

I am very new to HA and have gotten so far as to getting Mushroom and Mushroom Theme.
I wanted to modify the cards a bit and tried doing as the Mushroom information page said, but I can’t get the changes to work.
I have tried editing the mushroom.yaml file, but nothing I do makes the cards change. I have tried refreshing, restarting HA and still nothing.
The thing I wanted to edit was the radius on the corners of the cards so I edited this:

Card

mush-icon-border-radius: 50%
mush-control-border-radius: 12px

Saved it and refreshed. Is this wrong?
I’ll take all the help I can get.

Sorry for the noobish question right off the bat.

2

Hello,

Ask me this question here. In this topic is the creator of the mushroom card and template.
Mushroom Topic!

3

Welcome to the community Reidar!

Have you added


frontend:
  themes: !include_dir_merge_named themes

to your configuration.yaml ?

You can reload themes after editing in Developer Tools → Services: frontend.reload_themes

4

Yes, I have added this to the config yaml.
I also tried reloading themes after changing the mushroom.yaml file. Nothing changes in my cards on my dashboard.

5

Just to be sure: You’ve selected the Mushroom Theme in your dashboard view settings?

Please show us your theme file.

6

I have selected the Mushroom theme in my user settings, yes.
And my Mushroom theme file looks like this now.
Am I wrong to change the border-radius under Cards to make them rounder?

mushroom
mushroom483×997 143 KB

7

I wasn’t sure, but now I see: These are all available variables for the controls:


    # Control
    mush-control-border-radius: 12px
    mush-control-height: 42px
    mush-control-button-ratio: 1
    mush-control-icon-size: 0.5em

Changing the card itself you are already using


    # HA variables
    ha-card-border-radius: 12px
8

I have tried changing both “mush-control-border-radius” and “ha-card-border-radius”. None of them do what I am looking for, making the cards rounder.
Sorry if I am misunderstanding, but is this wrong? Should not making this number bigger make them rounder?
I have reloaded themes from Developer Tools each time also.

9

Had you restarted HA after adding

frontend:
  themes: !include_dir_merge_named themes

to your configuration.yaml?

10

Yes, I have restarted it multiple times. I can try again.
But to be sure, which of the lines should I edit to make my cards rounder? The two I mentioned?

11 
 # HA variables
    ha-card-border-radius: 12px
12

I felt like I tried this before.
This time I edited that one and reloaded themes and it worked. Finally!
Thanks a lot!

13

Glad to hear!

14

Hi @pedolsky .
How can I modify the square theme?
Following the above posts I have modified successfully the colors of the mushroom theme, but it seems the same rules are not working on the mushroom square theme…

15

The only difference is a different value for ha-card-border-radius.