I gave you the link, there is only one link to a post, one “entities” section in the post
Sorry I am not able to find it how to change style of entity type section. Anyone else who can give me a hint with yaml code?
-
Have you found this Entities section?
-
It has a link - this link
-
Scroll this post for the section style.
1 Like
I am trying to get these cards transparent, but all I get is a white box. Can someone point me in the right direction? And if there is a base line tutorial on how to configure some of this CSS that you would recommend, I would appreciate it.
views:
- title: Home
background: center / cover no-repeat fixed url('http://picsum.photos/1280/720?random')
type: custom:grid-layout
layout:
max_cols: 3
grid-template-columns: 426px 426px 426px
grid-template-rows: 720px 720px 720px
cards:
- type: vertical-stack
cards:
- type: custom:digital-clock
card_mod:
style: |
ha-card {
color: black;
height: 200px;
font-size: 30px;
border-style: none
background: transparent
}
- type: custom:gap-card
card_mod:
style: |
ha-card {
height: 120px;
border-style: none
}
- type: custom:atomic-calendar-revive
card_mod:
style: |
ha-card {
height: 240px;
border-style: none
background: transparent
}
name: null
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 300
maxEventCount: 5
refreshInterval: 60
showLocation: false
showMonth: true
entities:
- calendar.ical_home
card_mod:
style: |
ha-card {background: transparent
}
- type: custom:gap-card
height: 200
- type: vertical-stack
cards:
- type: weather-forecast
card_mod:
style: |
ha-card {
height: 240px;
background: transparent
border-style: none
}
entity: weather.home
show_forecast: true
forecast_type: legacy
Have checked this code in Code Inspector by yourself?
Have you seen all styles applied in Code Inspector (i.e. not scratched out, w/o errors etc)?
Or this was just copy/pasted from somewhere?
I believe you need to properly close out the background line like this…
card_mod:
style: |
ha-card {
height: 240px;
background: transparent !important;
border-style: none;
}
1 Like
Whats Code Inspector ?
I was missing the semicolons at the end of the lines.
Immediately fixed it… Thanks for the tip…
Any suggestions how how to make a 20% opaque - or whatever - to make the text more readable on any image?
You can add color, font size and weight to start
card_mod:
style: |
ha-card {
height: 240px;
border-style: none;
background: transparent !important;
color: red !important;
font-weight: 500;
font-size: 1.1em;
}
It’s a tool to check are your styles applied or not.
Part of a browser.
In Chrome/FF it is called by F12.
2 Likes
You don’t have to go straight to a transparent background. This example dims a green back ground using rgba with the last value being the opacity (0.2)
card_mod:
style: |
ha-card {
height: 240px;
border-style: none;
background: rgba(60, 179, 113, 0.2) !important;
color: white !important;
font-weight: 700 ;
font-size: 1.1em;
}
This is a great starting point for understanding basic CSS
1 Like
How to change color Up Down of input_number.
You’ll need to post the card code so it’s easier for folks to assist you.
This is my card for testing
type: entities
entities:
- entity: input_number.index_when_play_repeat_music
card_mod:
style: |-
:host {
–paper-item-icon-color: lime;
color: lime;
}
ha-textfield {
–mdc-text-field-idle-line-color: green;
–mdc-text-field-hover-line-color: red;
–mdc-text-field-outlined-idle-border-color: blue;
–mdc-text-field-fill-color: rgba(82, 22, 8, 0.2);
–mdc-text-field-ink-color: lime;
–mdc-text-field_input: red;
}
Found it, thanks.
This is what I used:
- type: section
label: Water Sensors
card_mod:
style: |
.divider {
display: none;
}
Yes, but bottom lines are because of Edit mode, they are not there when you save the change and exit Edit mode. Or Wait, it is not edit mode, I do not see bottom lines in my case.
No, I do not mean lines caused by Edit mode…
Check the last section line.
Your case cannot simulate the hidden issue.
No, you missed the point. But this is probably not important for your setup.