royle
April 18, 2023, 10:58am
6575
Your assistance is greatly appreciated
Would you be able to help with another card?
I would like to make a new boiler card with only musrhoom cards, but I donāt know where to begin.
My code is as follows:
type: custom:vertical-stack-in-card
cards:
- type: grid
cards:
- show_name: true
show_icon: true
type: custom:button-card
size: 30%
tap_action:
action: toggle
entity: switch.switcher_boiler_dude
icon: mdi:power
name: turn on with time
- show_name: true
show_icon: true
type: custom:button-card
size: 30%
tap_action:
action: toggle
entity: script.boiler_start_for_specific_time
icon: mdi:power
name: boiler
- type: tile
entity: sensor.switcher_boiler_dude_electric_current
vertical: true
- type: tile
entity: sensor.switcher_boiler_dude_remaining_time
name: remainning time
vertical: true
- type: custom:mushroom-number-card
entity: input_number.slider_for_switcher_timer
name: boiler time
layout: horizontal
Hello:
type: custom:mushroom-fan-card
entity: fan.ventilador_habitacion
name: Ventilador
icon_animation: true
show_percentage_control: true
secondary_info: state
primary_info: name
icon_type: icon
collapsible_controls: true
fill_container: true
icon_color: |-
{% if is_state('fan.ventilador_habitacion', 'on') %}
#fcb708
{% else %}
#fcfcfa
{% endif %}
It doesnāt work. Anyone can help me please.
Nope, i doubt it
I have no idea what you are talking about
reypm
April 18, 2023, 5:24pm
6578
wonder what is the content of the script script.bathroom_fan_timer, could you share so we have an idea? I believe is for increasing/decreasing the fan speed through the input_number
Somehow my thoughts goes towards āTimer-Functionā
theandouz
April 18, 2023, 5:41pm
6580
This is perfect, thank you!
1 Like
Well itās not working for me. I set backend preferred theme to set a global preferred theme and in one view/page I set another theme but still the backend preferred theme keeps active. I tried reloading themes with a service call but this have no effect.
royle
April 18, 2023, 7:50pm
6582
Hello everyone
Do any of you have any suggestions on how to make the calendar card smaller so that it fits neatly within the stack of welcome cards?
My code is as follows:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: test
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.
icon_type: entity-picture
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: KEREN
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.
icon_type: entity-picture
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: custom:weather-card
entity: weather.openweathermap
details: false
current: true
forecast: false
card_mod:
style:
.: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 5px !important;
}
.current{
font-size: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
×¢×Ø× ×××,
{% elif (time >= 12) %}
צ××Ø××× ×××××,
{% elif (time >= 5) %}
××ק×Ø ×××,
{% else %}
××Ø×× ×××,
{% endif %}
subtitle: |
{{ user }}!
alignment: start
card_mod:
style:
mushroom-title-card$: |
/* Style greeting */
.title {
--title-font-size: var(--mush-title-font-size, 16px);
--title-font-weight: var(--mush-subtitle-font-weight, light);
color: var(--secondary-text-color) !important;
}
/* Style name */
.subtitle {
--subtitle-font-size: var(--mush-title-font-size, 24px);
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--primary-text-color) !important;
padding-left: 12px;
}
/* Set spacing around greeting */
.header {
--title-padding: 0px 12px 24px;
--title-spacing: 8px;
}
- type: custom:atomic-calendar-revive
card: atomic-calendar-revive
entities:
- entity: calendar.test
showRelativeTime: false
showDate: false
showLocation: false
showMonth: false
showCurrentEventLine: false
eventTitleSize: 120
hideFinishedEvents: true
firstDayOfWeek: 1
refreshInterval: 60
showProgressBar: false
showNoEventsForToday: true
maxDaysToShow: 1
I had the impression that YAML-mode kind of was like a āBuilding Blocksā where you could have a ābase-foundationā and add additional resources for specific Dashboards, via path to the scripts/CSS, or/and themes ā¦ maybe i totally have misunderstand the consept, and Documentation.
On the other hand, i see your joined in here 2,5 month ago, and have 1 hour readtime in the forum, i guess you then have spend alot of time reading about configurating ui-lovelace.yaml , and Multiple Dashboards, and therefore got a whole other idea of how it works.
How , or what do they mean about this ? ( taken from the Documentation )
title: My Awesome Home
views:
# View tab title.
- title: Example
# Unique path for direct access /lovelace/${path}
path: example
# Each view can have a different theme applied. Theme should be defined in the frontend.
theme: dark-mode
# The cards to show on this view.
I assume you tried restarting also, sorry i dont really understand how (yaml-mode)ui-configuration.yaml works, and ābackend preferredā
This button is meant to toggle the fan state after a set duration
The duration value is read from an input_number entity
The script toggles the fan after the set duration. my script is
alias: GF BR01 Fan01 Toggle Script
sequence:
- delay: 00:{{ states('input_number.gf_br01_fan01_toggle_duration') | int }}:00
- service: switch.toggle
data: {}
target:
entity_id: switch.gf_br01_fan1
mode: single
icon: mdi:fan-clock
Noteā¦ i have not changed my switch entity to a fan entity. Mine is switch.gf_br01_fan1.
Yours may be a fan.bedroom_fan or something likewise
2 Likes
reypm
April 18, 2023, 9:32pm
6585
Okay, I thought the idea with the input_number was to increase/decrease the fan speed
Thank you so muchā¦
I have updated the script entity card (tap action & icon color)
- type: custom:mushroom-entity-card
entity: script.bathroom_fan_timer
primary_info: none
secondary_info: none
icon: mdi:power
icon_color: green
tap_action:
action: toggle
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 0px;
width: fit-content;
--ha-card-border-width: 0px;
}
works perfectly.!!
1 more doubtā¦
When the fan is off, is it possible to make the icon color redā¦like this
2 Likes
rhysb
April 19, 2023, 12:16am
6587
Yes, just change the bottom card-mod like this:
card_mod:
style: |
ha-card {
{{ '--ha-card-background: color-mix(in srgb, var(--teal-color) 10%, var(--card-background-color));' if is_state('fan.bathroom_fan', 'on') }}
}
:host {
--mush-rgb-disabled: var(--mush-rgb-red, 244, 67, 54);
}
1 Like
rhysb
April 19, 2023, 12:18am
6588
Refer to @sanil.heartbeats . Just assisting with CSS styling
1 Like
rhysb
April 19, 2023, 12:22am
6589
At the bottom here:
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: 0px;
You can search in the Visual Editor using ctrl-f
1 Like
Faecon
April 19, 2023, 4:35am
6590
Hi,
I want the 2 chips horizontal centered. Iāve read that it would work with a vertical stack, but it doesnāt.
- type: vertical-stack
cards:
- type: horizontal-stack
alignment: center
cards:
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: verbruikgisteren
ulm_chip_navigate_icon: mdi:flash
ulm_chip_navigate_icon_color : grey
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: grafiekverbruik
ulm_chip_navigate_icon: mdi:chart-bar
ulm_chip_navigate_icon_color : grey
CSSā¦ and me???
Been trying to go on a date with CSS for the past one monthā¦ Feels like jungles of amazon
2 Likes
scooby
April 19, 2023, 9:18am
6592
Hello again
I need some help. I have a mushroom chip card with the type of template. I am trying to spin a fan within that but it is not working. I tried many scenarios but not getting anywhere. Can you please help? Here is the code:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fan
content: >-
Fan
{{ expand(states.switch.extractor_fan_group) | selectattr( 'state',
'eq','on') |list | count }} On
entity: switch.extractor_fan_group
icon_color: '{{ ''teal'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state(config.entity, 'on') %}
ha-icon {
--icon-animation: spin 1s linear infinite;
}
@keyframes clip {
0% {clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
}
{% endif %}
ha-card {
padding: 5px;
{{ '--chip-background: rgba(var(--rgb-yellow), 0.2);' if is_state(config.entity,'on') }}
}
.content {
white-space: pre-wrap;
}
Thank you
Awesome work! Wanting to start making something like this for my tablet dashboard. If you could post the code for the popup cards (wifi, person, etc.), that would be helpful!
not sure why would I want the fan to toggle after a period of time tbh
.
.
ā¦ the deeper you go ā¦ the more youāre lostā¦