forgive ignorance - what does the <<: &input_select_narrow_card_mod do?
&input_select_narrow_card_mod do? … aha - a reference that can be re-used within a card - like a template - brilliant thanks
Seems you answered your own question, but just in case, there’s more here courtesy of Thomas Lovén, who’s behind card_mod and several other custom cards:
Hi Chris thanks so far … nearly there but I’m unused to shadow-root ~ shadow-dom selectors and the way you have (successfully) used selectors is not the way I’ve done it before in card-mod - I tend to use the browser inspect - copy the selector … which has failed me in this case
so to help, how would you mod the padding of the container (green) in which the input_select (yellow) is shown - mine is 16px atm - and I’d like 0px - many thanks
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.
Maybe something like this:
- type: horizontal-stack
cards:
- type: entities
card_mod:
style: |
div#states.card-content {
padding: 0px;
}
entities:
- entity: input_select.<your_input_select>
<your card_mod for the input select>
Can you please move your discussion to the card_mod thread. This one is about card_mod theme styling.
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 others the final yaml is:
type: custom:mod-card
card:
type: grid
columns: 8
square: false
show_title: false
cards:
- type: entities
entities:
- entity: input_select.room_mode
name: room
style:
ha-select:
$:
div.mdc-select.mdc-select--filled: |
div.mdc-select__anchor span.mdc-select__dropdown-icon {
margin-top: -20px !important ;
margin-left: 50px;
position: absolute;
} span.mdc-floating-label--float-above {
max-width: 100px !important;}
div.mdc-select__anchor span.mdc-line-ripple {
display: none;}
style: |
ha-card {
margin: 0px -39px 0px 0px !important;
padding: 0px !important;
height: 40px !important;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0,0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
}
div#states.card-content
{
padding: 0px !important;
margin: -12px -30px 0px -52px !important;
--card-mod-icon: none !important;
}
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.
@GoodyGizmos
Try this style to move a header to the bottom:
Updated 19.08.23
card-mod-root-yaml: |
.: |
.header {
top: calc(100vh - 60px) !important;
transform: unset !important;
}
.edit-mode .header {
top: calc(100vh - 104px) !important;
}
card-mod-view-yaml: |
:first-child $: |
ha-fab {
bottom: calc(16px + env(safe-area-inset-bottom) + 40px) !important;
}
.: |
hui-view {
transform: translate3d(0px,-56px,0px);
}
does not work at least in 2023.8
card-mod-root-yaml: |
.: |
app-header {
top: calc(100vh - 60px) !important;
transform: unset !important;
}
app-header:has(.edit-mode) {
top: calc(100vh - 104px) !important;
}
card-mod-view-yaml: |
:first-child $: |
ha-fab {
bottom: calc(16px + env(safe-area-inset-bottom) + 40px) !important;
}
.: |
hui-view {
transform: translate3d(0px,-56px,0px);
}
Not the most perfect solution - note a gap above cards in “edit” mode:
Thank you so much! This is working well for me in view and edit modes (no gap):
header-height: 48px
card-mod-root-yaml: |
.: |
app-header {
top: calc(100vh - 48px) !important;
transform: unset !important;
}
app-header:has(.edit-mode) {
top: calc(100vh - 94px) !important;
}
card-mod-view-yaml: |
:first-child $: |
ha-fab {
bottom: calc(16px + env(safe-area-inset-bottom) + 40px) !important;
}
.: |
hui-view {
transform: translate3d(0px,-48px,0px);
}
I’ve made sense of most of it except the first-child rule. What does that do?
Any idea why the cookbook method would no longer work for me?
Have no idea… I even do not remember when I checked Cookbook last time. Since HA is changing - probably some styles may stop working.
It stands for an element which may be different for a masonry view, panel view etc.
1 Like
I checked your version, there is a gap anyway above cards.
Also, in the “edit” mode no underlines are displayed for selected views.
i moved my navbar to the bottom using this:
card-mod-root: |
app-toolbar {
display: none;
}
header-height: "58px"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# Move navbar
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
app-toolbar {
padding-right: 0px;
padding-left: 0px;
}
}
ha-app-layout{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
height: 100% !important;
}
app-header {
top: auto;
bottom: 0;
box-shadow: var(--footer-shadow);
position: fixed;
height: var(--header-height) !important;
}
app-toolbar {
height: var(--header-height) !important;
padding: 10px 10px !important;
background: var( --ha-card-background, var(--card-background-color) );
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
--mdc-icon-size: 24px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top: 15px;
height:var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--google-blue);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 5px;
height: 32px;
padding: 0 20px;
}
giving me this:
however the backbutton of a subview doesn´t match the other icons. is there a way to move it?
had a bit of a back-and-forth between elements, to style a notification badge in the menu items:
a[data-panel='ui-familie'] paper-icon-item:after {
{% set count = states('sensor.family_home') %}
content: "{{count}}";
font-size: 11px;
padding: 0px 3px;
font-weight: bold;
left: calc(var(--app-drawer-width) - 42px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid var(--text-color-on);
background-color: {{states('sensor.presence_color')}};
color: var(--text-color-off);
line-height: 18px;
text-align: center;
}
is what I finally settled for, to have the same styling as my regular button-card notification balloons do:
styles_cf_notification:
styles:
custom_fields:
notification:
- border: 1px solid var(--text-color-on)
- border-radius: 12px #50%
- font-size: 11px
- font-weight: bold
- height: 18px
- line-height: 18px
- min-width: 12px
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
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.
anyways, this is what I have now:
also tried to set an image on a notification with:
a[data-panel='ui-overzicht'] paper-icon-item:after {
left: calc(var(--app-drawer-width) - 42px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid var(--text-color-on);
background-image: "{{state_attr('sensor.activity_summary','entity_picture')}}";
}
but that doesn’t work… maybe that is using too much from card-mod-theme 
now see the notification in the sidebar should not be styled according to the buttons in the dashboard, but to the core notifications styling…
o well, some experimenting ahead, lets find the resource for that.
update
core notification:
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
a[data-panel='ui-familie'] paper-icon-item:after {
content: "{{states('sensor.family_home')}}";
left: calc(var(--app-drawer-width) - 42px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
background-color: {{states('sensor.presence_color')}}; /*var(--accent-color);*/
line-height: 20px;
text-align: center;
padding: 0px 6px;
color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' else 'ivory'}}; /*var(--text-accent-color, var(--text-primary-color));*/
font-size: 14px;
}
which now seems much better:
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
As always, I appreciate any insight and advice. Thanks!!!
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.
card-mod-more-info-yaml: |
.: |
ha-dialog[data-domain="camera"] {
--mdc-dialog-min-width: 1280px !important;
}
ha-dialog {
--mdc-dialog-min-width: 760px !important;
}
2 Likes
I was searching for exact same thing…
Seems like data-domain=“camera” attribute is gone on ha-dialog
trying to put some styles in themes yaml.
But cant get this to work:
home_schmitz:
modes:
#Light
light:
background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-light.jpg") fixed'
primary-text-color: "#2c3b4b"
ha-card-border-color: "#d9d9d9"
## Custom values ##
--my-barcard-font-color: "black"
--my-customfield-info-border-color: "white"
# Dark
dark:
background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-night.png") fixed'
ha-card-border-color: "#454545"
## Custom values ##
--my-barcard-font-color: "white"
--my-customfield-info-border-color: rgb(217, 217, 217)
## Card Mod ##
card-mod-theme: home_schmitz
card-mod-card: |
ha-card.popup-head {
--name-font-size: 18px !important;
background-color: transparant !important;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
ha-card.popup-content {
font-size: 14px !important;
background-color: transparant !important;
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
ha-card.popup-custom-field-info {
box-shadow: none;
font-size: 14px !important;
border-color: var(--my-customfield-info-border-color) !important;
}
bar-card-contentbar {
color: var(--my-barcard-font-color);
}
the
–my-barcard-font-color: “black” Does work.
the
–my-customfield-info-border-color: “white” Does not work > is not defined…
I dont understand why.
Must be without underscores.
Font color does not work too - it becomes black by default.
1 Like