Apologies for the delay in getting back to you on this - without seeing your yaml code, I’m guessing that’s the padding that comes from the entities card which is the parent of the input select. If that’s the case, then you would add card_mod styles to the entities card as well as the input select.
Thanks Chris - finally there !! my main confusion was missing STYLE for ‘entites:’ vs STYLE for ‘-enitity’ (indented) … hope this helps others other HA nubees … final result is perfect:
For some reason, I’m unable to get the header bar to unset to the bottom even after following the theme cookbook. Would someone who has successfully moved their header to the bottom please share their theme with me so I can rule in/out my .yaml config? Thanks in advance.
there are some subtle differences, and most experimenting took the border I set, (and which Ildars example above does not). Apparently the 1 px border throws all balance off, and needs fixing by setting the line-height as in my button-cards. If I also add the height, it goes haywire again.
so went back to a borderless badge after all. Note the --paper-item-min-height: 40px; under paper-icon-item. I tried that, but it stretched the notification vertically completely out of proportion. SO left it out, to get back to
Is it possible to apply a theme to the contents of a custom:mod-card?
Background:
I have a horizontal stack that I have set as a custom:mod-card so I can apply a class to the card as a whole, giving me this solid color bar on the left side. Without the custom:mod-card, I have to add the class to each card in the stack, giving me multiple little bars with gaps between them vertically and a large blank space at the bottom (since the right card in this horizontal stack is taller than the left)
I have a default theme set on the lovelace view, and I am using different themes on many of the other cards within. They are all just variations on the main color scheme. Because of another factor, I need to have V1 as the default theme for the whole view and modify some of the cards within.
Issue:
For the life of me, I cannot figure out how to force anything other than the default, background-selected theme to work on this custom:mod-card.
Thomas warned us… I even checked “I know what I’m doing” to see the custom:mod-card instructions
type: vertical-stack
cards:
- type: markdown
content: '# Captain''s Quarters'
theme: LCARS Lower Decks Var 3
card_mod:
class: header
### This is the card in question:
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:gap-card
height: 8
- type: custom:mushroom-light-card
entity: light.duane_s_lamp_top
fill_container: false
show_brightness_control: true
show_color_control: true
collapsible_controls: true
layout: horizontal
use_light_color: true
secondary_info: last-updated
card_mod:
class: middle-blank
### etc...
- type: vertical-stack
cards:
- type: entities
entities:
- entity: input_boolean.adaptive_lighting_bedroom
name: Adaptive Lighting
icon: none
- entity: scene.bedroom_read
icon: none
### etc...
show_header_toggle: false
theme: LCARS Lower Decks Var 3
card_mod:
class: middle-blank
theme: LCARS Lower Decks Var 3 ### I have tried this here, in the style, and everywhere else in this card's yaml without any success. ###
card_mod:
style: |
ha-card {
class: middle
}
### End questionable card.
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: input_select.select_option
data:
option: None
target:
entity_id: input_select.gui_lights
show_state: false
name: Close
icon: mdi:close
theme: LCARS Lower Decks Var 3
icon_height: 40px
card_mod:
class: middle
- type: markdown
content: '## '
theme: LCARS Lower Decks Var 3
card_mod:
class: footer
With HA 2023.3 front end code changes my little theme modification of more info dialog size doesn’t work correctly anymore.
I had set 760px width for more info dialogs and 1280px if they are camera views. But now also the camera view opens in 760px and I can’t figure out how to make it work again. Please help.
I’ve been trying to make closing the more-info popups easier on mobile instead of reaching to the top-left X (any ideas out there??), and with your sample I’ve made them more of a popup where I can click on the sides/bottom (outside) to close it:
I also tried making a border-radius on bottom-right, but although clicking the radius area works (closes the popup) on desktop, it doesn’t display (nor tapping it works) on iOS HA app (although it does in the screenshot for some reason). On Chrome iOS, it displays but doesn’t close the popup.
As you can see, I have specified class-specific elements in the .: section (for example, ha-card.light ha-tile-icon
and these work fine. However I can’t seem to get the code right for shadowDOM elements (like ha-tile-icon$
) - any ideas how I need to format it?
