Hi @Frosty
Thanks for the assist, worked perfecty. I had seen the | and .: | characters used but I was not sure what their purpose was and how to use them, could you explain? then I can learn for the future.
Ad.
no problem glad it worked for you.
if you goto post 1 by @dimitri.landerloos and scroll to the bottom you’ll see
What the $ and .: | symbols do
that should explain. I cant use developer tools in a browser myself so it goes abit over my head. I do have a rough idea of how there used if you need further help there’s always someone willing to help.
1 Like
Dimitri,
Aligning text in a chip seems to work with text-align: <start|center|end> under ha-card:
ha-card {
background-color:
{% if states(config.entity) == 'on' %}
rgba(var(--rgb-green),0.2) !important;
{% else %}
rgba(var(--rgb-grey),0.2) !important;
{% endif %}
box-shadow: none !important;
margin-left: 5px;
margin-top: -60px;
padding: 5px;
text-align: end;
width: 100px !important;
--chip-icon-size: 30px;
--chip-font-weight: none;
--chip-font-size: 12px !important;
}
@Dan010 Can you provide a chip card example with this working?
Below is an example of what you are describing, but the text does not adjust to the end.
You can adjust the chip text alignment via this method
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.pc_lights
content_info: name
name: CENTER
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
span {
width: 100px !important;
color: red !important;
text-align: center !important;
}
Hi ! I’ve the same problem than Abhi for the mushroom-person and the “photos-icon” size.
Have you got the solution plz ?
Just a heads up, It’s recommended to limit tagging folks. See #16
Dimitri may reach out and I’ll take a look as well.
Can you post your card code?
I added text-align on the level of the custom:mushroom-chips-card
And below the definition:
type: vertical-stack
cards:
- type: thermostat
entity: climate.incomfort_1
show_current_as_primary: true
name: ' Thermostaat Woonkamer'
theme: Mushroom
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
margin-top: -350px !important;
text-align: end;
box-shadow: none !important;
--chip-icon-size: 30px;
--chip-font-weight: none;
--chip-font-size: 12px !important;
}
alignment: justify
chips:
- type: template
icon_color: |
{% if states(entity) == 'on' %}
green
{% else %}
grey
{% endif %}
entity: input_boolean.eco_temperatuur
content: Eco 15°C
icon: mdi:leaf
card_mod:
style: |
ha-card {
background-color:
{% if states(config.entity) == 'on' %}
rgba(var(--rgb-green),0.2) !important;
{% else %}
rgba(var(--rgb-grey),0.2) !important;
{% endif %}
margin-left: 5px;
padding: 5px;
width: 100px !important;
}
- type: template
icon_color: |
{% if states(entity) == 'on' %}
orange
{% else %}
grey
{% endif %}
entity: input_boolean.comfort_temperatuur
content: Comfort 18°C
icon: mdi:thermometer-check
card_mod:
style: |
ha-card {
background-color:
{% if states(config.entity) == 'on' %}
rgba(var(--rgb-orange),0.2) !important;
{% else %}
rgba(var(--rgb-grey),0.2) !important;
{% endif %}
margin-right: 5px;
padding: 5px;
width: 100px !important;
}
2 Likes
Apologies, didn’t mean to offend anyone. Still relatively new to HA and this was my first forum post.
No not at all, it’s another approach. I just can’t get it to work with certain scenarios. I appreciate the example!
The break in the content: initiates a second line when the width of the span is taken up and the card width is limited to 100px. If the content: is consecutive it will not adjust based off text-align: end
content: Eco15°C
content: Eco 15°C
1 Like
Hello,
how to move the remaining time section to the left?
Or the
move the time bar and remaining time section to the left?
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.paraelszivo_zuhanyzo_switch_0
name: Páraelszívó
icon_animation: true
fill_container: false
collapsible_controls: true
tap_action:
action: toggle
layout: horizontal
primary_info: null
secondary_info: none
card_mod:
style: |
ha-card {
border: none;
}
ha-state-icon {
color: dodgerblue;
--icon-symbol-size: 40px;
}
- type: custom:timer-bar-card
entity: fan.paraelszivo_zuhanyzo_switch_0
layout: full_row
duration:
fixed: '00:15:00'
text_width: 60px
invert: true
bar_direction: rtl
bar_width: 60%
tap_action:
action: toggle
do you mean… move the bar and time, left so it’s closer to the fan card
or move the time on the bar to the left side of the bar (flip it’s direction)
Move the bar and time to the left a few px. Don’t be on edge.
I would suggest a layout card using a grid
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 40% 60%
cards:
- type: custom:mushroom-fan-card
1 Like
Hi all, I’m just starting to use Card Mod with my Mushroom Cards. I have what is hopefully a simple question. In the template card example, I’m trying to use a font size of 24, however, that will cut off any character below the line height such as j g y. A font size of 20 is about it before clipping occurs. Is there some css to add to fix this?
Also, I’d like to use the same font as the Title card in a Template card. I don’t know if that is possible, but I thought I’d ask while I’m at it.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 20px;
}
You have to adjust the field size as well
An example…
type: custom:mushroom-entity-card
entity: sensor.basement_sensor
name: TEST
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-color: blue !important;
--card-secondary-color: orange !important;
--card-primary-font-size: 24px !important;
--card-primary-line-height: 24px !important;
--card-secondary-font-size: 24px !important;
--card-secondary-line-height: 24px !important;
}
Ah, the missing piece. Thanks for the assist!
I tried for ages to adjust the height and it was as simple as
--card-primary-line-height: 24px !important;
will use this in the future thanks
2 Likes
Hello
Been stuck on this for too long and feel like I’m missing something obvious.
I want to change the Vacuum Card’s icon colour and background colour
I’ve got the background colour of the icon to change with this
- type: custom:mushroom-alarm-control-panel-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(0, 128, 128, 0.2) !important;
}
But when trying to add
- type: custom:mushroom-alarm-control-panel-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(0, 128, 128, 0.2) !important;
}
ha-state-icon {
color: #008080;
}
I get errors.
Hey, I think you could have solved it yourself quite easily using the explanation from the first post here. See the end of the first post “What the $ and .: | symbols do”
your corrected code
- type: custom:mushroom-alarm-control-panel-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(0, 128, 128, 0.2) !important;
}
.: |
ha-state-icon {
color: #008080;
}