pmgsrosa
March 9, 2024, 9:45pm
6161
Hi there,
A little bit of help please.
card_mod:
style:
ha-tile-icon$: |
.shape {
border-radius: 15px !important;
height: 60px !important;
width: 60px !important;
margin-top: 10px !important;
margin-bottom: 2px !important;
}
ha-tile-info$: |
.primary {
font-size: 16px !important;
font-weight: bold !important;
}
.secondary {
font-size: 15px !important;
}
style: |
ha-card {
color: red;
height: 80px !important;
}
It does what I want however the page is ok when loaded but after some seconds get stuck and in need to reload the page.
style: |
ha-card {
part included. If I took it out it’s ok.
Anyone can help?
card-mod must have ONE “style” keyword.
1 Like
pmgsrosa
March 9, 2024, 10:14pm
6163
Thank you very much for the pointer
card_mod:
style:
ha-tile-icon$: |
.shape {
border-radius: 15px !important;
height: 60px !important;
width: 60px !important;
margin-top: 10px !important;
margin-bottom: 2px !important;
}
ha-tile-info$: |
.primary {
font-size: 16px !important;
font-weight: bold !important;
}
.secondary {
font-size: 15px !important;
}
.: |
ha-card {
color: red;
height: 80px !important;
}
1 Like
cweakland
March 10, 2024, 1:39am
6164
Is it possible to change aspects of the new “sections” ? I would like to change the font size and padding for the style h2.title. Is this something that can be done?
A bit tweaked version of a very interesting card - fluid-level-background-card :repo related issue fixed by this tweak dedicated thread in Community
type: custom:mod-card
card_mod:
style:
fluid-level-background-card $: |
div#container {
border: none;
box-shadow: none;
}
.type-custom-fluid-level-background-card {
border: none;
box-shadow: none;
}
fluid-background {
border-radius: var(--ha-card-border-radius,12px);
}
card:
type: custom:fluid-level-background-card
card:
type: glance
entities:
- entity: sun.sun
name: Beer level
entity: input_number.test_level_1
fill_entity: input_boolean.test_boolean
level_color: [242,142,28]
5 Likes
That has so many card application possibilities. Awesome!
I saw a few backgrounds like this with rain drops, spraying water droplets etc…when researching sprinkler animation.
Would be great to have these animations shared somewhere!
Timmuhhh
March 13, 2024, 9:09am
6168
Did somebody manage to get the pointer-events: none working?
Timmuhhh
March 13, 2024, 9:37am
6169
I want to change the pointer-events: to “none”
The full JS path is document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“hui-dialog-edit-card”).shadowRoot.querySelector(“ha-dialog > div.content > div.element-preview > hui-card-preview > hui-vertical-stack-card”).shadowRoot.querySelector(“#root > hui-vertical-stack-card”).shadowRoot.querySelector(“#root > hui-entities-card:nth-child(1)”).shadowRoot.querySelector(“#states > div > slider-entity-row”).shadowRoot.querySelector(“div > ha-slider”).shadowRoot.querySelector(“#end ”)
If i run it trough Card Mod Helper i get this string:
I cant find the code to alter pointer-events on the place I show in the screenshot on the right side.
I’ve been on it for days and completely clueless, can somebody help me?
Have you tried just entering it under ha-card? Your post want clear you were asking about the custom:slider-entity-row
type: entities
title: Pointer
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
pointer-events: none;
}
Timmuhhh
March 13, 2024, 9:52am
6171
I’ve embedded this:
card_mod:
style: |
ha-card {
{% if is_state('media_player.speakers_tim_bed','off') %}
pointer-events: none;
{% endif %}
}
at the bottem of the vertical-stack where the sliders are located. Is i run the above code trough the tester the output is:
card_mod:
style: |
ha-card {
pointer-events: none;
}
This does nothing for me.
For good mesure, I also tried to add it into the card within the vertical-stack
type: entities
title: Front Left
entities:
- type: custom:slider-entity-row
entity: input_number.speakers_bed_front_left_niveau
full_row: true
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 14px;
{% if is_state('media_player.speakers_tim_bed','off') %}
pointer-events: none;
{% endif %}
}
This also didnt work for me
You want no action on the slider if speaker is off, correct?
I’ll let you know if I get it. You can stop it in the dev tool, but struggling to execute in card_mod.
1 Like
Timmuhhh
March 13, 2024, 10:46am
6175
For troubleshooting I made a new card, more basic:
type: entities
name: Front Left
entities:
- input_number.speakers_bed_front_left_niveau
card_mod:
style: |
ha-card {
pointer-events: none;
}
This results in the red part being non-clickable but the green part being clickable:
Timmuhhh
March 13, 2024, 10:46am
6176
Thanks man! appreciate the time and effort you put into this!
Zenia
March 13, 2024, 10:00pm
6177
Is it possible to add border highlight to each floor and also a room when lights is on to Vertical Stacked Navigation Card ?
type: custom:stack-in-card
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Basement
icon: mdi:home-floor-b
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
font-weight: bold;
margin-top: rem;
margin-left:5rem
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Basement
secondary: null
icon: mdi:escalator-down
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.basement_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.basement_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: basement
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Laundry
secondary: null
icon: mdi:tumble-dryer
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.laundry_vanity_light_light') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.laundry_vanity_light_light','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
}
tap_action:
action: navigate
navigation_path: laundry
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Utility Room
secondary: null
icon: mdi:water-boiler
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.utility_room_light_light_2') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.utility_room_light_light_2','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: utility-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: HA Info
secondary: null
icon: ios:cpu
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
width: 150px;
}
tap_action:
action: navigate
navigation_path: ha-information
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 100%;
}
to this:
type: custom:vertical-stacked-navigation-card
nav_name: 🏡
nav_items:
- name: First Floor
icon: mdi:home-floor-1
sub_nav_items:
- name: Living Room
icon: mdi:sofa
destination: living-room-1
active: false
- name: Kitchen
icon: mdi:pot-steam
destination: kitchen
active: false
- name: Hallway
icon: mdi:hat-fedora
destination: hallway
- name: My Bathroom
icon: mdi:shower-head
destination: my-bathroom
- name: Garage
icon: mdi:go-kart
destination: garage
- name: Kids Room
icon: mdi:teddy-bear
destination: kids-room
- name: Outside
icon: phu:outside-temp
destination: outside
active: false
unfolded: false
- name: Second Floor
icon: mdi:home-floor-2
destination: ''
sub_nav_items:
- name: Upstairs
icon: mdi:escalator-up
destination: upstairs
- name: Master Bedroom
icon: mdi:bed-king
destination: master-bedroom
- name: Sonia's Room
icon: mdi:zodiac-leo
destination: sonia-room
- name: Artem's Room
icon: mdi:zodiac-taurus
destination: lovelace
- name: Basement
icon: mdi:home-floor-b
destination: ''
sub_nav_items:
- name: Basement
icon: mdi:escalator-down
destination: basement
- name: Laundry
icon: mdi:tumble-dryer
destination: laundry
- name: Utility Room
icon: mdi:water-boiler
destination: utility-room
- name: HA Info
icon: mdi:cpu-64-bit
destination: ha-information
custom_styles:
colors:
text:
main: White
sub: White
hover:
main: Teal
sub: Teal
active:
sub: orange
background:
main: Transparent
sub: Transparent
font_size:
text:
main: 25px
sub: 20px
card_mod:
style: |
ha-card {
background: url('/local/MyPictures/rock wall.jpg');
background-size: 100%;
}
I want each floor to light up a border when lights in any room on this floor is ON and also see which room it is
I’m wondering if someone can provide some advice for combining card-mod styles that are set up using the “|” after “style:” and ones that don’t. For example, I can get both of these card-mod styles to work on their own, but I haven’t found a way to integrate them together into the one set of instructions.
card_mod:
style: |
ha-card {
background: var(--tile-color) !important;
border-radius: 5px !important;
}
ha-tile-icon {
--tile-color: white;
}
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-color: white !important;
--control-slider-background: white !important;
}
Both of the above work, but how do I combine them so I can use both at once?
Actually, I was able to work it out…
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-color: white !important;
--control-slider-background: white !important;
}
.: |
ha-card {
background: var(--tile-color) !important;
border-radius: 5px !important;
--primary-font-size: 20px;
--primary-font-weight: normal;
}
ha-tile-icon {
--tile-color: white;
}
