mm, thanks, and tried a few things, donāt think that would work, since the name of the slider would still be cut-off because of the slider, unless on an ipad or so.
also, I feel it should be possible to do i one card, the hack I posted above is already stretching itā¦ adding another card to that is a bit much for a simple task of showing a slider full width.
thomasloven
(Thomas LovƩn)
October 6, 2019, 6:52pm
126
Thanks Thomas, Ive looked at that, and my quest remains: showing the name and icon above the slider.
I can display the full slider, but then there is no display of anything other than the state:
While in fact I was looking for something like this:
off
on
schematicalliy
icon name
slider state
the latter is made possible using custom-ui with this settings:
light.bedside_guest_room_right:
templates:
icon: >
if (state === 'on') return 'mdi:human-greeting';
return 'mdi:hotel';
extra_data_template: >
if (attributes.hs_color)
return 'Hs: ' + attributes.hs_color;
return null;
state_card_mode: break-slider
stretch_slider: true
hide_control: false
show_last_changed: true
confirm_controls: true
slider_theme:
min: 0
max: 255
pin: true
off_when_min: true
report_when_not_changed: true
extra_badge:
- attribute: brightness
unit: Br
- attribute: color_temp
unit: Co
maybe this is something you can consider adding also?
thomasloven
(Thomas LovƩn)
October 7, 2019, 9:32am
128
I donāt get it. Whatās different from just what you were looking for two weeks ago?
well, I understandā¦
that post was also about adding the extra data templates to an other entity.
Iāve now used the same kind of example, but used one with a full slider for this specific question.
As you can see in the post I now try to have the slider on a row below the icon and name, and not have these all on 1 line.
which is somewhat different than showing attributes on a secondary line.
update
having tried this:
- type: custom:vertical-stack-in-card
cards:
- type: markdown
style: |
ha-card {
color: grey;
font-weight: bold;
font-family: Helvetica;
font-size: 13px;
}
content: |
<ha-icon icon='mdi:home-assistant'></ha-icon> Delayed startup
- type: custom:slider-entity-row
entity: input_number.ha_delayed_startup
full_row: true
and this:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: vertical-stack
style: |
ha-card {
color: grey;
--paper-item-icon-color: green;
font-weight: bold;
font-family: Helvetica;
font-size: 13px;
}
cards:
- type: markdown
content: |
#### <ha-icon icon="mdi:home-assistant"></ha-icon> Delayed startup
- type: custom:slider-entity-row
entity: input_number.ha_delayed_startup
full_row: true
- type: custom:button-card
template: horizontal-filler
it seems slider-entity-row wonāt exactly do as I hoped for. Using the full-row pushes the state and uom to the outer border, which looks ugly.
I probably am missing all sorts of styles options (reason I posted here), but for such a simple task this seems to be ridiculously complexā¦
I have read the entire thread and I still canāt wrap my head around how to use selectors.
Iām trying to remove the padding from a markdown card inside a picture-elements card. In object inspector I know I have to change ha-markdown
ha-markdown {
display: block;
user-select: initial;
padding: 0px 16px 16px;
}
hui-picture-elements-card #shadow-root ha-card #root hui-markdown-card #shadow-root ha-card ha-markdown.markdown.no-header
Iām trying examples blindly here and a nudge in the right direction is appreciated.
EDIT:
Figured it out
- type: picture-elements
style:
.: |
"#root > hui-element > hui-markdown-card":
$: |
ha-card > ha-markdown {padding: 0 !important;}
1 Like
QbaF
(Qba F)
November 1, 2019, 3:05am
131
Sorry, were there anybody in the world for who this card-mod wasnāt working?
It is not possible to install wrong.
Install by HACS
in RAW Lovelace in resources
- url: /community_plugin/lovelace-card-mod/card-mod.js
And simplest style do not work. Trying a lot. Purging cache, adding type: js, type: moduleā¦ nothing
Any idea? Anybody?
You need to post an example of your code. It works for me for some things anyway so probably you are setting the style incorrectly or trying to style an element you canāt styleā¦
1 Like
thomasloven
(Thomas LovƩn)
November 1, 2019, 8:05am
133
Itās still very unclear to me what you are trying to do and how you are trying to do it.
Are yoy trying to put the slider on a single row only by itself, with no value or anything? If so, thereās an option to hide the state display.
If you are trying to push the state a bit to the left you can try
- type: custom:slider-entity-row
entity: ...
style: |
host: {
display: block;
margin-right: 8px;
}
thomasloven
(Thomas LovƩn)
November 1, 2019, 8:09am
134
Anything at all to start from would help.
Try padding: 0px 16px 16px !important;
QbaF
(Qba F)
November 1, 2019, 11:11am
135
The simplest example:
type: entities
entities:
- entity: sensor.netatmo_na_dole_temperature
- entity: sensor.netatmo_na_dole_co2
style: |
ha-card {
color: red
}
Produces:
(with theme ādefaultā what most probably should not be important)
QbaF
(Qba F)
November 1, 2019, 11:16am
137
I tought that last line should be without ā;ā
But with ā;ā doesnt work either
thomasloven
(Thomas LovƩn)
November 1, 2019, 11:19am
138
Then try adding debug_cardmod: true
and check your browser log to see if it finds the ha-card.
You can also use inspect element to make sure your ha-card
gets a card-mod
element.
QbaF
(Qba F)
November 1, 2019, 11:37am
139
Sorry, where to put debug_cardmod: true
?
Meantime I did look into the code (the dev tools in Chrome) and I can find ha-card
and I can not find anywhere card-mod
.
Moreover, at this stage I have only 3 resources
added and can find there only two of them. Yes, no card-mod.js
Is it ok, that in UI code resources card-mod.js has no type declared?
thomasloven
(Thomas LovƩn)
November 1, 2019, 12:03pm
141
What does the installation instructions say?
Pretty sure the github for card-mod tells you how to add it to lovelace.
- url: /community_plugin/lovelace-card-mod/card-mod.js
type: module
1 Like
Bieniu
(Maciek)
November 2, 2019, 9:07am
145
petro
(Petro)
November 2, 2019, 9:42am
146
Use an entities card instead of vertical-in-stack. Might have better luck. Vert in stack card always causes problems every few versions