Maybe try this instead? https://github.com/custom-cards/stack-in-card (itās on hacs too)
Would you mind helping me determine where I specify the configuration to remove the 8px padding shown here please?
I just canāt figure out what code to use and where, as seen with my attempt below.
- type: entities
show_header_toggle: false
style: |
ha-card {
padding: 0px;
border-radius: 0px;
height: 45px;
box-shadow: none;
background: none;
width: 80px;
}
.card-content {
padding: 0 0 0 0px;
}
entities:
- entity: input_datetime.test
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
div.padName {
display: none;
}
div.flex {
margin: 0px 0px 0px 0px;
}
paper-input-container:
$: |
#container {
padding: 0px;
}
Hereās more detail if it helps:
Hi Danny,
Can you tell me what Gauge you are using for the Nu,Vandaag and Totaal items?
Never seen those before
Regards Niels
Thanks Danny!
you have enquired about something like this recently, havenāt you?
Hereās what works for me (but it still looks a bit padded at the bottom despite having 0px padding)
entity: input_datetime.off_timer_started_light_1st_floor_landing
style:
paper-time-input:
$:
paper-input:
$: 'paper-input-container {padding: 0px}'
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
div.padName {
display: none;
}
div.flex {
margin: 0px 0px 0px 0px;
}
btw, your styling does not hide date in my case (Chrome) as I can see no padName
.
Hi Ahmad, yes I had a post in the button card thread but it was off-topic in there so thought Iād best post in here.
Thank you very much for your help by the way, youāve cracked it! I donāt know how or where you managed to work out that paper-time-input
and paper-input
were the right ones to use, but they work a treat, so thank you! I can finally rest now that my OCD of wanting the time vertically centred is fixed:
My datetime only has time enabled which may explain why itās different (using Chrome too).
I think I described it to someone recently. Just look at the HTML tree and find the next element that contains the thing you want to amend. try to add the attribute and see if if works. If not, step inside.
Of course, you need to know which attribute to try. Well, itās Google + some learning + personal experience.
Glad it works for you, enjoy it
damn 8[ - ]
Does anybody know if itās possible to use card-mod to add a style to #view?
I tried adding this to the top of my view, but no luck:
style: |
#view {
margin-left: 30px !important;
}
Donāt think so as card-mod is for styling cards. Happy to be wrongā¦
Is it possible to style the state-badge? Iāve been trying to remove that awful border-radius with every possible combination but I canāt get rid of it.
The first one is the default behaviour. The second one is what Iām trying to achieve.
but itās not a standard state badge (icon) - whatās your config for it?
Iām using image: ...
instead of icon:....
. However images get the circle borders.
so you donāt want to post the relevant config and want us to guess? ok then
Sorry, that was not my intention. At the time, I was replying through my phone.
Iāve tried the following:
# This is inside a "type: entities" block
- type: custom:slider-entity-row
entity: cover.living_room_shutter_left
image: /local/img/icons/shutter.svg
full_row: false
name: Esquerda
style: |
:host { # state-badge doesn't work either
border-radius: 0;
}
Also, styling in customize.yaml
:
cover.living_room_shutter_left:
entity_picture: /local/img/icons/shutter.svg
much better now.
I was unable to style the slider using card-mod so had to use mod-card.
This code works for me
type: custom:mod-card
style:
slider-entity-row:
$:
hui-generic-entity-row:
$: |
state-badge {border-radius: 0%}
card:
type: custom:slider-entity-row
entity: cover.living_room_shutter_left
image: /local/img/icons/shutter.svg
full_row: false
name: Esquerda
btw, you donāt have to use shutter.svg in both slider-entity-row
and cover.living_room_shutter_left
- I removed the latter and it worked as expected.
I am newer to home assistant so please bear with me. I have read lots of forums and documentation and cannot find this answer. I cannot get the title of an entities card to center. It is working fine on a glance card, is this by design? Or am I doing something wrong? Any help would be very much appreciated!
My code looks like this:
card:
cards:
- columns: 3
entities:
- entity: person.aaron
name: Aaron
- entity: person.kristin
name: Kristin
- entity: person.olivia
name: Olivia
show_icon: false
show_name: true
show_state: true
style: |
ha-card {
background: rgb(119, 136, 153)
}
ha-card {
color: white
}
ha-card {
padding: 8px;
border-bottom: 1px solid #ddd;
}
ha-card {
text-align: center;
}
title: Family
type: glance
- type: entities
title: Lights
entities:
- entity: light.downstairs_lights
- type: 'custom:button-entity-row'
buttons:
- entity: light.kitchen_light
name: Kitchen
state_styles:
'off':
color: white
- entity: light.dining_room_light
name: Dining Room
state_styles:
'off':
color: white
- entity: light.entryway_light
name: Entryway
state_styles:
'off':
color: white
style: |
ha-card {
background: rgb(119, 136, 153)
}
ha-card {
color: white
}
ha-card {
padding: 8px;
border-bottom: 1px solid #ddd;
}
ha-card {
text-align: center;
}
type: 'custom:vertical-stack-in-card'
style: |
ha-card {
background: rgb(119, 136, 153)
}
ha-card {
text-align: center;
}
type: 'custom:mod-card'