Macke
January 1, 2021, 11:19am
1241
How can I change the font size of the “secondary info”? Tried for hours now without any luck.
- cards:
- card:
type: entities
style: |
ha-card {
border-radius: 0px;
border: solid 0px rgba(255, 255, 255, 0.15);
font-size: 20px;
font-weight: bold;
background-color: rgba(207, 212, 199, 0.1);
}
filter:
include:
- entity_id: '*rorelselarm*'
options:
secondary_info: last-changed
- entity_id: '*motion*'
options:
secondary_info: last-changed
sort:
count: 10
method: last_changed
type: 'custom:auto-entities'
type: horizontal-stack
Try searching here.
How to change a font-size for Entities card:
[image]
type: entities
title: Size for title
card_mod:
style: |
ha-card .card-header {
font-size: 35px;
color: red;
}
entities:
- entity: sun.sun
name: Standard size
secondary_info: last-changed
- entity: sun.sun
name: Size for whole row
secondary_info: last-changed
card_mod:
style: |
:host {
font-size: 25px;
color: red;
}
- entity: sun.sun
name: Size for …
To change a style for all secondary_info’s - use this:
Styling Entities card.
(including some special row elements - button, section, divider)
NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
Colored background & rounded corners - can be easily achieved by using "--ha-card-background" & "--ha-card-border-radius" variables:
[image]
type: entities
title: Title
entities:
- entity: sun.sun
style: |
ha-card {
--ha-card-background: orange;
--ha-card-border-radius: 14px;
}
Using background image:
T…
1 Like
Macke
January 1, 2021, 11:54am
1243
Many many thanx…worked perfectly!!
olum
January 3, 2021, 1:26pm
1244
Thank you for that hint. Sometimes it is too easy.
alnavasa
January 4, 2021, 1:15pm
1245
Great post again, what about changing the padding/margin above and below an icon on this glances card?
This is a margin.
type: horizontal-stack
cards:
- type: glance
title: Margin
entities:
- entity: sun.sun
- entity: sun.sun
- type: glance
title: No margin
style:
.entities .entity:
$: |
state-badge {
margin-top: 0px;
margin-bottom: 0px;
}
entities:
- entity: sun.sun
- entity: sun.sun
1 Like
alnavasa
January 4, 2021, 10:01pm
1247
I really need to learn this things! THANKS AGAIN!
fra
January 4, 2021, 11:14pm
1248
Hi at all!
thanks a lot.
1 Like
KTibow
January 5, 2021, 2:12am
1249
Sure. Do you have themes set up?
fra
January 5, 2021, 2:58am
1250
Yes, i’ve a dark theme installed.
frontend:
themes: !include_dir_merge_named themes/
Please, could you point me to the right direction to solve??
Thanks a lot.
KTibow
January 5, 2021, 3:02pm
1251
Post your dark theme’s YAML file, I’ll edit it, paste it back in, restart HA, and it should be gone.
fra
January 5, 2021, 4:29pm
1252
This is my theme.
noctis:
# Fonts
primary-font-family: 'Raleway,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
# Main Colors
app-header-background-color: '#242e42'
accent-color: '#1A89F5'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
ha-card-border-radius: "5px"
border-color: 'none'
# Icons
paper-item-icon-color: '#EBEBEB'
paper-item-icon-active-color: 'var(--accent-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
alnavasa
January 5, 2021, 8:39pm
1253
Is it possible to remove an element from part of an inserted website
Bottom bar:
not that I don’t want to give them credit, is just that I am planing to make it even smaller, and the bar takes a lot of space.
KTibow
January 5, 2021, 8:45pm
1254
No website, Home Assistant, or otherwise, can go inside an iframe.
KTibow
January 5, 2021, 8:52pm
1255
noctis:
# Fonts
primary-font-family: 'Raleway,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
# Main Colors
app-header-background-color: '#242e42'
accent-color: '#1A89F5'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
ha-card-border-radius: "5px"
border-color: 'none'
# Icons
paper-item-icon-color: '#EBEBEB'
paper-item-icon-active-color: 'var(--accent-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
# Card-mod Theming
card-mod-theme: "noctis"
card-mod-root: |
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
1 Like
fra
January 5, 2021, 9:24pm
1256
Thanks a lot man!
KoenChiau
January 6, 2021, 2:00pm
1257
Dear friends,
I would appreciate any help with styling a glance card (within an auto-entities card).
My CSS navigation knowledge must be insufficient, as my attempts so far have been not successful. Please see the screenshot for my attempts.
Is anyone willing to help me out ?
Thank you in advance !!
Screenshot 2021-01-06 at 14.47.54|690x445
KTibow
January 6, 2021, 2:46pm
1258
Please paste code; I won’t rewrite all of that from your screenshot.
KoenChiau
January 6, 2021, 2:48pm
1259
- type: conditional
conditions:
- entity: group.lichten_en_smartplugs
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:button-card
template: my-blank-button-10px
- type: custom:auto-entities
show-empty: false
card:
type: glance
show_state: false
columns: 5
style: |
ha-card {
border-radius: 12px;
font-family: Helvetica;
font-size: 11px;
}
.entities.no-header {
padding: 8px 0px 0px 0px !important;
}
.entity {
margin: 0px !important;
}
.entity:
$: |
state-badge {
margin: 0px !important;
}
filter:
include:
- domain: light
state: "on"
options:
tap_action:
action: toggle
- domain: switch
state: "on"
options:
tap_action:
action: toggle
- type: custom:button-card
template: my-blank-button-10px
KTibow
January 6, 2021, 2:56pm
1260
Try this:
- type: conditional
conditions:
- entity: group.lichten_en_smartplugs
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:button-card
template: my-blank-button-10px
- type: custom:auto-entities
show-empty: false
card:
type: glance
show_state: false
columns: 5
style:
.: |
ha-card {
border-radius: 12px;
font-family: Helvetica;
font-size: 11px;
}
.entities.no-header {
padding: 8px 0px 0px 0px !important;
}
.entity {
margin: 0px !important;
}
.entity:
$: |
state-badge {
margin: 0px !important;
}
filter:
include:
- domain: light
state: "on"
options:
tap_action:
action: toggle
- domain: switch
state: "on"
options:
tap_action:
action: toggle
- type: custom:button-card
template: my-blank-button-10px
