Thank you. This worked:
card-mod-card-yaml: |
$: |
.card-header {
padding-bottom: 0 !important;
}
This style is applied to all cards with “.card-header” inside shadowRoot, not to “stack-in-card” only.
I tried my best. I’m not sure how to specify only stack-in-card.
just wanted to say thank you for all these examples and posts here which eventually (after several hours of reading and searching, brought me to the correct fix for what I wanted for the markdown card 
(see pastebin for the code I used: https://pastebin.com/v8aAqVYa)
I gave you a link how to style classes.
Statistics graph: replacing a label
Consider a Statistics graph with ONE selected line (let it be MAX):
If you do not like this “max” word - the label can be w/o it, any text may be specified here:
code
type: statistics-graph
entities:
- sensor.xiaomi_cg_1_temperature
stat_types:
- max
card_mod:
style:
.content statistics-chart $ ha-chart-base $: |
.chartLegend li .label {
font-size: 0px;
display: flex;
}
.chartLegend li .label:before {
color: var(--secondary-text-color);
content: "any text";
font-size: var(--mdc-typography-body1-font-size,1rem);
}
2 Likes
Hello,
I have the following “picture entity”:
type: picture-elements
elements:
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.aber
style:
top: 80%
left: 50%
width: 200px
image: /cards/roborock.png
Now I would like to remove everything and just keep the text from the dropdown and the arrow.
It should only look like text that you can fold out.
Unfortunately, I’m completely at the end of my rope.
Already told you where to start: 1st post → link at the bottom → styles for input-select (how to style the row).
Suggest you to start testing with a simple input_select inside Entities card, not for complex cases like “input-select inside hui-element inside Picture elements”.
I read through the things. however, I have absolutely no knowledge of css. That then in connection with the google translator makes it very difficult for me (my English from school is very dusty).
I’ll keep testing.
Made it this far now. A colleague helped me.
Now we only fail because of the shadow.
We actually thought we would have removed that too.
- 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-card {
border: 0px;
background: none;
box-shadow: none;
}
.card-header {
background-color: var(--primary-background-color);
}
.: |
ha-select {
height: 40px;
width: 120px;
}
style:
top: 80%
left: 50%
width: 200px
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;
}