123
February 8, 2021, 5:10pm
1391
I would appreciate guidance for suppressing the display of the entire toggle button in an Entities card.
Iāve tried enough things to confirm I donāt have a good grasp of the core concepts (i.e. seems straighforward in theory but not in practice). For example, I tried this but it doesnāt work:
type: entities
entities:
- entity: input_boolean.test
show_header_toggle: false
style:
ha-entity-toggle:
$: |
ha-switch {
display: none !important;
}
The toggle button is within a shadow-root and, based on my limitation understanding, that implies more complexity in how to define the item I wish to act on.
1 Like
Viking
February 8, 2021, 6:57pm
1392
The doc says:I recommend using HACS to install and keep track of plugins .ā
Hi.
Iāve searched for a few days but cant seem to figure out how it actually works.
I have 2 icons, which actually should show a debug boolean state (removed to simplify) but I just want to change the color depending on on/off state and the only way to do it seems to be card-mod.
elements:
- icon: 'mdi:android-debug-bridge'
title: Debug
type: icon
style:
'--mdc-icon-size': 40px
color: 'rgba(255, 0, 0, 0.6)'
background-color: 'rgba(3, 169, 244, 0.6)'
border-radius: 50%
top: 35%
left: 40%
padding: 10px 10px 10px 10px
- icon: 'mdi:android-debug-bridge'
title: Debug
type: icon
style: |
hui-icon-element {
color: blue;
}
image: /
type: picture-elements
But Iām unable to make the second icon use any of the attributes of the first icon.
<hui-icon-element class="element" style="--mdc-icon-size:40px; color: rgba(255, 0, 0, 0.6); background-color: rgba(3, 169, 244, 0.6); border-radius: 50%; top: 35%; left: 40%; padding: 10px;"></hui-icon-element>
Any help apreciated
Uh, Maybe I can hepl here!
I just made it work:
In Hacs, under Frontend, press ā+ EXPLORE & ADD REPOSITURIESā and search for card-mod. Think thats how I made it work!
Here all my posts which may be useful:
NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation.
Entity card post rotating icon (by @dolodobendan )disabled tap_action
Entities card (including some special row elements - button , section , divider )post using standard vars for some domains
font-size for Entities card post
Entities card with attributes post
Slider entity inside Entities card main post popup baloon issue hide the popup baloon
"hui-input-number-entity-row" - entity row for "input_number"main post input_number rows look less different from other entity rows - part 1 , part 2
input_select row main post input_select rows look less different from other entity rows - part 1 , part 2 How to add secondary_info: last-changed
input-text row post input_text rows look less different from other entity rows - part 1 , part 2
input_datetime row part 1 part 2 input_datetime rows look less different from other entity rows - part 1 , part 2
Conditional row inside Entities card post
Toggle row inside Entities card colored checkbox how to disable a toggle button how to disable a toggle button - inside auto-entities moving toggle to the left
Hiding checkboxes inside Entities card for some entity row for all entity rows
Animations for Entities card post
āChipā buttons post card-mod theme for chip buttons changing styles for a particular button in a footer dependently on a state changing an icon
Cover entity row main post disable a cover control conditionally ānarrowedā look
Light entity row how to show lights with using only āactiveā & āinactiveā colors
How to manage a rowās height decrease height increase height
How to shift rows to the right post
How to center weblinks & commands post
āEmpty slotā for Entities card post
Circular progress indicator post
Glance card main post changing margin Allocate items in a compact manner
Footer / Header post
custom:multiple-entity-row main post displaying "last-changed" or any other labels for items distribute items evenly animated icons
custom:fold-entity-row main post How to enable / disable a āfold / unfoldā control for fold-entity-row RTL fix for a section row
custom:template-entity-row main post t-e-r inside a conditional row
custom:numberbox-card post
custom:multiline-text-input-card post
custom:text-divider-row post
Tile card colored icon & background on hover remove background from an icon adding a button custom icons for features long states input_select: one-line look
Heading post change icons
Thermostat custom icons for features
custom:bar-card animation 2 text lines displaying an image instead of an icon centered title hide the whole bar-card if all bars are hidden replacing a value adding a prefix RTL fix for vertical bars
Gauge disabled tap_action colored needle
markdown scrollbar scrollbar for some text markdown with images post 1 , post 2 , post 3 colorize only some text external js for āhrā element styling an icon on hover (original idea of @Spartacus )
Picture Glance card post changing an icon by card-mod distributing icons
Sensor card with a graph post
History-graph card styling prevent clipping when using inside stack-in-card added scrollbar custom line colors custom timeline colors how to set a 0 lower bound for Y-axis styling a tooltip how to add an icon to a cardās title how to set a height
statistics-graph card post grouping / aligning labels custom line colors replacing a label how to set a 0 lower bound for Y-axis
custom:mini-graph-card main post animation - blinking name, resized & rotating icon how to display an additional info on the card how to display additional text items (prefixes & suffixes) solid (non-semitransparent) fill move a graph for the 2nd sensor to the bottom how to set a color for the last bar place 2 sensorsā states on the left side displaying states as a part of the legend displaying a UoM under the state displaying a UoM before a state displaying a state & extrema data on the same line using card-mod to compare mini-graph-card & history-graph non-elegant & unstable way to show labels for X-axis fixing an issue with a card inside state-switch imitating statistics card how to nicely align legendās elements compact view when used in horizontal stack or grid styling Y-axis labelsā background how to change graphās color dynamically styling points
custom:apexcharts RTL fix
Weather Card post
Styling a card inside ācustom:config-template-cardā post
Styling a card inside ācustom:decluttering-cardā + passing a style as a variable post 1 post 2
Badges (before 2024.8) important - fix to restore a possibility to style badges after 2024.8 Badges: different styling Badges: conditional show/hide Badges: hidden name Square badges Dynamic icon Show either an icon or a value Manually added UoM Replacing a state Replacing a UoM Gradient colors for a badge dependingly on a value (by @parautenbach )
Badges (2024.8) badges themselves badges themselves (mod-card) by @arganto one , two , three
custom:badge-card post after 2024.8
Picture Elements card main post conditional elements rotated background image āselection areaā 3 ways to change an element dynamically on-hover effect for elements example: show a charging process
Logbook card main post styling images by using external js-module Logbook in a Panel mode styling a scrollbar (style is unstable)
Media Player card post
custom:mini-media-player post
vertical-stack, horizontal-stack main post How to fix the āmargin-topā problem for a hidden conditional card Stack inside āhui-elementā card Removing internal borders & margins inside vertical-stack how to add an icon to a cardās title
grid how to add an icon to a cardās title
custom:stack-in-card main post example of customizing a width in a horizontal stack styling a header how to add an icon to a cardās title
See next part below ā
172 Likes
123
February 8, 2021, 10:56pm
1398
Thank you! I think I now understand why the many things I have tried all failed to work.
If the Entities card contains multiple entities, is there a way to make the style apply to all of them? Or does it have to be repeated for each one separately?
Please check here:
Styling Entities card.
(including some special row elements - button, section, divider)
NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
Colored background & rounded corners - can be easily achieved by using "--ha-card-background" & "--ha-card-border-radius" variables:
[image]
type: entities
title: Title
entities:
- entity: sun.sun
style: |
ha-card {
--ha-card-background: orange;
--ha-card-border-radius: 14px;
}
Using background image:
Tā¦
There are examples with common style for all entities.
type: entities
title: 'Changed color'
style: |
ha-card {
color: blue;
}
ha-card .card-content {
color: red;
}
entities:
- entity: input_boolean.test_boolean
name: Inherited color
- entity: sun.sun
name: Inherited color
secondary_info: last-changed
- entity: sun.sun
name: Changed color
secondary_info: last-changed
style: |
:host {
color: cyan;
}
123
February 8, 2021, 11:15pm
1400
The issue I am experiencing is that if I move the style block to the left, so it applies to all entities, it fails to work (even for just one entity).
type: entities
entities:
- entity: input_boolean.test_boolean
style:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
display: none;
}
Does the reference within the style have to be modified?
Please check this:
type: entities
title: 'Checkbox: hidden'
show_header_toggle: false
entities:
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
style:
hui-toggle-entity-row:
$:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
display: none;
}
"hui-generic-entity-row" is inside shadow-root of "hui-toggle-entity-row", so you must specify it.
Colored checkbox:
NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
Track with static color, colored trackās border:
- entity: input_boolean.test_boolean
name: 'colored back (static), colored border'
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
background-color: yellow !important;
border-color: green !important;
}
Track with conditional color, colored trackās border:
- entity: input_boolean.test_boolean
name: 'colored back (conditional), colored border'
style:
hui-generic-entity-row:
ha-entity-toggle:
$:
ha-switch:
$: |
.mdc-switch .mdc-switch__track {
border-color: green !important;
}
.: |
ha-switch {
--switch-unchecked-track-color: yellow;
--switch-checked-track-color: red;
}
Thumb with conditional color:
- entity: input_boolean.test_boolean
name: colored button (conditional)
style:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: yellow;
--switch-checked-button-color: red;
}
More examples are described here .
3 Likes
123
February 9, 2021, 4:22am
1403
Thanks again! I will have to learn more about how to navigate through the various levels. Your examples are very helpful.
1 Like
Thanks for all your posts, they have been quite informative!
But I think Iām at a state where you were too in the beginning. Not grasping the whole idea and not being able to read a good toturial.
Is the idea that you start your tree in the top layer, and write in code your way down untill you get to the eneioty you want changed?
Yes, I am trying to use this approach.card-mod (look at his posts, you will find the needed one).
It was described in the GitHub (GitHub - thomasloven/lovelace-card-mod: š¹ Add CSS styles to (almost) any lovelace card ).$: is used to go inside shadow-root of some element.
.: is used to go inside some element (not shadow-root) - see GitHub.
I am not 100% sure but I think that the pipe | is used to break a line before styles:
style: |
:host {
color: red;
}
or
style: ':host { color: red; }'
style:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: yellow;
--switch-checked-button-color: red;
}
or
style:
hui-generic-entity-row ha-entity-toggle:
$: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'
The means that the pipe must be used ONE time after the LAST colon.
The example:
type: entities
title: Using pipe
show_header_toggle: false
entities:
- entity: input_boolean.test_boolean
name: colored text
style: |
:host {
color: red;
}
- entity: input_boolean.test_boolean
name: colored text
style: ':host { color: red; }'
- entity: input_boolean.test_boolean
name: colored button
style:
hui-generic-entity-row:
ha-entity-toggle:
$: |
ha-switch {
--switch-unchecked-button-color: yellow;
--switch-checked-button-color: red;
}
- entity: input_boolean.test_boolean
name: colored button
style:
hui-generic-entity-row:
ha-entity-toggle:
$: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'
- entity: input_boolean.test_boolean
name: colored button
style:
hui-generic-entity-row ha-entity-toggle:
$: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'
3 Likes
KTibow
February 9, 2021, 2:36pm
1406
Iāve been off here for a bit. Are there any posts that havenāt already been answered?
parautenbach
February 17, 2021, 7:56pm
1407
How can I reach the first div in order to add style elements? I tried a few searches but Iām not even sure what to search for. I scanned a number of Ildar Gabdullinās posts as there are many examples but except for going into shadow roots I couldnāt find the answer for this.
KTibow
February 17, 2021, 11:48pm
1408
Iām pretty sure you donāt need shadow-rooting for that. What happens without shadow-rooting? Could you also specify your whole intentions?
parautenbach
February 18, 2021, 5:17am
1409
Sorry if I explained badly. I meant: I understand how to navigate into shadow roots (and there are many examples of those) and how to get into inner elements (like a div) but here are 3 divs on the same level and Iām unsure how to be specific about how to apply styling to only one of those divs. Should I aim to style the class on the div instead, since they each use different classes?
I was trying to simulate your situation but failed since I do not have any detailsā¦
style: |
ha-card .mmp__bg {
....
}
But cannot check myself if it worksā¦
Thank you!
