Go to 1st post* - link at the bottom - changing a row’s height
* In the first post, there is a link to FANTASTIC POST BY ILDAR GABDULLIN ON HOW TO MODIFY EVERYTHING WITH CARD-MOD
2 Likes
Card-mod change color of button PRESS.
I am trying to change the color of the PRESS on a button. I was able to change the icon and the name but not the actual PRESS.
Thank you! Finally found it, and it works as I hoped!
1 Like
Go to the 1st post of this thread.
At the end of this post you will find a link. (Same also explained in the post right before your post)
Select this link - you will find a post with many links.
Find “Entities card” (closer to a top), select “post” to open the main post about Entities card.
Scroll down to “styling button row”.
Close the issue on GitHub if OK.
I never did find the exact entities button. But I found the type: button and then I could change the color. Only took two hours of trial and error.
Hi… I have been racking my brain. I have been fighting my way through Card Mod CSS for about two years and I think I got pretty good… but this is breaking me.
I want to make the styles for this separate from which is what shows up when you do use a secondary info line. I want different styles for core rows with secondary information (but above the secondary information classes .info .pointer .secondary) and this tag seems to differentiate them…
My use case is that I have my rows very tight together using line-height at the ha-card level and then I adjust the entity rows. But the rows that have secondary information, of course, just expand into the other entities space… I can adjust the inside of the secondary info just fine, but there is no way to make just the rows (the whole row, with the info, pointer, and secondary all together) that have secondary info use a different ha-card level line-height… ONLY when the card has secondary info…
So it looks like this tag in the rows that do not have secondary info is the ticket, but how to I incorporate the “no-secondary” part in the path?
Thank you so much in advance.
Google about pseudo classes - smth like “not()” and “has()” might be useful.
Yeah, went down that hole a bit and basically just got inundated with ::before ::after stuff. I mean… IS that a pseudo class? Is that what that extra text is called even when not hashed or ::'ed? Do you have a resource that would be helpful?
@Ildar_Gabdullin I’m trying to disable the custom:slider-entity-row with your example from custom button card, but I don’t succed.
This is my code in a template (I’m not using entities, though):
custom_fields:
sld:
card:
type: "custom:slider-entity-row"
entity: "[[[ return variables.var_sw_entity.entity_id ]]]"
full_row: true
hide_state: true
step: 1
With the inspector, I saw that I can use input[type=“range”], but I’m not able to configure it correctly…
I want to disable the slider when the value passed to it is outside 1-100 range.
Could you please point me to the right direction?
Interestingly, I was able to change the thikness and color of the slider using:
card_mod:
style: |
:host {
--md-slider-active-track-color: rgb(0,100,255);
--md-slider-active-track-height: 2px;
--md-slider-focus-handle-color: rgb(0,100,255);
--md-slider-handle-color: rgb(0,100,255);
--md-slider-hover-handle-color: rgb(0,100,255);
--md-slider-hover-state-layer-color: rgb(0,100,255);
--md-slider-label-container-color: rgb(0,100,255);
--md-slider-pressed-handle-color: rgb(0,100,255);
--md-slider-pressed-state-layer-color: rgb(0,100,255);
--md-slider-inactive-track-color: Silver;
--md-slider-inactive-track-height: 2px;
}
But if I add your code here it doesn’t work?
--paper-slider-active-color: var(--disabled-text-color);
--paper-slider-knob-color: var(--disabled-text-color);
--paper-slider-container-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
color: var(--disabled-text-color);
pointer-events: none;
Many many thanks!
hui-simple-entity-row,hui-sensor-entity-row:
$:
.: |
hui-generic-entity-row:no-secondary {
height: 14px!important;
}
hui-generic-entity-row:
$: |
.secondary {
line-height: 10px;
font-size: 10px;
}
I mean, I am sure I am just missing something, but its having no effect. I know your trying to lead me to water but the google machine has run out of results…
@Ildar_Gabdullin I’ve made some progress with the style, the following code works for the style:
card_mod:
style: |
:host {
{% set active_color = 'rgb(0,100,255)' %}
{% set inactive_color = 'Silver' %}
{% if state_attr(config.entity, "current_position") < 0 or state_attr(config.entity, "current_position") > 100 %}
{% set active_color = 'var(--disabled-text-color)' %}
{% set inactive_color = 'var(--disabled-text-color)' %}
pointer-events: none;
{% endif %}
--md-slider-active-track-color: {{ active_color }};
--md-slider-active-track-height: 2px;
--md-slider-focus-handle-color: {{ active_color }};
--md-slider-handle-color: {{ active_color }};
--md-slider-hover-handle-color: {{ active_color }};
--md-slider-hover-state-layer-color: {{ active_color }};
--md-slider-label-container-color: {{ active_color }};
--md-slider-pressed-handle-color: {{ active_color }};
--md-slider-pressed-state-layer-color: {{ active_color }};
--md-slider-inactive-track-color: {{ inactive_color }};
--md-slider-inactive-track-height: 2px;
}
BUT I’m not able to disable the slider with “pointer-events: none;” inside the if statement ? All the controls are disabled except for the slider…, and I need the opposite :-))
Where shall put it?
Many thanks.
Sorry I may be misunderstanding but doesn’t something like this solve what you are looking to do?
card_mod:
style:
hui-simple-entity-row,hui-sensor-entity-row:
$:
hui-generic-entity-row,no-secondary:
$: |
div.info.pointer.text-content {
line-height: 100px;
font-size: 16px;
color: red;
}
.secondary ha-relative-time {
line-height: 16px;
font-size: 16px;
color: yellow;
}
@ASNNetworks still looking for a ‘sticky’ fix?
Actually, I think I have found somewhat of a solution (it would require some adjustments on your part). It seems that if you put the cards in a layout-card instead of a vertical or horizontal-stack that the sticky part simply works again.
So instead of doing:
- type: vertical-stack
cards:
- type: markdown
card_mod:
style: |
:host {
position: sticky;
top: 0;
z-index: 1;
}
content: NOT STICKY
You do this:
- type: custom:layout-card
cards:
- type: markdown
card_mod:
style: |
:host {
position: sticky;
top: 0;
z-index: 1;
}
content: IS STICKY
I hope this helps someone!
Thanks so much for having a go…
So not really. If you take a look under “Water Leak Triggers”, there is the one entity that uses the secondary info…
Now I want to keep all the sensors around it tight the way they are, but I want the sensors that DO use the secondary info to be able to have an accommodating height.
I use the code below to accomplish the above results, but I can’t find to way to change ONLY the rows with secondary_info to, for example, height: 20px.
hui-simple-entity-row,hui-sensor-entity-row:
$:
.: |
hui-generic-entity-row {
height: 14px:!important;
}
hui-generic-entity-row:
$: |
.secondary {
line-height: 10px;
font-size: 10px;
}
Adding the “,no-secondary” seems to make no difference. In fact, when I threw your code in to see what it did, removing the “,no-secondary” made no difference even there, leaving all your changes in tact. Most of those changes are under the generic row anyway, and so the two “mini-rows” inside the generic row were what would be changed. I am trying to change the full generic row that contains those “mini” rows, just like when there is no secondary info, but to something larger when there is.
The very inelegant solution I use now is to add a “type: divider” above and below the secondary_info entities… but this requires manual manipulation and doesnt look clean as you can see below:
Given there is this “no_secondary” part of the element, I was hoping I could use it to differentiate the rows that have it form those that dont, and use card_mod to adjust them both separately according to that tag. Thus far, though, I havent been smart enough to figure it out, or experienced enough to know if it just cant be done.
I appreciate you taking a look. Thank you!
ahh apologies, I got it completely backwards then 
try this:
card_mod:
style:
hui-simple-entity-row,hui-sensor-entity-row:
$:
hui-generic-entity-row:
$: |
:host {
background-color: red;
color: yellow;
}
hui-generic-entity-row:not([no-secondary]):
$: |
:host {
background-color: blue !important;
height: 70px !important;
line-height: 15px !important;
}
So we use the :not() to specify our attribute [no-secondary]. You can also use it like :not(.myclass) or :not(img) etc.
make note of the !important as they are… important
Excuse the colors, makes it easier to see whats going on here for others.
Let me know if this solves your issue. Obviously play with heights to get your desired look.
2 Likes
On my dear lord! You are a Prince… @Ildar_Gabdullin was pointing me in the right direction, and I have been barking up that general tree, but the key piece I was missing what the “[ ]”. I literally wrote that code 90 ways and just never came across a single resource in hours of searching that use that syntax! I have had to teach myself (and beg to be taught like this) so I never know what “totally obvious” thing I just don’t know. my dashboard are in yaml, I have custom themes, design my own button cards, but all just futzing around and not really knowing what I am doing. I really appreciate you taking the time to show me this. You made my week. It was driving me nuts.
1 Like
I would say that this is same as
hui-generic-entity-row {
2 Likes
you’re quite correct - and far more refined than my brain in that moment…
card_mod:
style:
hui-sensor-entity-row$: |
hui-generic-entity-row {
background-color: red;
}
hui-generic-entity-row:not([no-secondary]) {
background-color: blue;
}
I’m really struggling with this one and would appreciate any help, thank you.
It would like to make the text under “Standby” change colour depending on whether the switch is On or Off
type: entities
entities:
- type: section
- entity: input_number.heating_lounge_target_temperature
name: Lounge Target Temperature
icon: mdi:sofa
- entity: input_boolean.heating_lounge_boost
type: custom:multiple-entity-row
name: Lounge Boost
toggle: true
state_color: true
entities:
- entity: switch.lounge_neo_standby
name: Standby
- entity: input_datetime.heating_lounge_boost_start
name: start
- entity: input_datetime.heating_lounge_boost_stop
name: stop