I think you may use:
card_mod:
style:
.....
as well as:
style:
.....
But for picture-elements only the 1st case works (as I understood).
Your case w/o indent is same as the 2nd case.
confirmed!
entities:
- type: custom:mod-card
style: |
ha-card {
margin: 0px -16px -16px -16px;
}
card:
type: map
style: |
ha-card {
box-shadow: none;
}
entities:
- zone.home
geo_location_sources:
- usgs_earthquakes_feed
default_zoom: 4
works fine.
@Ildar_Gabdullin would you know if we can style the header picture in this card, and have it fill (probably bottom-margin +24px) to get rid of the white space between it and the header bar (in my image the grey bar with āQuakesā)
1 Like
Marius, did you see that there is no wrong spaces in my example?
Even w/o mod-card.
Give me some time, I will research it a bit later, big OCR race coming tomorrow)
My goal was to have the map fill the full width.
But yes, I saw that, and it was like my setup without style too. However, when trying a style the Map shifted
type: conditional
conditions:
- entity: binary_sensor.service_on_value
state: 'on'
card:
type: 'custom:stack-in-card'
cards:
- type: entities
header:
type: picture
image: /local/images/blue_low_2.jpg
style: |
ha-card .header-footer.header {
margin-bottom: 0px;
}
title: Quakes
show_header_toggle: false
entities:
- binary_sensor.updater
- sensor.cleargrass_1_co2
- input_number.test_number
- type: entities
style: |
ha-card {
margin: -16px -16px -16px -16px;
}
entities:
- type: 'custom:auto-entities'
show_empty: false
entities:
- zone.home
card:
type: map
style: |
ha-card {
box-shadow: none;
}
default_zoom: 4
filter:
include:
- entity_id: device_tracker.life360*
card:
type: picture-elements
image: /local/images/plan_night.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- entity: switch.sonoff_10008c77a0_2
icon: 'mdi:fan'
type: state-icon
style: |
@keyframes spin-office-ac {
100% {transform: rotate( {% if is_state('switch.sonoff_10008c77a0_2', 'on') %} -360deg {% else %} 0deg {% endif %} )}
}
animation: spin-office-ac 1s linear infinite
'--iron-icon-height': 1.7vw
'--iron-icon-width': 1.7vw
'--paper-item-icon-active-color': '#E84D04'
'--paper-item-icon-color': rgb(28, 128, 199)
align-items: center
background-color: rgba(0,0,0,0)
border-radius: 100%
box-shadow: '0px 0px 30px 10px rgba(255,255,255,1)'
display: flex
justify-content: center
margin-left: '-1.5vw'
margin-top: '-1.5vw'
left: 14.3%
top: 54.5%
transform: scale(0.75)
width: 2vw
height: 2vw
tap_action:
action: toggle
hold_action:
action: call-service
service: browser_mod.popup
service_data:
deviceID:
- desktop
- sirocco
hide_header: true
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);
}
card:
type: vertical-stack
cards:
- type: markdown
content: >
# *Ventilation*
- type: horizontal-stack
cards:
- entity: switch.sonoff_10008c77a0_2
icon: mdi:fan
name: Ventilation
template: fan_button
type: 'custom:button-card'
- entity: group.bathroom_switch
icon: mdi:fan-plus
name: All switch
template: light_button
type: 'custom:button-card'
- type: markdown
content: >
***
Help me understand what is wrong here. Your example does not produce any result.
Thanks in advance
You are not using basic CSS syntax. You need to specify what element to apply
to.
How to do this with this example, I am confused in the documentation and cannot understand the essence
I already understood, thank you, I did it
I think your translator is broken.
I have try this. But then the hole view is yellow. What I wanāt is for example:
grid area sidebar: background-color >> yellow
grid area header: background-color >> blue
grid area footer: background-color >> green
views:
- title: testing
panel: false
path: testing
badges: []
type: 'custom:mod-card'
card:
type: 'custom:layout-card'
layout_type: grid
layout:
grid-template-columns: 25% auto 25%
grid-template-rows: null
grid-template-areas: |
"sidebar header header"
"sidebar main main"
"sidebar footer footer"
cards:
- type: button
tap_action:
action: toggle
entity: sensor.energy_production_tarif_1
show_name: true
show_icon: true
show_state: true
view_layout:
grid-area: sidebar
view_layout: {}
card_mod:
style: |
ha-card {
background-color: yellow;
height: 100%
}
Marius, check private messages )))
So, did you found a reason of āright marginā for your map?
I cannot reproduce this glitch.
Iām trying to supercharge the Picture glance card as this is my goto card for mainly rooms which have a lower level of devices and the picture glance card does a great job of providing info/control without being too busy.
However looking at the screen real estate the status/control bar and corresponding icons is too small and so I would like to make it bigger.
I had a look at the attributes of the picture glance card and canāt find anything to adjust this.
Can card-mod be used to adjust the status bar/icons?
Answer is - yes, card-mod can do it. Search here, look for āpicture glanceā.
1 Like
Ok great. Txs. Was looking for this for at least a week. Looks like I have to adjust div.box. So am I able to use any CSS here? For the height I probably would have to change the height; e.g.
div {
height: 10%;
}
right?
How do I access the entities? CSS stretches my abilities quite a lot so hopefully this question is not too basic
At the moment i try something simple.
Better i should say, i tought it would be simple 
I have a Entities-Card in an Custom-Button-Card and tried to remove the box-shadow from the entites card.
For that i used the following coding:
type: 'custom:button-card'
entity: light.virtual_l01
name: Rolladen
show_name: false
show_icon: false
aspect_ratio: 5/1
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"cf_test "'
- grid-template-rows: 1fr
- grid-template-columns: 1fr
card:
- padding: 0%
custom_fields:
cf_test:
card:
type: entities
style: |
ha-card {
box-shadow: none;
}
entities:
- entity: light.virtual_l02
tap_action:
action: none
show_header_toggle: false
entities:
- entity: light.virtual_l02
The Problem i have is, the border of the entites-card is shown 1 second and than it disappears.
Is this an error from how i implmented it? Or is it not possible to achieve it instant?
Thx for help
Found the rich resource for the picture glance card (and others) here š¹ Card-mod - Add css styles to any lovelace card - #1689 by Ildar_Gabdullin
Iāve been able to make good progress with this guide. Where Iām stuck is the positioning of the states (not centered and too high) and the title (not centered). Had a look at the examples in above URL and couldnāt find anything other than colors or wrapping.
Code
type: grid
cards:
- type: picture-glance
style:
.: |
ha-card {
--mdc-icon-size: 60px;
}
ha-card > div.box {
background-color: rgba(0, 0, 0, 0.6);
height: 10%;
font-size: 40px;
}
ha-card > div.box div ha-icon.state-on {
fill: var(--paper-item-icon-active-color);
}
.box .row: |
.wrapper {
width: 88px !important;
}
.wrapper ha-icon-button {
align-self: center;
}
.wrapper .state {
font-size: 20px;
}
title: Bath
image: /local/bathroom.jpg
aspect_ratio: '1.65'
entities:
- entity: sensor.xiaomi6846_temperature_bath
show_state: true
- entity: sensor.xiaomi6846_humidity_bath
show_state: true
- entity: switch.deta02_light_bath
show_state: true
- entity: switch.deta02_fan_bath
show_state: true
columns: 1
square: false
What do you want to achieve?
Use MS Paint or smth to describe it.
