???
I already gave the solution. And mentioned it again. And you are using it for the border.
Address it not (only) via the element-name, which is not unique, but address it via class, path, id, name, ā¦ => here class.
1 Like
Hey, I am trying to make an icon linear-gradiant in color on certain states in both markdown and mushroom cards, but somehow I can make the background in my mushroom card icons linear-gradient, but not the icon itself 
can somebody help me out with this?
- type: custom:mushroom-template-card
entity: fan.tv_fan
primary: TV Fan
layout: vertical
icon: |-
{% if is_state('fan.tv_fan', 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state('fan.tv_fan', 'on') %}
green
{% endif %}
card_mod:
style: |
ha-card
{
background: rgba(0,0,0,0);
}
ha-state-icon {
background: linear-gradient(#e66465, #9198e5);
{{ 'animation: spin 1s linear infinite;' if is_state('fan.tv_fan', 'on') }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
does anyone know why iām not able to make this card scrollable, it just shows as one long vertical stack
type: custom:local-conditional-card
default: hide
id: ymovie
card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:close
icon_color: rgb(139, 51, 51)
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- sidebar
- chores
- type: custom:gap-card
height: 26
- type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-content {
max-height: 500px;
overflow-y: scroll;
}
card:
type: vertical-stack
cards:
- type: vertical-stack
title: BadevƦresle
cards:
- !include
- ../../lovelace/templates/chores.yaml
- name: RengĆøre vask
sensor_name: chores_clean_zink_bathroom
warning_before: 2
cycle_days: 7
icon: mdi:countertop-outline
- !include
- ../../lovelace/templates/chores.yaml
- name: Toilet
sensor_name: clean_toilets
warning_before: 2
cycle_days: 7
icon: mdi:toilet
- !include
- ../../lovelace/templates/chores.yaml
- name: Spejle
sensor_name: clean_mirrors
warning_before: 2
cycle_days: 7
icon: mdi:mirror-rectangle
- !include
- ../../lovelace/templates/chores.yaml
- name: Vaskemaskine
sensor_name: clean_washer
warning_before: 2
cycle_days: 18
icon: mdi:mirror-rectangle
- !include
- ../../lovelace/templates/chores.yaml
- name: Rist
sensor_name: clean_drain
warning_before: 2
cycle_days: 30
icon: mdi:hand-wash
```You mean this one?
Works. Finally I managed to relocate that cardā¦
type: entities
title: š Uhrzeit
state_color: true
show_header_toggle: true
entities:
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 1.5rem
paddingLeft_size: 10px
paddingRight_size: 10px
paddingTop_size: 10px
paddingBottom_size: 10px
card_mod:
style:
.: |
ha-card.type-entities {
border-width: 1px;
margin-bottom: -55px;
}
ha-card.type-custom-simple-clock-card {
letter-spacing: 3px;
border-width: 0px;
#margin-bottom: -50px;
float: right;
#right: -30px;
top: -51px;
}
And indeed I learned something. I really thought (for years!) the style needs to be applied on every element with the proper indenting. I have so much code with plenty of
card_mod:
style:
...
Now I know I can add just one and address the elements simply by their class names - way easier, in most cases.
Can we show elements / hide stuff based on
- HA user
- screen size
- ā¦
?
I got an element which is only useful for one single device/user, on all the others it wastes a lot of (rare) screen space.
(found custom card, not sure yet if it provides what Iām looking for: GitHub - iantrich/restriction-card: š Apply restrictions to Lovelace cards)
(Update: not it canāt as it needs an entity. I donāt have an entity āuser nameā or āscreen sizeā.)
Edit: thanks to the words of š¹ Card-mod - Add css styles to any lovelace card - #5474 by antsuc I reminded that HA Core 2023.11 has exactly what Iām looking for. Guess I mixed it up with some CSS stuff I came across recently.
Iām not really sure this is the place you should be asking this question, however:
You can use a Conditional Card to wrap whatever youāre trying to hide/show.
There are a few conditions you can select from, two of them being Screen Size and User.
There is even an AND condition so you can say if USER A and on a tablet device.
Does someone already know how to edit the new Climate Card?
I would like to make the feature bar smaller (or add more padding also makes it smaller)
Hm. If you have already the DOM, you should know/see, where to mod it, shouldnāt you? Or do Imiss the point?
Maybe, i am not experience enough in it anymore. Tried a lot of things in the āstyleā but all have no effect include .containerā¦
Thanks. Immediately when reading your post I reminded that HA Core 2023.11 has exactly what Iām looking for. Guess I mixed it up with some CSS stuff I came across recently.
- You posted an unformatted code.
- Ending brackets seem to be missing.
- Styling Entity card: 1st post ā link at the bottom ā entity card
Lets start with a simpler task.
Try to change a color of the text first: post your attempt here + screenshot.
Then I will tell you which attr to change to hide the text.
I already suggested you to check the 1st post ā link at the bottom.
Thanks man. I just found the topic you linkedā¦ and wowā¦there seems to be a lot of knowledge in it. I was reading completely wrong posts.
First of all I now found a way to set card height, hide icon and header. Align other entity to left and other right.
Iām still searching discussion about how to move value position in to the middle of the card. I have now set card height to 80px and that is the max before text starts to disappear.
type: horizontal-stack
cards:
- type: entity
entity: sensor.time_date
icon: hide
card_mod:
style: |
ha-card div.name {
font-size: 0
}
ha-card {
height: 80px !important;
text-align: left;
letter-spacing: 3px;
}
- type: entity
entity: sensor.weather_new_temperature
icon: hide
card_mod:
style: |
ha-card div.name {
font-size: 0
}
ha-card {
height: 80px !important;
text-align: right;
letter-spacing: 3px;
}
No need to write "ha-card " here.
It is āha-cardā already by default.
As for styling particular things like āplace element in the centerā etc - use Code Inspector (F12 in Chrome, smth else in other browsers) to find your particular element and then play with css attrs:
- Learning CSS principles is a minimum thing that is required if you need to use card-mod. Ofc there some ready examples & you may copy/paste them & use - but they may not cover your particular usecase. (we all have to learn, 3 years ago I have zero knowledge about it, I only knew that ācssā word is smth about making webpages).
- On my last screenshot I advised a simple way to test: find your UI element in a tree-like structure on the right panel - paste a mouse cursor on the top āelement.styleā thing - then type some CSS property and itās value. If you got a desired effect - write this style in your code.
2 Likes
As arganto said - happened after moving to material web.
Will update my post dedicated to a slider later.
Any progress on āpointer-events: noneā parameter in the new material web slider component?
No, a bit busy with local things hereā¦
Laterā¦