This is wrong, shadowRoot-related styles cannot be inside the ā.:ā section.
Try using a STANDARD sidebar-layout.
This is not an option because i want to have the sections for dragān drop. Currently i use the custom card mod card with css to position it on the right side and all this inside a conditional card with a toggle helper. When the helper is on the sidebar appears. When its off it hidesā¦ Hope it makes senseā¦
Sections are in alpha testing now.
Thank you for your comment but it doesnāt help my question.
Both comments donāt. I asked if there is any way to push the interface to the left with card mod and i mentioned that i use a conditional sidebar. Your response was to use the standard sidebar. When i said that i use the sections your response is that it is testing (which i know). I donāt know what your comments have to do with my question. A simple ānoā would suffice.
When you asked your 1st question - you have not specified that you are using sections.
What you are trying to do - join together two worlds: working and well known (at least by experienced users) traditional approach and alpha-tested / buggy / limited sections approach.
Well, i am in a card-mod topic so my question is not about the sections (which are working perfectly BTW). Ok, so in case i wasnāt clear let me ask again. I have made a sidebar with the custom:mod-card and possitioned it to the left with CSS. It is wrapped in a conditional card with condition to appear on desktop (as i donāt want it on mobile view) and also if a specific helper is on. Here is the code for furhter understanding:
type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1024px)'
- condition: state
entity: input_boolean.show_interface_options
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
@media (min-width:100px) {
ha-card {
background: linear-gradient(180deg, rgba(39, 39, 39, 1) 11.2%, rgba(32, 36, 32, 01) 100%);
border-radius: 10px;
position: fixed;
top: var(--header-height);
z-index: 9;
right: 0px;
width: 25%;
height: 100%;
padding: 5px;
}
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Interface Options
- type: entities
entities:
- input_boolean.dashboard_automations
- type: divider
- input_boolean.show_location
- input_boolean.show_person_card
- input_boolean.show_notifications
- input_boolean.show_plex_button
- input_boolean.show_battery_information
- input_boolean.phone_control
- type: divider
- switch.tapo_c210_41a4_privacy
- switch.tapo_c210_41a4_auto_track
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(180deg, rgba(39, 39, 39, 0.93) 11.2%, rgb(32, 36, 32) 100%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
entity: input_boolean.show_interface_options
name: Hide Interface Options
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(145deg, rgb(195, 67, 129) 11%, rgb(90, 43, 186) 83.4%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
As it is, the card overlaps the interface and my question is, is there any way, either in the card itself or in the theme to make it push the inteface to the left?
Hope this time i was more clearā¦ This is a pure CSS question.
You are in a card_mod discussion, sort of, but itās not for individual cards. The thread discusses modding within an entire custom theme and not directly to lovelace cards. Page 1 explains it best!
The thread you are looking for is here with a vast CSS mod guide created by @Ildar_Gabdullin
1 Like
Right, but as i understand the CSS placed in the card affects the card itself which is somethimg that i dont want to do. This is why i didnt give much details about the card itself.
What i am looking for, is to adjust the view behind the card iāve made. Maybe this is possible through the themeā¦ I believe i am in the right place but as you suggest, i am gonna post my question also to the other thread.
Hi. I found something you typed on github a few years ago, regarding styling a broswer pop up card. I pasted some of your code below that you gave for the pop up box
I am desperate to figure out how to use a drop down menu that drops down further than the pop up menu.
Overflow: visible for example. But I cant figure it out, been at this for days lol. Can you please let me know if this is possible with card mod? Thank you in advance
style:
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 25px;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0.5);
--ha-card-background: rgba(0,0,0,0.5);
}
:host .content {
width: 90vw;
height: 90vh;
}
Someone see in this example a wrong Style Code?
My card_mod Style will be removed when i change something in the gui but he is working
- entity: input_boolean.heizperiode
name: Heizperiode
icon: mdi:thermostat-box-auto
- type: custom:mushroom-select-card
entity: input_select.advanced_heating_control_wohnzimmer_scheduler
name: Scheduler
icon: mdi:calendar-month-outline
layout: horizontal
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--card-primary-font-weight: normal;
margin-left: -13px;
mushroom-shape-icon
{
--shape-color: none;
--icon-color: #44739e;
}
}
I am trying to style the new Group Headers in automation view to be bigger so I can actually see them but I am having a bit of trouble. Does anyone know what i am doing wrong?
My Theme file:
skynet_dark_v2:
card-mod-theme: skynet_dark_v2
card-mod-view: |
.group-header {
font-weight: 800;
font-size: 18px;
color: #FFC10A;
}
Iām trying to add simple drop-shadow effect globally to all my Home Assistant cards via my custom theme file. For some reason, when I append ha-card { box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important; } to my card-mode code below, it has no visible effect. However, the other card-mod modifications work just fine. Is there a more effective way to do this?
card-mod-root: |
.edit-mode, app-header, app-toolbar {
background: var(--app-header-background-color) !important;
color: var(--primary-text-color) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
ha-card {
box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important;
}
Iām trying to change sidebar title while maintaining the style from my current theme (ios-dark-mode-dark-blue), but it always change to a default HA white theme. Something like this is possible?
my-theme:
card-mod-theme: "ios-dark-mode-dark-blue"
card-mod-sidebar-yaml: |
.: |
.menu .title {
display: none !important;
}
.menu:after {
content: "My Title";
margin-left: 16px;
}
wont cross-post the full discovery I did todayā¦
but I do like to post this snippet here, because I never realized we could list card-mod classes like this:
type: entities
title: Tijd
icon: []
card_mod:
class:
- class-header-margin
- class-header-icon
style: |
.card-header {
{% set up = states('sun.sun') == 'above_horizon' %}
--card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
--card-mod-icon: mdi:weather-sunset{{'-up' if up else 'down'}};
}
entities:
which is pretty cool, because with this, we can re-use those often used classes easily, and still have tailor made per-card settings if we need that. Without having to rewrite those in each and every card.
btw, this does Not work:
card_mod:
class: class-header-margin, class-header-icon
Could someone share a working transparent header and bottom please?
I tried the codes here, but still see a black status bar, and background colour when scrolling to bottom, the background seems to be scrolling and not fixed as defined.
Hereās my code in themes.yaml with kiosk-mode enabled:
card-mod-root-yaml: |
.header {
display: none;
}
#view {
padding: 0 !important;
height: 100vh !important;
padding-bottom: var(--header-height) !important;
}
# Background image
background-image: center / cover no-repeat fixed url(/local/img/bg/blur.jpg)
lovelace-background: var(--background-image)
# Header:
app-header-background-color: rgba(0, 0, 0, 0.1)
app-header-text-color: rgb(198, 203, 210)
app-header-selection-bar-color: rgba(0, 0, 0, 0.1)
app-header-edit-background-color: rgb(036, 036, 036)
Thanks
What Iām doing wrong?
my_theme:
card-mod-theme: my_theme
card-mod-card: |
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider {
--control-slider-thickness: 20px !important;
}
You need to use this. I added color to verify it is working.
card-mod-card-yaml: |
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
height: 20px !important;
--control-slider-color: lime !important;
}
Thanks, this is working and the slider is not that height anymore but the height of the container ha-control-slider stays the same. If we could change --control-slider-thickness it scales itself.
has anyone ever changed the response time of the tooltip on the view icons?
during recent beta, I realized they were a bit slow, and rather unreliable out of the box, so I tried setting the tools known to me to make them flashier. To no avail though.
normally in button-card or so, I use transition: opacity 0.5s and checking the dom I tried to set that to the ha-svg-icon element in the paper-tab, or just plain to it.
nothing happening. When I checked more precisely, I noticed the tooltip is only happening when actually ātouchingā the center of the tab, and thats seems to be happening when doing this:
paper-tab:hover {
transition: opacity 0.5s;
color: var(--primary-color);
background: var(--hover-color);
}
color and background work as designed (had those already), but again, adding the transition does nothingā¦
maybe anyone else has tried to do that, please let me know