Just an idea, but perhaps use a combination with vertical stack in card? A button or markdown for icon and name, then a full width slider?
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.
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?
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
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
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;
}
Anything at all to start from would help.
Try padding: 0px 16px 16px !important;
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)
color: red;
1 Like
I tought that last line should be without ā;ā
But with ā;ā doesnt work either
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.
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?
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