Unclear, what do you want? Post an MS Paint picture.
Hi, Iām building a floorplan with ha-floorplan and have completed the floorplan element but now want to overlay it with some entities, e.g. temperature gauge or auto-entities. Iāve been searching how to do this and trying different things with card-mod for a few days but Iāve come to a brick wall each time. Iām simply confused by the css and where it needs to go.
Rather than paste my many failed attempts of code, can someone please point me to a very basic example of one card overlaying another, that I can try to understand and then build on please?
All the examples Iāve found so far are too specific for other needs.
Thanks, Matt
Iām trying to make the outer border of a badge larger. Iāve managed to pin down in the inspector where the value is defined within the CSS, however I havenāt been able to figure out how to implement it using card mod.
Hopefully the picture is clear enough and I havenāt cropped it too poorly. This is what Iām trying to achieve.
My best guess is that Iām somehow not defining the containers correctly. The current code (that isnāt working):
- type: custom:badge-card
badges:
- entity: sensor.eetstatus_0
name: ''
card_mod:
style: |
:host {
--label-badge-background-color: rgba(0, 0, 0, 0.85);
{% set sens = 'sensor.eetstatus_0' %}
{% set eetst = state_attr(sens,'eetlijst_entry') %}
{% if eetst == None %}
--ha-label-badge-label-color: black; --label-badge-red: #f7f5f5;
{% else %}
{% if eetst < 0 %} --label-badge-red: #377330; {% elif eetst > 0 %} --label-badge-red: #bd1313; {% elif eetst == 0 %} --label-badge-red: slategrey; {% endif %}
{% endif %}
--ha-label-badge-size: 75px; }
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container
.label-badge {
border: 0em solid;
}
Without checking the dom, etc., at least this structure and | is missing.
ā
card_mod:
style:
.: |
:host {
... }
ha-state-label-badge:
$:
ha-label-badge:
$: |
After playing around with this further, it appears to be prioritising the initial CSS/Styles first then overlaying the updated card-mod styling which cases the weird flash behaviour.
In my config.yaml file I also put the following to see if it would prioritise the load but it has not worked.
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
Anyone know what I can do to help fix this? Seems I am driving myself mad. I have added an issue here also.
Slowed down example:
As already replied there. Search and play around with disabling transition css properties.
Thanks for the heads up re correct place for posting.
Just looked at the CSS and donāt believe this is a transition issue, although it appears to load like one.
My hypothesis is, the page loads with the initial CSS and quickly the Card-Mod styling kicks in which moves everything in place, making it look somewhat animated. The initial CSS looks like it is prioritised.
If you wanted to test and out of interest, does this same behaviour appear for you from this code? * Do excuse the mess, I am focused on getting this loading right before committing to any more styling
title: Living Room Tablet
views:
- path: room-controls
title: Room Controls
type: panel
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
style: |
ha-card {
padding: 0px 20px 0px 25px!important;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Room Controls
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px!important;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 30px!important;
font-weight: 505!important;
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bathroom_temperature
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: end
style: |
.chip-container {
padding-top: 22px;
padding-right: 0px;
}
ha-card {
--chip-box-shadow: none!important;
--chip-background: none!important;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Lighting
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 0px 0px 20px;
letter-spacing: -0.05vw!important;
}
.title {
font-size: 18px!important;
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lamp
layout: horizontal
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.living_room_side_lamp
layout: horizontal
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.dining_table_lamp
layout: horizontal
show_brightness_control: true
collapsible_controls: true
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Scenes
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 40px 0px 20px;
letter-spacing: -0.05vw!important;
}
.title {
font-size: 18px!important;
- type: custom:swipe-card
parameters:
grabCursor: true
slidesPerView: 3
spaceBetween: 12
navigation: null
cards:
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- theme: ''
path: climate
title: Climate
type: panel
badges: []
cards:
- type: custom:mod-card
style: |
ha-card {
padding: 0px 30px 0px 30px!important;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Room Controls
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 25px 0px 40px!important;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 33px!important;
font-weight: 510!important;
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bathroom_temperature
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: end
style: |
.chip-container {
padding-top: 27px;
padding-right: 0px;
}
ha-card {
--chip-box-shadow: none!important;
--chip-background: none!important;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Lighting
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 0px 0px 20px;
letter-spacing: -0.05vw!important;
}
.title {
font-size: 18px!important;
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lamp
layout: horizontal
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.living_room_side_lamp
layout: horizontal
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.dining_table_lamp
layout: horizontal
show_brightness_control: true
collapsible_controls: true
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Scenes
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 40px 0px 20px;
letter-spacing: -0.05vw!important;
}
.title {
font-size: 18px!important;
- theme: ''
path: tv-controls
title: TV Controls
type: panel
badges: []
cards:
- type: custom:mod-card
style: |
ha-card {
padding: 0px 30px 0px 30px!important;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: TV Controls
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 35px!important;
font-weight: 520!important;
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bathroom_temperature
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: end
style: |
.chip-container {
padding-top: 0px;
padding-right: 0px;
}
:host {
--chip-background: none!important;
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.bedside_lamps
- theme: ''
path: entertainment
title: Entertainment
type: custom:grid-layout
layout:
width: 100%
padding: 0px 15px 0px 15px
card_margin: 4px 4px 8px
badges: []
cards:
- type: custom:mushroom-title-card
title: Room Controls
style:
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px!important;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 30px!important;
font-weight: 505!important;
- type: custom:mushroom-title-card
title: Room Controls
style:
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px!important;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 30px!important;
font-weight: 505!important;
- type: custom:mushroom-title-card
title: Room Controls
style:
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px!important;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 30px!important;
font-weight: 505!important;
- type: button
tap_action:
action: toggle
entity: light.living_room_lamps
- theme: ''
path: audio
title: Audio
type: sidebar
badges: []
cards:
- type: custom:mushroom-title-card
title: Audio
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: media_player.bedroom_homepod
state: playing
card:
type: custom:mushroom-media-player-card
entity: media_player.bedroom_homepod
show_volume_level: false
use_media_info: true
volume_controls:
- volume_mute
- volume_set
fill_container: false
media_controls:
- previous
- play_pause_stop
- next
- shuffle
- repeat
name: HomePod
layout: horizontal
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 0px;
position: absolute!important;
bottom: 0px;
border-top: 0px;
left: 0px;
width: 100%;
}
- type: markdown
content: The balcony door is open
- square: true
columns: 4
type: grid
cards:
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: custom:swipe-card
parameters:
grabCursor: true
slidesPerView: 3
spaceBetween: 12
navigation: null
cards:
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: picture
image: /local/images/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- theme: Backend-selected
type: panel
path: system
title: System
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
style: |
ha-card {
padding: 0px 30px 0px 30px!important;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: TV Channels
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 25px 0px 40px!important;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 33px!important;
font-weight: 510!important;
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bathroom_temperature
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: end
style: |
.chip-container {
padding-top: 27px;
padding-right: 0px;
}
ha-card {
--chip-box-shadow: none!important;
--chip-background: none!important;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Favorites
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 10px 0px 30px;
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 7px;
letter-spacing: -0.05vw!important;
}
.title {
font-size: 20px!important;
- type: grid
square: false
columns: 4
cards:
- type: custom:button-card
entity_picture: >-
https://raw.githubusercontent.com/Jasmeet181/mediaportal-uk-logos/master/TV/.Light/BBC%20One%20HD.png
show_entity_picture: true
aspect_ratio: 2/1
size: 50px
- type: custom:button-card
entity_picture: >-
https://raw.githubusercontent.com/Jasmeet181/mediaportal-uk-logos/master/TV/.Light/BBC%20News%20HD.png
show_entity_picture: true
aspect_ratio: 2/1
size: 50px
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
- type: custom:button-card
icon: mdi:air-conditioner
aspect_ratio: 2/1
size: 30px
Hi all,
Iām newbie of this fantastic tool. Iām struggling for days trying to center a div in the card.
Please find below the HTML code and my last test.
Any help on this will be very appreciated because this is driving me nuts. 
Many thanks in advance.
Roberto
type: custom:stack-in-card
card_mod:
style:
.: |
ha-card {
--ha-card-background: silver;
opacity: 0.8;
padding: 25px
}
mode: vertical
keep:
background: true
cards:
- type: custom:mod-card
card:
type: energy-date-selection
card_mod:
style: |
hui-energy-period-selector$: |
div.period {
justify-content: center;
}
Shorter version.
views:
- theme: Dashboard
title: Home
type: custom:grid-layout
badges: []
cards:
- type: markdown
content: |
# Room Controls
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 50px;
font-size: 50px;
}
ha-markdown:
$:
ha-markdown-element: |
table {
width: 100% important!;
font-size: 50px;
}
Did anyone succeed in changing styles for #tabsContainer element?
Iām trying to enable momentum scrolling for top menu (View selector).
Obviously Iām trying to achieve that using my HA theme, which modifies some menu element already (hiding chevrons etc)
Go to card-mod Github issues, there are ~2-4 of issues about markdown - everywhere people repeat the same error.
That might be these case however this is issue is not just isolated to the markdown card, this is present for all cards that I apply card-mod too. As above it looks like itās prioritising the main home assistant theme first and milliseconds later the card mod styling is kicking in, causing it to do a weird flash your animation.
This is standard. But most of the time, you only see it, because of the transition, Iāve already mentioned.
Iāve persevered and tried a bit of a proof of concept. I still havenāt been able to find any clear basic instructions but Iāve done a bit more reading about CSS positioning and have managed this work in progressā¦
My code (in a panel) is below, I know it can be improved quite a bit. Can anyone spot any obvious improvements?
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:floorplan-card
style: |
:host {
position: absolute;
width: 100%;
height: 100%;
top: -30px;
left: 0;
z-index: 0;
}
config:
image: /local/floorplan/seven/floorplan7.svg
stylesheet: /local/floorplan/seven/floorplan7.css
console_log_level: debug
defaults:
hover_action: hover-info
rules: null
- type: gauge
entity: sensor.pws_temp
card_mod:
style:
.: |
ha-card {
background-color: transparent;
position: relative;
z-index: 2;
}
- type: custom:layout-break
- type: custom:gap-card
- type: custom:layout-break
- type: custom:mini-media-player
entity: media_player.study
group: true
volume_stateless: true
toggle_power: false
artwork: none
background: transparent
card_mod:
style:
.: |
ha-card {
background-color: transparent;
z-index: 2;
}
card_mod:
style:
.: |
ha-card {
position: relative;
background-color: transparent;
}
But in your code I also see a potential problem described in those issues I told about.
This is about styling a markdown.
Transition issue - is another one, it MAY BE reduced by kind of ātransition: noneā style.
Thank you.
I have spent most of today restructuring the pages and embedding most of the styling within āthemeā file. I * think * this is loading better and a better structure to build from.
I have changed the markup to the Mushroom Title card. The tree elements were easy to add to the āthemesā file
# Titles
mush-title-padding: 0
mush-title-font-size: 30px
mush-title-font-weight: 505
The final piece of the jigsaw I am trying to figure out is is how to add some letter-spacing: to my title.
Within the title component, I tried adding the following - along with a few other ways.
card_mod:
style:
mushroom-title-card$: |
.header {
letter-spacing: -0.12vw!important;
If I look at Chrome, if I add letter-spacing: -0.12vw in the .title section, it works. I am just not sure the code to add to my component.
In type custom:fold-entity-row, Iād love to be able to change the size of the text, āExterior Lightsā (which is the friendly name of group.exterior_lights), as well as remove the icon. Iāve looked through and havenāt found a way to do that.
type: entities
title:
entities:
- type: custom:fold-entity-row
head:
entity: group.exterior_lights
open: false
clickable: true
icon: null
entities:
- entity: switch.front_porch_lights
secondary_info: last-changed
style: |
:host {
font-size: 14px;
color: white;
}
- entity: switch.garage_exterior_front_light
secondary_info: last-changed
style: |
:host {
font-size: 14px;
color: white;
}
- entity: switch.rear_exterior_lights
secondary_info: last-changed
style: |
:host {
font-size: 14px;
color: white;
}
- entity: switch.garage_side_light
secondary_info: last-changed
style: |
:host {
font-size: 14px;
color: white;
}
style: |
ha-card {
--ha-card-background: rgba(7, 103, 215, 0.24);
}
Any advice? is there anyone able to help me or lead me in the right direction?
Many thanks in advance.