Thatās 177 lines.
One Hundred And Seventy Seven
1 Like
iām sorry @thomasloven , didnāt noticed, please see below:
code:
plugpop:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Devices
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
card:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: Climate
open: false
entities:
- type: custom:more-info-card
entity: climate.mzgn_slvn
title: Living Room
- type: custom:more-info-card
entity: climate.mzgn_khdr_shynh
title: Bedroom
The style: option just styles the popup window itself (mainly the bar with the title and the closing button). If you want to style the card in the popup, you can use card-mod.
1 Like
already tried, but for some reason i canāt get it to work, iām using a lot with card mod.
i donāt know what iām doing wrong
code:
plugpop:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Devices
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
card:
type: entities
style: |
ha-card {
color: AliceBlue;
}
.card-header {
color: AliceBlue;
}
entities:
- type: custom:fold-entity-row
head:
type: section
label: Climate
open: false
entities:
- type: custom:more-info-card
entity: climate.mzgn_slvn
title: Living Room
- type: custom:more-info-card
entity: climate.mzgn_khdr_shynh
title: Bedroom
Thanks for the help!
Thatās not a problem with card_mod.
You should always try to get popup cards working as a normal card first.
In Lovelace, every card is an island. Almost entirely isolated from any attempts to modify it from the outside. As such, changing the CSS color property of your entities card, wonāt affect the more-info-card inside it.
You have two options.
Either you add style: to each card in your card and style them separately, or you use the CSS variables:
style: |
ha-card {
--primary-text-color: AliceBlue;
}
2 Likes
trying to display a slider on a button card, which seems not possible, Ive tried to simulate the same form factor as follows:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: entities
style: |
ha-card {
color: grey;
--paper-item-icon-color: green;
font-weight: bold;
font-family: Helvetica;
font-size: 13px;
}
# title: Don't show title
show_header_toggle: false
entities:
- input_number.ha_delayed_startup
- type: custom:button-card
template: horizontal-filler
which is almost as I want it:
@jimz011ās suggestion to take out the title works well.
Iāve made the icon green for now to have it stand out. What I would like to do is have the slider show on a dedicated line, and show the icon above the slider, and display the full name above that. In fact, like the buttons (true buttons) below it in the image.
Can I use card-mod for that to move the separate parts ?
thanks for having a look
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