Try āborder: noneā (have not check other things)
Unfortunately, that makes no difference.
You have to use Code Inspector & learn CSS a little - using card-mod is not just ācopy / pasteā things ((((((
step by stepā¦
Iāll try it. If I donāt find out, Iāll get back to you later (at some point).
quick question, what I did now was mod the css of the div element inside the markdown, but how do you style a certain div class instead of all divs? because future wise it would be nice if I can still decouple this from other divs by giving it a class instead of just using the default <div>
My markdown card-mod code now:
card_mod:
style:
ha-markdown $: |
ha-markdown-element div {
max-width: 350px;
height: auto;
padding: 5px;
background-color:
{%- set sensor = states('sensor.hvc_hvc_afval_kalender_morgen') %}
{%- set sensor2 = states('sensor.hvc_hvc_afval_kalender_vandaag') %}
{%- if sensor == 'gft' and sensor != 'restafval' and sensor != 'pmd' and sensor2 != 'papier' %} rgba(0,170,0,0.9);
{%- elif sensor == 'restafval' and sensor != 'gft' and sensor != 'pmd' and sensor2 != 'papier' %} rgba(94,94,94,0.7);
{%- elif sensor == 'pmd' and sensor != 'gft' and sensor != 'restafval' and sensor2 != 'papier' %} rgba(255,85,0,0.9);
{%- elif sensor2 == 'papier' and sensor != 'pmd' and sensor != 'restafval' and sensor != 'gft' %} rgba(0,0,255,0.7);
{%- else %}
{%- endif %}
border-radius: 7px;
}
.: |
ha-markdown {
padding-right: 4px !important;
}
ha-card{background: rgba(0,0,0,0.7); }
As Ildar said. Always try to open developer tools and look where the value is defined, which you want to change.
You can directly see, that it is on hui-entities-card level in node ha-card. So you have to adjust it there.
- type: custom:hui-element
card_type: entities
card_mod:
style: |
ha-card { box-shadow: none !important }
entities:
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.aber
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
.card-header {
background-color: var(--primary-background-color);
}
.: |
ha-select {
height: 40px;
width: 120px;
}
ha-card {
box-shadow: none !important;
}
style:
top: 80%
left: 50%
width: 200px
I looked there too. Do I have to fumble myself. Unfortunately it doesnāt work either.
1st attempt (may be not 100% tested), compare with your code:
Replace āborder: 1px solid red;ā with āborder: none;ā
code
type: picture-elements
elements:
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.test_value
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-select {
height: 40px;
}
card_mod:
style: |
ha-card {
border: 1px solid red;
}
style:
top: 50%
left: 50%
width: 200px
image: /local/images/test/white.jpg
type: picture-elements
elements:
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.aber
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-select {
height: 40px;
}
card_mod:
style: |
ha-card {
border: 1px solid red;
}
style:
top: 70%
left: 50%
width: 200px
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.aber
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-select {
height: 40px;
}
card_mod:
style: |
ha-card {
border: none;
}
style:
top: 85%
left: 50%
width: 200px
EDIT
I tested it with border: 1px rgba(0,0,0,0) instead of red. But then it looks the same as before.
I just wanted you to know I finally found what you were referring to. In order for it to work, I have to first specify a custom class name I.E., āclass_0ā in my stack-in-card codeās that I wish to target:
cards:
- entities:
- entity: sensor.titan_download_speed
icon: mdi:speedometer
name: Download Speed
- entity: sensor.titan_upload_speed
icon: mdi:speedometer
name: Upload Speed
type: entities
- aspect_ratio: 56%
camera_view: live
entity: camera.desktop
show_state: false
type: picture-entity
title: Server
type: custom:stack-in-card
card_mod:
class: class_0
In theme.yaml:
card-mod-card-yaml: |
$: |
ha-card.class_0 {
padding-top: 0px !important;
}At least in Chrome it works:
What browser do you use?
Not supposed to work, ha-card cannot be here.
Chrome and Firefox on Android.
The same for both.
Tomorrow I can test on Windows.
So like below? I am trying to follow the class examples you pointed me to which had ha-card.class_0 in the example. Maybe you wouldnāt mind just telling me instead of going back and forth? 
card-mod-card-yaml: |
$: |
class_0 {
padding-top: 0px !important;
}
For this I will have to do all the job)))
Already gave you a link to classes. There are READY examples for headers there.
I am looking at the classes/header section example currently that you suggested. Based on that, is the below correct for my theme.yaml?
card-mod-card-yaml: |
$: |
ha-card.class_0 .card-header {
padding-top: 0px !important;
}
Cardcode:
cards:
- entities:
- entity: sensor.titan_download_speed
icon: mdi:speedometer
name: Download Speed
- entity: sensor.titan_upload_speed
icon: mdi:speedometer
name: Upload Speed
type: entities
- aspect_ratio: 56%
camera_view: live
entity: camera.desktop
show_state: false
type: picture-entity
title: Server
type: custom:stack-in-card
card_mod:
class: class_0
Thank you for your patience!
Do not think so, this path is definitely wrong - āha-card.class_0 .card-headerā.
Use Code Inspector.
Please see my code inspector screenshot below after I added class_0 to my stack-in-card code. I am still struggling to figure out the path based on what I see in code inspector. If Iām wrong again, maybe you could give me some hints that could help me do the correct path based on my screenshot (to know what to look for).
card-mod-card-yaml: |
$: |
class_0 type-custom-stack-in-card .card-header {
padding-top: 0px !important;
}
or maybe
card-mod-card-yaml: |
$: |
class_0.card-header {
padding-top: 0px !important;
}
Starting this night I am far away from any civilian PC for at least a week, so can only suggest:
1st post ā link at the bottom ā other stuff ā hints about navigating
There you will find info how to define a path.
You need to understand it.
And once again: my example with classes is exactly about headers; since you need to style āstack-in-cardā only - you do not need invent new classes like āclass_2ā etc, address to ā.type-custom-stack-in-cardā.
Check examples of Thomas in ReadMe for styling classes; this is for understanding that this method only works for non-shadowRoot elements. But you need to access shadowRoot element ā.card-headerā. So use a trick with defining variables on a non-shadowRoot level - and then using this variable on the shadowRoot level.
Hi Š°nd thanks again for the response. I was using the below configuration but it wasnāt giving me the desired result, I canāt explain why. Could it be a not cleared cache issue, although Iām pretty sure that I had cleared it multiple times and used both browsers, Chrome and Firefox. Itās really strange. Now it works. ŠŠ»Š°Š³Š¾Š“Š°ŃŃ.
style: |
.horizon-card-header {
margin-top: 0px !important;
}
.horizon-card-graph {
margin-top: 5px !important;
margin-bottom: -20px !important;
}
.horizon-card-footer {
margin-bottom: 0px !important;
}
.horizon-card-footer > * {
margin-top: 8px !important;
}
.horizon-card-field-name {
font-size: .8rem !important;
}
.horizon-card-field-value {
font-size: .9rem !important;
}
ha-card {
--ha-card-background: transparent;
box-shadow: none;
}