whats strange is when its in dark-mode its fine, but light mode get borders
Hmm odd. You could remove it individually from each card with card mod.
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
yes that did the trick 
1 Like
FYI this is the closest i could get each
Code
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
- type: custom:mushroom-template-card
primary: Hello
secondary: test2
icon: mdi:home
layout: vertical
card_mod:
style: |
ha-card {
box-shadow: none !important;
padding: 10px 0px 10px 0px !important;
margin: 0px 20px 0px 20px;
}
layout:
max_cols: 8
width: 50
padding: 16px 0px 20px 0px
card_margin: '-20px'
I’m looking to have less duplication in my yaml and would appreciate help and ideally examples if you have any pointers.
I have the following code so far for an entity displaying a temperature coming from a MQTT topic subscription. There are a half-dozen such cards that I’d like to display with the same color thresholds. The only difference between the cards is the entity and name value.
Ideally I’d like to do something like build a list of entity+name combinations and loop over them to create the cards, if that’s something doable reasonably. ???
Secondary question would be ‘is there a way to make the definition shorter’ without getting crazy in obfuscated code ? The attached is to me at least readable, but I’m not sure if it’s suggested HA way to do it or not.
Any pointers etc. appreciated…
- type: custom:mushroom-entity-card
entity: sensor.ecowitttempsensor1
name: sensor1
layout: vertical
icon: mdi:thermometer
frontend: null
style: |
ha-card {
{% set x = states(config.entity) | int %}
--primary-text-color:
{% if x >= 75 %} white;
{% else %} yellow;
{% endif %}
--secondary-text-color:
{% if x >= 80 %} white;
{% else %} cyan;
{% endif %}
background:
{% if x >= 90 %} red
{% elif x >= 80 %} orange
{% elif x >= 70 %} green
{% elif x >= 50 %} cyan
{% else %} blue
{% endif %}
}
Example output from a few cards here. Don’t worry the colors etc being (un)readable. This just example output.
My Light page will be seperate from the main page. This section is for quick access to lights only.
My new light cards will look like this. (still on beta)
My light cards are still on development. I am trying to choose which one of should I use.
And also I have updated my previous room cards as well
3 Likes
3 things.
- Auto entities. to automatically populate entities into your predefined cards. Can even use card-mod on your predefined card and then load in your entities. (Likely your best bet)
- Decluttering card. to repeat code in your cards like for example your icon colors etc. If they are set through the card itself. Dont believe that this works for card-mod, but dont quote me on that.
-
Anchors. this is for your card-mod css. You can create an anchor and use it again later in the same parent card (if for example you have things in a grid or stack. Or just in your main dashboard yaml config) Example of anchoring below.
square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod: &teststyle
style: |
ha-card {
background: blue;
}
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
<<: *teststyle
Keep in mind that anchoring only really works for editing your raw yaml page. As soon as you save a card it and open it in the visual editor it will just apply the full style in text form to any card that has the anchor.
Love the shadow effect with stacking shapes. What does that use? :before :after? Or just a filter of some kind that i dont know about? Looks dope nonetheless
Thanks. It is just a simple box-shadow effect used with if statement.
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px;
When the light is “on” stacking shapes appear. When it is “off” it will display like this:
There are many examples of box shadows on the net, like this one:
You can also try “Box Shadow Generators”
1 Like
sigh - yes. Ugly behavior.
This did work, FWIW, which gets me a little closer (thanks!).
square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.ecowitttempsensor1
name: sensor1
layout: vertical
icon: mdi:thermometer
frontend: null
card_mod: &teststyle
style: |
ha-card {
{% set x = states(config.entity) | int %}
--primary-text-color:
{% if x >= 75 %} white;
{% else %} yellow;
{% endif %}
--secondary-text-color:
{% if x >= 80 %} white;
{% else %} cyan;
{% endif %}
background:
{% if x >= 90 %} red
{% elif x >= 80 %} orange
{% elif x >= 70 %} green
{% elif x >= 50 %} cyan
{% else %} blue
{% endif %}
}
- type: custom:mushroom-entity-card
entity: sensor.ecowitttempsensor2
name: sensor2
layout: vertical
icon: mdi:thermometer
frontend: null
card_mod:
<<: *teststyle
columns: 5
Happy to help! Still think auto entities is your best bet in these situations. It can create many of the same type of card but inject different entities and names into them either using a regular filter (visual editor) or via a template filter so something like the below as an example.
type: custom:auto-entities
card:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 19px;
}
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor.*battery*", ignorecase=False) and "SM" not in state.attributes.friendly_name and "Dimitri" not in state.attributes.friendly_name and 'unknown' not in state.state and 'unavailable' not in state.state and state.state | int <= 10-%}
{{
{
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' battery')[0]
}
}},
{%- endif -%}
{%- endfor %}
sort:
method: state
numeric: true
THANK YOU so much! I will definitely look into this!
1 Like
My current fan speed setup is messy, is there card/code available to have 1 icon/card with selects a certain fan speed. (I have 5 speeds based on xx % send)
1 Like
Check this out 🔹 Card-mod - Add css styles to any lovelace card - #4973 by eMeF?
You can combine that with mushroom-fan-card into single card using custom-stacked-card.
You can achieve something like this
3 Likes
Hi guys, quick question:
How can I change the icon color in a cove card please?
I am using styles to change the background color of the card but can’t figure out how to change that icon color!
thank you so much
Please post your current YAML so we can help you
I was trying this:
type: custom:mushroom-cover-card
entity: cover.voletsmaison
tap_action:
action: more-info
show_position_control: false
show_buttons_control: true
fill_container: false
layout: horizontal
name: m a i s o n
secondary_info: none
icon-color: grey
card_mod:
style: |
ha-card {
--primary-text-color: rgb(54,57,59);
--primary-icon-color: rgb(255,148,9);
}
The font color works, but the icon color doesn’t.
I am sure I am doing something wrong here!
No, nothing wrong just add this:
type: custom:mushroom-cover-card
entity: cover.voletsmaison
tap_action:
action: more-info
show_position_control: false
show_buttons_control: true
fill_container: false
layout: horizontal
name: m a i s o n
secondary_info: none
card_mod:
style: |
ha-card {
--primary-text-color: rgb(54,57,59);
--primary-icon-color: rgb(255,148,9);
}
mushroom-shape-icon {
--shape-color: rgba(255, 0, 0, 0.2) !important;
--icon-color: rgba(255, 0, 0, 1) !important;
}
of course change the color to whatever you want to use
2 Likes
thanks mate, works like a charm
May I ask another question:
Is there anyway to change the font type?