Your automation is the same as your script here @LiQuid_cOOled ?
What post are you referring to?
Thanks for pointing that out. Must have been a copy and paste error. I’d have to dig for the Pi Hole version, but here is a sprinkler version.
Automation
alias: Sprinkler Timer
description: ""
trigger:
- platform: state
entity_id:
- input_boolean.sprinklers_on
to: "on"
condition: []
action:
- service: timer.start
data:
duration: "{{ states('input_number.sprinkler_number') | int*60 }}"
target:
entity_id: timer.sprinkler_timer
- service: switch.turn_on
target:
entity_id:
- switch.back_yard_main
data: {}
- service: homeassistant.update_entity
target:
entity_id: switch.back_yard_main
data: {}
- delay:
hours: 0
minutes: 0
seconds: "{{ states('input_number.sprinkler_number') | int*60}}"
milliseconds: 0
- service: switch.turn_off
target:
entity_id:
- switch.back_yard_main
data: {}
- service: input_boolean.turn_off
data: {}
target:
entity_id:
- input_boolean.sprinklers_on
mode: single
Script
alias: Sprinkler Timer Finish
sequence:
- service: timer.finish
metadata: {}
data: {}
target:
entity_id: timer.sprinkler_timer
- service: switch.turn_off
data: {}
target:
device_id: bb9a5ee6cfed42eecfcf9ba0f166e19c
entity_id: switch.back_yard_main
- service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.sprinklers_on
mode: single
icon: mdi:timer-off-outline
Card Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Sprinklers
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 15% 15% 70%
margin: '-10px 0px 0px 0px'
cards:
- type: custom:mushroom-template-card
entity: input_boolean.sprinklers_on
icon: mdi:sprinkler-variant
tap_action:
action: toggle
confirmation:
text: Are you sure you want to start the timer?
hold_action:
action: call-service
confirmation:
text: Are you sure you want cancel the timer?
service: script.sprinkler_timer_finish
icon_color: transparent
card_mod:
style: >
ha-card {
border: none !important;
--icon-symbol-size: 40px;
background:none;
}
ha-state-icon { {% if is_state('input_boolean.sprinklers_on', 'on')
%}color: lime !important;
animation: sprinkle 4s ease-in-out infinite
{%else%}
color: red !important;
{% endif %}
}
@keyframes sprinkle {
0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { clip-path:
inset(0 40% 0 40%); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform:
rotate(0deg); }
}
- type: custom:button-card
entity: timer.sprinkler_timer
name: Time Left
show_name: true
show_state: true
show_label: false
show_icon: false
height: 40px
styles:
img_cell:
- background-color: rgba(var(--color-theme),0,05)
- border-radius: 50%
- place-self: center
- width: 20px
- height: 20px
card:
- background-color: '#3d5afe02'
- border: none
- border-radius: 14px
- font-size: 12px
- font-weight: normal
- height: 70px
- color: |
[[[
if(states['input_boolean.sprinklers_on'].state == 'off') return 'red'
else return 'lime';
]]]
- align_self: middle
name:
- font-size: 12px
- padding-bottom: 2px
- color: |
grey
- font-weight: normal
- type: custom:mushroom-number-card
entity: input_number.sprinkler_number
tap_action:
action: toggle
layout: horizontal
display_mode: slider
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
--shape-color:none;
}
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
position: absolute !important;
width: 96% !important;
left: 12px;
height: 44px !important;
margin-top:2px;
--bg-color: rgba(169, 169, 169, 0.2);
--main-color: {{ 'rgba(0, 255, 0, .42)' if is_state(switch.back_yard_main', 'on') else 'rgba(255, 0, 0, .2)' }} ;
}
.: |
ha-state-icon {
color: transparent;
}
ha-card {
border: none !important;
background: none;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
position: absolute !important;
width: 79%;
top: 17px;
align-items: baseline;
}
.primary {
color: transparent !important;
position: relative;
flex-shrink: 1;
flex-grow: 1;
}
.primary:after {
content: "{{states('input_number.sprinkler_number')| int(0)}} Min ";
position: absolute;
color: {{ 'lime' if is_state('switch.back_yard_main', 'on') else 'red' }} ;
left: -1px;
font-weight: 400;
top: 3px;
width: max-content;
z-index: 2
}
.secondary {
color: transparent !important;
position: relative;
flex-shrink: 1;
flex-grow: 0;
}
.secondary:after {
content: "{{ 'ON' if is_state('switch.back_yard_main', 'on') else 'OFF' }} ";
position: relative ;
color: {{ 'lime' if is_state('switch.back_yard_main', 'on') else 'red' }} ;
font-weight: 400;
top: 2px;
right: 10px;
padding-right: 10px;
z-index: 2;
}
card_mod:
style: |
ha-card {
background-image: url("/local/pics/wood.png");
border: none;
}
2 Likes
I’m trying to modify simple-weather-card:
in the way to put some custom text (marked red) basically translation weather info, and also is it possible somehow to change individual small icons (marked blue). If I put the card_mod option (below) all small icons are the same.
type: custom:simple-weather-card
entity: weather.home
name: CITY
primary_info:
- wind_bearing
- wind_speed
secondary_info:
- humidity
- precipitation_probability
card_mod:
style: |
.weather__icon {
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather_icons/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather_icons/windy.svg") !important;
}
This modification (with animated weather icons) was made by the user: rhysb so all the credits to him…
This thread is for Mushroom Card related issues. I’d look for a simple-weather-card thread or post here
1 Like
How can i move the Badge? Thanks
card_mod
mushroom-badge-icon {
margin-top: 38px !important;
margin-right: 16px !important;
}
1 Like
Sorry for another question. Does anyone know if I can add the current energy useage sensor to this card as illustrated below? (Ignore my dodgy writing haha!) I’ve tried a multitude of things but can’t seem to get anything working. Is it just impossible maybe?
nope it’s definitely possible 
type: custom:mushroom-entity-card
entity: switch.loungetv
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: 'Power: {{states('sensor.loungetv_power')}}W';
margin-left: 20px;
}
.: |
ha-card {
border: 0px;
}
1 Like
Aww that is magic. Thank you very much!
1 Like
Hi,
How can i force the list to always drop below in a mushroom select card?
Thank you!
I don’t know if I should post it here or in the card mod topic, but I have the following problem. My dashboard looks like the left one on the image…
When I refresh it, it looks like the right image.
Why is this problem? How can I fix it? The cards do not show the card mod configuration when refreshing. Thanks
What version of Card-Mod are you using ?
Is it the latest version by any chance ? 3.50 or maybe 3.44 ?
Rollback to 3.43 and then try again if so
I used 3.50. I tried it with 3.43 and i have the same problem.
Hello,
how can i change the card height und icon size for mushroom-template-badge ?
An example…
type: custom:mushroom-template-card
primary: Badge Size
entity: xxxx.xxxx
icon: mdi:curtains
icon_color: white
badge_icon: mdi:battery
badge_color: red
tap_action:
action: toggle
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 15px;
--badge-size: 20px;
left: 27px;
top:-10px;
}
1 Like
Hiya.
Trying to give my chip background a different colour based on the AC mode(heat_cool, cool, heat, fan_only, dry but no joy. Any help would be appreciated.
Would be really happy if I can show the degrees its set at as well but I’ll take what I can.
thanks
type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: '#ACLiving'
icon: mdi:air-conditioner
card_mod:
style: |
ha-card {
--chip-background: |
{% if is_state('climate.living_ac_living_ac', 'heat_cool') %}
rgba(180, 165, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'heat') %}
rgba(255, 123, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'cool') %}
rgba(255, 165, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'fan_only') %}
rgba(255, 250, 0, 0.2);
{% elif is_state('climate.living_ac_living_ac', 'dry') %}
rgba(0, 165, 0, 0.2);
{% else %}
rgba(255, 255, 255, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
I haven’t tested, but try removing | (above the red dot)
This seems to have some effect.
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:menu
card_mod:
style: |
ha-card {
border: 2px solid rgb(220,220,220,0.8) !important;
{% if is_state('climate.air_conditioning', 'heat_cool') %}
--chip-background: rgba(180, 165, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'heat') %}
--chip-background: rgba(255, 123, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'cool') %}
--chip-background: rgba(255, 165, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'fan_only') %}
--chip-background: rgba(255, 250, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'dry') %}
--chip-background: rgba(0, 165, 0, 0.2);
{% else %}
--chip-background: rgba(255, 255, 255, 0.2); /* Default color */
{% endif %}
}
}
When I make these types of templates for colours I create a template sensor.
Reference in Card, lovelace dashboard
card_mod:
style: |
ha-card {
{{states('sensor.swc_dewpoint_colour_outside')}}
Sensor, goes in configuration.yaml file
The output of the template in the sensor must be below 250 characters for this to work. Sensor State character limit.
sensor:
# TEMPLATE SENSORS -----------------------------------------------------------
- platform: template
sensors:
# Template Simple Weather Card - Dewpoint Colour - Outside
swc_dewpoint_colour_outside:
unique_id: 8883f463-f1fe-4e46-97ef-ab827670f130
friendly_name: "SWC Dewpoint Colour Outside"
value_template: >-
{% if is_state('sensor.text_dewpoint_comfort_outside','Very Dry') %}
--ha-card-background: radial-gradient(circle, deepskyblue, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Dry') %}
--ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Pleasant') %}
--ha-card-background: radial-gradient(circle, limegreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Comfortable') %}
--ha-card-background: radial-gradient(circle, yellowgreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Sticky Humid') %}
--ha-card-background: radial-gradient(circle, yellow, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Muggy') %}
--ha-card-background: radial-gradient(circle, gold, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Sweltering') %}
--ha-card-background: radial-gradient(circle, orange, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Stifling') %}
--ha-card-background: radial-gradient(circle, crimson, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% endif %}