und wo steht denn die Alexandria? haha iwie finde ich es auch nicht im Code… 
Der Sensor wird in deiner sensors.yaml Datei eingefügt. Solltest du die Config nicht gesplittet haben, kannst du diesen auch in deiner configuration.yaml einfügen.
Nach dem Neustart kannst du den Wert des Sensors über ein Jinja-Template überall einfügen wo du es möchtest
"{{ states('sensor.welcome_begruessung') }}"
Schriftarten kannst du über unterschiedliche Möglichkeiten in HA Einbinden. Hier ein Video dazu:
1 „Gefällt mir“
ja einen sensor habe ich eingefügt 
Aber er macht mir nichts… ist die stelle denn richtig?
Wenn er über den Button Cards sein soll?
Bin ich blind, oder steht dein sensor nicht im yaml code oben?
views:
- title: Test
type: sections
sections:
- type: grid
"{{ states('sensor.begrussung_tablet') }}"
cards:
- type: custom:bubble-card
card_type: separator
- type: custom:mini-media-player
entity: media_player.unnamed_room
Ach hab grad nen Denkfehler…
Vergiss es😂
Hab jetzt einen mushroom Template Card mit dem Sensor erstellt.
Wo genau positioniere ich es dann in meinem Code?
Muss ich noch mit Margin-Top etc arbeiten um es an die korrekte Stelle zu ziehen?
Gruß
Heyho zusammen,
ich habs bestimmt übersehen, bitte verzeiht mir daher die Frage.
Wenn ich deinen Code oben so kopiere und alle HACS Sachen installiere, dann fehlen mir aber immer noch alle Bilder und Icons, korrekt?
Findet man die irgendwo oder wo hast du die denn her @SmartBuddy
Ich mach das zum ersten Mal und muss mich erstmal in das Thema Dashboard einarbeiten.
Im Startpost steht:
Die Icons sind von „Streamline-Icons“
In Post 18 heißt es zu den Icons:
Die Icons sind teilweise von mir selbst erstellt oder kostenpflichtig lizensiert. Hier müsstest du leider selbst auf die Suche gehen.
Bei den Hintergrundbildern bin ich auch überfragt, aber da kann man durchaus im Netz genug alternativen finden.
1 „Gefällt mir“
@SmartBuddy Respekt für dieses schöne und geniale Dashboard. Welches Theme benutzt du? Hast du es selbst gemacht oder hast du eine Vorlage benutzt? Kannst du es uns vielleicht zur Verfügung stellen?
1 „Gefällt mir“
@SmartBuddy, design technisch wirklich sehr gelungen. Könntest du die “Welcome page” noch teilen, die finde ich nicht in dem bisheigem yaml code.
vielen Dank.
2 „Gefällt mir“
hey zusammen
gibt es irgendwas neues bezgl. der Welcome PAge`?
Hey, sorry für die Verzögerung. Hier ist der aktuelle YAML Code für die Welcome Page.
theme: Backend-selected
title: Welcome
path: welcome
background: 0px / cover no-repeat fixed var(--welcome-screen-img-bg)
subview: false
type: custom:grid-layout
layout:
grid-template-columns: 24px 1fr 1fr 1fr 1fr 24px
grid-template-rows: auto
grid-gap: 16px
grid-template-areas: >
". welcome_kueche_chips welcome_kueche_chips welcome_kueche_chips
welcome_kueche_chips ."
". wk_stats wk_stats wk_stats wk_stats ."
". wk_pop1 wk_pop1 wk_pop2 wk_pop2 ."
". wk_pop3 wk_pop3 wk_pop4 wk_pop4 ."
". wk_pop5 wk_pop5 wk_pop6 wk_pop6 ."
". wk_pop7 wk_pop7 wk_pop8 wk_pop8 ."
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.abfall_heute_aktiv
state: "off"
- entity: binary_sensor.abfall_morgen_aktiv
state: "off"
chip:
type: template
icon: mdi:recycle-variant
content: ""
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_abfall_termine
data:
browser_id: THIS
card_mod:
style: |
ha-card {
--chip-text-color: var(--primary-text-color);
--chip-icon-color: var(--primary-text-color);
--chip-background: var(--card-background-color);
--chip-border-color: var(--divider-color);
}
- type: conditional
conditions:
- entity: binary_sensor.abfall_morgen_aktiv
state: "on"
chip:
type: template
icon: >-
{{ state_attr('sensor.abfall_nachster','icon') |
default('mdi:trash-can-outline', true) }}
content: >-
Morgen: {{ state_attr('sensor.abfall_nachster','type') | default('',
true) }}
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_abfall_termine
data:
browser_id: THIS
card_mod:
style: >
ha-card { background: var(--accent-color)!important;
color:#FFF!important; border: var(--accent-color)!important; }
ha-card ::slotted(span) { color:#FFF!important; }
- type: conditional
conditions:
- entity: binary_sensor.abfall_heute_aktiv
state: "on"
chip:
type: template
icon: >-
{{ state_attr('sensor.abfall_nachster','icon') |
default('mdi:trash-can-outline', true) }}
content: >-
Heute: {{ state_attr('sensor.abfall_nachster','type') | default('',
true) }}
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_abfall_termine
data:
browser_id: THIS
card_mod:
style: >
ha-card { background: var(--accent-color)!important;
color:#FFF!important; border: var(--accent-color)!important; }
ha-card ::slotted(span) { color:#FFF!important; }
- type: conditional
conditions:
- entity: sensor.waschmaschine
state: "on"
chip:
type: entity
entity: sensor.waschmaschine_verbleibende_zeit
icon: fapro:chip-laundry-2
- type: conditional
conditions:
- entity: calendar.geburtstage
state: "on"
chip:
type: entity
entity: sensor.geburtstage_heute
icon: fapro:birthday
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--accent-color) !important;
color: #FFFFFF !important;
border: var(--accent-color) !important;
}
ha-card ::slotted(span) {
color: #FFFFFF !important;
}
- type: conditional
conditions:
- entity: calendar.geburtstage
state: "off"
chip:
type: template
content: ""
icon: fapro:birthday
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_geburtstage
data:
browser_id: THIS
entity: sensor.geburtstage_heute
- type: template
icon: mdi:timer-outline
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_kuechentimer
data:
browser_id: THIS
entity: timer.kueche_kuechentimer
content: |
{% set state = states('sensor.kuchentimer_verbleibende_zeit') %}
{{ '' if state == 'Timer nicht aktiv' else state }}
- type: template
picture: ""
icon: mdi:flower-tulip-outline
entity: plant.buero_montstera
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_pflanzen
data:
browser_id: THIS
- type: template
icon: fapro:chip-car-2
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_fahrzeiten
data:
browser_id: THIS
entity: sensor.fahrzeit_altona
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Anwesend
chip:
type: template
icon: fapro:chip-presence-home
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Abwesend
chip:
type: template
icon: fapro:chip-presence-not-home
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- entity: input_select.haus_anwesenheit
state: Wachhund
chip:
type: template
icon: fapro:chip-presence-watchdog
entity: input_select.haus_anwesenheit
tap_action:
action: more-info
- type: conditional
conditions:
- condition: state
entity: binary_sensor.luftdiff_niedrig
state: "on"
chip:
type: template
icon: fapro:wind
content: ""
entity: sensor.wohnzimmer_tvoc_temperature
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_luftqualitaet_erdgeschoss
data:
browser_id: THIS
- type: conditional
conditions:
- condition: state
entity: binary_sensor.luftdiff_mittel
state: "on"
chip:
type: template
icon: fapro:wind
content: Lüften
entity: sensor.wohnzimmer_tvoc_temperature
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_luftqualitaet_erdgeschoss
data:
browser_id: THIS
- type: conditional
conditions:
- condition: state
entity: binary_sensor.luftdiff_hoch
state: "on"
chip:
type: template
icon: fapro:wind
content: Dringend lüften
entity: sensor.wohnzimmer_tvoc_temperature
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_luftqualitaet_erdgeschoss
data:
browser_id: THIS
card_mod:
style: >
ha-card { background: var(--accent-color) !important;
color:#fff!important; border:var(--accent-color)!important; }
ha-card ::slotted(span) { color:#fff!important; }
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: true
tap_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
margin-top: 40px;
}
view_layout:
grid-area: welcome_kueche_chips
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: calc(100vh - 235px);
margin-top: 15px;
display: flex;
align-items: center;
background: transparent;
border: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.welcome_begruessung
show_state: true
name: begruessung
show_name: false
show_icon: false
show_label: false
card_mod:
styles:
ha-card:
transition: none
styles:
card:
- background: transparent
- margin: 0px 0px 8px 0px
- padding: 0px
- border: 0px
state:
- font-size: 24px
- padding-left: 0px
- font-weight: 300
- text-transform: uppercase
- justify-self: start
- color: var(--primary-text-color)
- type: custom:button-card
show_icon: false
show_state: true
show_name: false
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: transparent;
border: 0px;
width: 550px !important;
}
entity: sensor.time
hold_action:
action: none
tap_action:
action: none
styles:
card:
- background-color: transparent
- height: 140px
- margin-bottom: 8px
state:
- font-size: 168px
- text-align: left
- color: var(--primary-text-color)
- font-weight: 100
- justify-self: start
- transform: |-
[[[
const state = entity?.state || '';
const hour = state.split(':')[0] || '';
const offset0 = -18; // Stunden, die mit 0 beginnen
const offset2 = -6; // Stunden, die mit 2 beginnen
if (/^0/.test(hour)) return `translateX(${offset0}px)`;
if (/^2/.test(hour)) return `translateX(${offset2}px)`;
return 'translateX(0)';
]]]
- type: custom:button-card
show_icon: false
show_state: true
show_name: false
entity: sensor.date_template
hold_action:
action: none
tap_action:
action: none
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: transparent;
border: 0px;
transition: none;
border-radius: 4px;
width: 500px !important;
}
styles:
card:
- margin: 0px
- height: 40px
- padding: 0px
state:
- font-size: 24px
- text-align: left
- color: var(--primary-text-color)
- font-weight: 300
- justify-self: start
- type: conditional
conditions:
- condition: state
entity: media_player.wohnzimmer_start
state_not: playing
- condition: state
entity: media_player.kueche
state_not: playing
- condition: state
entity: input_boolean.cinema_mode_aktiviert
state: "off"
- condition: state
entity: input_boolean.guten_morgen_mode_aktiviert
state: "off"
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.cinema_mode_aktiviert
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.cinema_mode_aktiviert
icon: fapro:cinema
layout: icon_name
show_state: false
card_mod:
styles:
ha-card:
transition: none
name: Cinema Mode
show_name: false
show_label: false
styles:
card:
- width: 72px
- height: 72px
- margin-right: 12px
- margin-top: 0px
- background: var(--welcome-card-background)
- border: 0px
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 6px
name:
- font-size: 14px
- padding-left: 14px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: "\"i n\""
- grid-template-columns: 64px 1fr
- type: custom:button-card
entity: script.tts_morningbriefing
tap_action:
action: call-service
service: script.tts_morningbriefing
icon: fapro:briefing
layout: icon_name
show_state: false
name: Briefing
show_name: false
show_label: false
styles:
card:
- width: 72px
- height: 72px
- margin-right: 12px
- margin-top: 0px
- background: var(--welcome-card-background)
- border: 0px
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 7px
name:
- font-size: 14px
- padding-left: 14px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: "\"i n\""
- grid-template-columns: 64px 1fr
- type: custom:button-card
entity: input_select.haus_modi
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.haus_modi
option: Nacht
icon: fapro:stars
layout: icon_name
show_state: false
name: Gute Nacht
show_name: false
show_label: false
styles:
card:
- width: 72px
- height: 72px
- margin-right: 12px
- margin-top: 0px
- background: var(--welcome-card-background)
- border: 0px
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 14px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: "\"i n\""
- grid-template-columns: 64px 1fr
- type: custom:button-card
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.guten_morgen_mode_aktiviert
icon: fapro:sun
layout: icon_name
show_state: false
name: Guten Morgen
show_name: false
show_label: false
styles:
card:
- width: 72px
- height: 72px
- margin-right: 12px
- margin-top: 0px
- background: var(--welcome-card-background)
- border: 0px
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 12px
- margin-left: 6px
name:
- font-size: 14px
- padding-left: 14px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: "\"i n\""
- grid-template-columns: 64px 1fr
- type: conditional
conditions:
- condition: state
entity: media_player.wohnzimmer
state: playing
- condition: state
entity: media_player.kueche
state_not: playing
card:
type: custom:mini-media-player
entity: media_player.wohnzimmer
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: transparent;
border: 0px;
transition: none;
border-radius: 4px;
max-width: {% if is_state('input_boolean.guten_morgen_mode_aktiviert','on') %}400px{% else %}350px{% endif %} !important;
}
.mmp__bg {
background: var(--welcome-card-background) !important;
}
hide:
volume: true
source: true
power: true
- type: conditional
conditions:
- condition: state
entity: media_player.kueche
state: playing
- condition: state
entity: media_player.wohnzimmer
state_not: playing
card:
type: custom:mini-media-player
entity: media_player.kueche
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: transparent;
border: 0px;
transition: none;
border-radius: 4px;
max-width: {% if is_state('input_boolean.guten_morgen_mode_aktiviert','on') %}400px{% else %}350px{% endif %} !important;
}
.mmp__bg {
background: var(--welcome-card-background) !important;
}
hide:
volume: true
source: true
power: true
- type: conditional
conditions:
- condition: state
entity: media_player.wohnzimmer
state: playing
- condition: state
entity: media_player.kueche
state: playing
card:
type: custom:button-card
show_name: false
show_icon: false
styles:
card:
- max-width: |
[[[
return states['input_boolean.guten_morgen_mode_aktiviert'].state === 'on'
? '400px'
: '350px';
]]]
- margin: 0
- padding: 0
- box-shadow: none
- background: null
- border-radius: 12px
- "--overlap": 16px
grid:
- grid-template-columns: 60px 1fr
- grid-template-areas: "\"left right\""
- column-gap: 8px
custom_fields:
left:
- padding: 0
- z-index: 1
right:
- padding: 0
- margin-left: "-35px"
- z-index: 2
custom_fields:
left:
card:
type: custom:mini-media-player
entity: media_player.wohnzimmer
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: transparent;
border: 0px;
transition: none;
border-radius: 4px;
max-width: 350px !important;
}
.mmp__bg {
background: var(--welcome-card-background) !important;
}
hide:
volume: true
source: true
power: true
controls: true
progress: true
right:
card:
type: custom:mini-media-player
entity: media_player.kueche
mini-media-player-background-opacity: 0
card_mod:
style: >
ha-card {
box-shadow: none !important;
background: transparent !important;
border: 0px;
transition: none;
border-radius: 4px;
max-width: 316px !important;
}
.mmp__bg {
background: transparent !important;
}
.mmp-player, .mmp-player__core, .entity_info,
.entity__info {
justify-content: flex-start !important;
text-align: left !important;
align-items: flex-start !important;
}
.entity__info {
width: 100% !important;
}
.entity__artwork {
border: 2px solid #FFF !important;
}
hide:
volume: true
source: true
power: true
progress: true
- type: conditional
conditions:
- condition: state
entity: input_boolean.stressless_mode_aktiviert
state: "on"
card:
type: custom:mushroom-entity-card
entity: input_boolean.stressless_mode_aktiviert
tap_action:
action: toggle
icon: fapro:saxophone
icon_color: teal
name: Stressless Mode
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: var(--welcome-card-background) !important;
border: 0px;
transition: none;
max-width: 350px !important;
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.cinema_mode_aktiviert
state: "on"
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
max-width: 350px !important
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.cinema_mode_aktiviert
tap_action:
action: toggle
icon: fapro:cinema
icon_color: teal
name: Cinema Mode
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: var(--welcome-card-background) !important;
border: 0;
transition: none;
max-width: 350px !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.turn_on
data:
entity_id: script.wohnzimmer_vorhang_hund
icon: fapro:curtain
layout: icon_name
name: Hund
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: var(--welcome-card-background) !important;
border: 0;
transition: none;
}
- type: custom:button-card
template: script_card
tap_action:
action: call-service
service: script.turn_on
data:
entity_id: script.wohnzimmer_vorhang_cinema_mode
icon: fapro:curtain
layout: icon_name
name: Cinema
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: var(--welcome-card-background) !important;
border: 0;
transition: none;
padding-right: 0px !important:
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.guten_morgen_mode_aktiviert
state: "on"
card:
type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 16px 0px 0px 0px
- background: var(--welcome-card-background) !important
- box-shadow: none !important
- border: 0
- border-radius: var(--ha-card-border-radius, 12px)
- max-width: 400px
grid:
- grid-template-areas: >-
"top trig" "next next" "sep sep" "weather_label
weather_label" "weather weather"
- grid-template-columns: 1fr max-content
- grid-template-rows: min-content min-content min-content min-content min-content
- column-gap: 12px
- row-gap: 0px
custom_fields:
top:
- width: 100%
trig:
- justify-self: end
next:
- width: 100%
sep:
- width: 100%
weather_label:
- justify-self: start
- font-weight: 600
- opacity: 0.8
weather:
- width: 100%
custom_fields:
top:
card:
type: custom:mod-card
card:
type: custom:mushroom-entity-card
entity: input_boolean.guten_morgen_mode_aktiviert
layout: horizontal
primary_info: name
secondary_info: state
tap_action:
action: toggle
icon: fapro:sun
icon_color: teal
name: Guten Morgen Mode
card_mod:
style:
.: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0;
margin-left: 8px;
}
mushroom-entity-card$:
.: |
:host {
--ha-card-background: transparent;
--ha-card-border-width: 0;
--ha-card-border-color: transparent;
--ha-card-border-radius: 0px;
--ha-card-box-shadow: none;
}
ha-card {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
mushroom-state-item$: >
.container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
}
.info { align-items: flex-start !important;
text-align: left !important; }
.primary, .secondary { text-align: left !important; }
trig:
card:
type: conditional
conditions:
- condition: state
entity: >-
input_boolean.trigger_bewegung_in_badezimmer_keller_erkannt
state: "on"
card:
type: custom:button-card
icon: fapro:sleep
show_name: false
show_state: false
show_label: false
styles:
card:
- background: transparent !important
- box-shadow: none !important
- border: 1px solid var(--primary-text-color--half-opacity)
- padding: 0
- width: 48px
- height: 48px
- margin-right: 16px
- border-radius: 12px
icon:
- width: 20px
- height: 20px
- color: var(--primary-text-color--half-opacity)
next:
card:
type: conditional
conditions:
- condition: state
entity: timer.timer_guten_morgen_mode_phase_2
state: active
card:
type: custom:button-card
template: script_card
tap_action:
action: call-service
service: timer.finish
target:
entity_id: timer.timer_guten_morgen_mode_phase_2
icon: fapro:lightbulb
layout: icon_name
name: Nächste Phase aktivieren
styles:
card:
- background: var(--welcome-card-background) !important
- box-shadow: none !important
- border: 0
- border-radius: 12px
- padding: 12px 0px
- margin: 16px 0px 0px 16px
- width: calc(400px - 32px)
name:
- font-weight: 700
sep: >
<div style="height:1px; background:
var(--primary-text-color--half-opacity); margin: 16px 16px 8px
16px;opacity: 0.15"></div>
weather_label: >
<div style="font-size: 0.95rem; font-weight: 600; line-height:
1; margin-top: 16px; margin-left: 16px; transform:
translateY(2px); opacity:1 !important; color: FFFFFF;">
Wetterübersicht Heute
</div>
weather:
card:
type: custom:hourly-weather
entity: weather.forecast_home
num_segments: 18
label_spacing: 4
name: null
forecast_type: hourly
icons: true
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: 0;
margin: 0px;
padding-bottom: 8px;
transition: transform 0s ease;
}
view_layout:
grid-area: wk_stats
- type: custom:popup-card
entity: sensor.geburtstage_heute
dismissable: true
card:
type: custom:calendar-card-pro
language: de
time_24h: true
entities:
- entity: calendar.geburtstage
accent_color: "#D9BE8B"
days_to_show: 365
compact_events_to_show: 10
show_location: false
show_month: true
title: Kalender
size: fullscreen
view_layout:
grid-area: wk_pop7
2 „Gefällt mir“
hey danke dir!
Vielleicht kannst du ja die Gesamte Config ovn deinem Dashboard irgendwo als download zur verüfgung stellen?!
Kannst du bitte mal alles zur Verfügung stellen? so fehlen ja auch icons, also hab ales installiert…aber gut sieht das jetzt nicht aus 
und wie wird man das wieder los ohne Top menu und raw editor?
by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)
Hey tBrookarrow,
Wie weiter oben beschrieben sind die Icons lizenzpflichtig und weitestgehend von “Streamlight” gekauft. Deshalb werde ich diese leider nicht öffentlich teilen können.
Ich nutze Kiosk-Mode lediglich auf dem Wall-Tablet selbst, um die Header auszublenden. In meinem “normalen” Browser habe ich alles aktiviert und kann im Raw Code arbeiten.
Die Themes habe ich unten angehängt sollten ebenfalls schon mal einen visuellen Unterschied machen. Diese basieren ursprünglich auf “Noctis” für die dunkle und “Google Light” für die helle Variante.
Der Breakdown dient in erster Linie dazu Inspirationen zu geben und meinen Denkprozess zu skizzieren. Wie ich deinem Screenshot entnehme, hast du vermutlich vieles per copy & paste eingefügt. Das wird so leider nur bedingt zum Erfolg führen. Aktuell habe ich nicht vor mein ganzes Setup zu spiegeln. Es sollte sollte eigentlich alle Bausteine da sein, dass du dir deine ganz eigene Version bauen kannst
Viel Erfolg!
dark:
# Text
text-color: "#FFFFFF"
text-color-rgb: "255, 255, 255"
primary-text-color: "var(--text-color)"
primary-text-color--half-opacity: "rgba(255,255,255,0.5)"
primary-text-color--light: "#818793"
text-primary-color: "var(--text-color)"
secondary-text-color: "var(--primary-text-color--light)"
text-medium-light-color: "#808080"
text-medium-color: "#80828A"
disabled-text-color: "#626569"
primary-color: "var(--accent-color)"
warning-color: "#FA7575"
# Fonts
#primary-font-family: "Alexandria, sans-serif"
ha-font-family-body: "Alexandria, sans-serif"
ha-font-family-heading: "Alexandria, sans-serif"
ha-font-family-code: "Alexandria, monospace"
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)"
# Main Colors
app-header-background-color: "#212736"
app-header-edit-background-color: "#2A3040"
accent-color: "#D9BE8B"
accent-color-background-opacity: "rgba(217, 190, 139, 0.25)"
accent-medium-color: "var(--accent-color)"
ha-color-primary-30: "rgba(217, 190, 139, 0.85)"
ha-color-primary-40: "var(--accent-color)"
ha-color-primary-80: "rgba(217, 190, 139, 0.35)"
ha-color-primary-90: "rgba(217, 190, 139, 0.25)"
ha-color-primary-95: "rgba(217, 190, 139, 0.15)"
# Background
background-color: "#202631"
background-color-2: "#3a3c55"
background: "var(--background-color)"
primary-background-color: "var(--background-color)"
secondary-background-color: "var(--background-color)"
markdown-code-background-color: "var(--background-color)"
welcome-card-background: "rgba(255,255,255,0.1)"
# Card
ha-card-background-selected: "var(--ha-card-background)"
ha-card-background-unselected: "var(--background-color)"
ha-card-background-unselected-border: "#2D3341"
card-background-color: "var(--ha-card-background)"
ha-card-background: "#252B38"
ha-card-box-shadow: "0px 0px 0px -0px rgba(0,0,0,0)"
ha-card-border-radius--fire: "16px"
ha-card-border-radius: "16px"
ha-config-section: "#e3e3e3"
border-color: "none"
card-box-shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
state-glow: "drop-shadow( 0px 0px 0px rgba(0, 0, 0, 0))"
# MCG
mcg-title-font-weight: 700
# Mushroom Icons
mush-icon-border-radius: 50%
mush-icon-size: 54px
mush-icon-symbol-size: 0.5em
# CardButton
ha-cardButton-background--active: "#323846"
ha-cardButton-background--inactive: "#262C3B"
ha-cardButton--active-box-shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
# Icons
paper-item-icon-color: "var(--primary-text-color--half-opacity)"
paper-item-icon-active-color: "var(--accent-color)"
# Sidebar
sidebar-background-color: "#212736"
sidebar-icon-color: "#98a7b9"
sidebar-selected-icon-color: "#FFFFFF"
sidebar-selected-text-color: "var(--text-color)"
paper-listbox-background-color: "var(--sidebar-background-color)"
divider-color: "var(--ha-card-background)"
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: "#132c41"
paper-dialog-background-color: "#132c41"
# Tables
table-row-background-color: "var(--ha-card-background)"
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)"
# Hover ausschalten
--mdc-ripple-color": "transparent"
--mdc-ripple-hover-opacity": "0"
--mdc-ripple-press-opacity": "0"
--mdc-ripple-focus-opacity": "0"
light:
# Text
text-color: "#555A60"
primary-text-color: "var(--text-color)"
primary-text-color--half-opacity: "rgba(85,90,96,0.5)"
primary-text-color--light: "#d7d8d9"
text-primary-color: "var(--text-color)"
secondary-text-color: "rgba(37,43,56,0.3)"
text-medium-light-color: "#808080"
text-medium-color: "#80828A"
disabled-text-color: "#626569"
primary-color: "var(--accent-color)"
warning-color: "#FA7575"
# Fonts
#primary-font-family: "Alexandria, sans-serif"
ha-font-family-body: "Alexandria, sans-serif"
ha-font-family-heading: "Alexandria, sans-serif"
ha-font-family-code: "Alexandria, monospace"
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)"
# Main Colors
light-primary-color: var(--primary-color)
secondary-background-color: rgb(230, 230, 230)
background-color--fire: linear-gradient(90deg, rgba(254,254,254,1) 0%, rgba(219,219,219,1) 100%)
accent-color: "#D9BE8B"
accent-color-background-opacity: "rgba(217, 190, 139, 0.25)"
accent-medium-color: rgba(217, 190, 139, 0.5)
ha-color-primary-30: "rgba(217, 190, 139, 0.85)"
ha-color-primary-40: "var(--accent-color)"
ha-color-primary-80: "rgba(217, 190, 139, 0.35)"
ha-color-primary-90: "rgba(217, 190, 139, 0.25)"
ha-color-primary-95: "rgba(217, 190, 139, 0.15)"
# Backgrounds
background-color: "#F8F8F8"
background: "var(--background-color)"
primary-background-color: "var(--background-color)"
background-color-2: "#E8E8E8"
markdown-code-background-color: "var(--background-color)"
welcome-card-background: rgba(255, 255, 255, 0.75)
# Card
ha-card-background-unselected: "var(--background-color)"
ha-card-background-selected: "var(--ha-card-background)"
ha-card-background-unselected-border: "var(--ha-card-background)"
ha-card-background: "#FFFFFF"
ha-card-box-shadow--fire: "0px 0px 0px 0px rgba(0,0,0,0)"
ha-card-border-radius--fire: "16px"
ha-config-section: "#e3e3e3"
border-color: "none"
card-box-shadow: "0px 0px 0px 0px)"
state-glow: "drop-shadow( 0px 0px 0px)"
card-background-color: rgb(255, 255, 255)
ha-card-border-radius: "16px"
ha-card-box-shadow: 0px 0px 0px 0px rgb(230, 230, 230)
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
# Mushroom Icons
mush-icon-border-radius: 50%
mush-icon-size: 54px
mush-icon-symbol-size: 0.5em
# Mushroom Colors
mush-rgb-blue: 37, 43, 56
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
mush-rgb-info: var(--mush-rgb-blue)
mush-rgb-success: var(--mush-rgb-green)
mush-rgb-warning: var(--mush-rgb-orange)
mush-rgb-danger: var(--mush-rgb-red)
mush-rgb-state-fan: var(--mush-rgb-green)
mush-rgb-state-light: var(--mush-rgb-orange)
mush-rgb-state-entity: var(--mush-rgb-blue)
mush-rgb-state-switch: var(--mush-rgb-blue)
mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
mush-rgb-state-alarm-armed: var(--mush-rgb-success)
mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)
mush-rgb-state-person-home: var(--mush-rgb-success)
mush-rgb-state-person-not-home: var(--mush-rgb-danger)
mush-rgb-state-person-zone: var(--mush-rgb-info)
mush-rgb-state-person-unknown: var(--mush-rgb-grey)
mush-rgb-state-cover-open: var(--mush-rgb-blue)
mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
mush-rgb-state-climate-auto: var(--mush-rgb-green);
mush-rgb-state-climate-cool: var(--mush-rgb-blue);
mush-rgb-state-climate-dry: var(--mush-rgb-orange);
mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
mush-rgb-state-climate-idle: var(--mush-rgb-grey);
mush-rgb-state-climate-off: var(--mush-rgb-disabled);
# Icons
light-door-icon: "/local/stateOff.svg"
# CardButton
ha-cardButton-background--active: "#FFFFFF"
ha-cardButton-background--inactive: "#F8F8F8"
ha-cardButton--active-box-shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
# Icons
paper-item-icon-color: "var(--primary-text-color--half-opacity)"
paper-item-icon-active-color: "var(--accent-color)"
# Sidebar
sidebar-background-color: "#F8F8F8"
sidebar-icon-color: rgb(95, 99, 104)
sidebar-text-color: var(--sidebar-icon-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "var(--accent-color)"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
divider-color: "var(--sidebar-background-color)"
# Sliders
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: "var(--background-color-2)"
paper-slider-active-color: "var(--accent-color)"
paper-slider-container-color: "var(--background-color-2)"
paper-slider-secondary-color: var(--light-primary-color)
# Toggle:
mdc-theme-primary: "var(--accent-color)"
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Switch
switch-unchecked-color: "#d7d8d9"
switch-checked-button-color: "var(--accent-color)"
switch-unchecked-button-color: "var(--accent-medium-color)"
switch-unchecked-track-color: "var(--background-color-2)"
# Switches GOOGLE LIGHT
switch-checked-track-color: var(--accent-color)
# Radio Button
paper-radio-button-checked-color: "var(--accent-color)"
# Popups
more-info-header-background: "#132c41"
# Tables
table-row-background-color: "var(--ha-card-background)"
table-row-alternative-background-color: "var(--ha-card-background)"
data-table-background-color: var(--primary-background-color)
# Header: GOOGLE LIGHT
app-header-background-color: "#F8F8F8"
app-header-text-color: rgb(95, 99, 104)
app-header-edit-background-color: "#555A60"
# States and Badges GOOGLE LIGHT
state-icon-color: var(--accent-color)
state-icon-active-color: rgb(95, 99, 104)
state-icon-unavailable-color: var(--disabled-text-color)
# Dropdowns GOOGLE LIGHT
material-background-color: var(--card-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--paper-card-background-color)
# Badges
paper-input-container-focus-color: "var(--accent-color)"
label-badge-background-color: rgb(248, 250, 249)
label-badge-text-color: rgb(77, 85, 117)
label-badge-red: "#FA7575"
label-badge-green: rgb(109, 192, 113)
label-badge-blue: rgb(26, 115, 232)
label-badge-yellow: rgb(217, 183, 87)
label-badge-gray: rgb(95, 98, 103)
# Mini Mediaplayer
mini-media-player-base-color: "var(--text-color)"
mini-media-player-accent-color: "var(--accent-color)"
by HarryP: Post formatiert
Hallo zusammen, erstmal vielen Dank an SmartBuddy für das tolle Dashboard. Ich bin gerade dabei ein Tablet im Haus einzubauen und habe anhand des Dashboards und des Themes ein paar Karten erstellt.
Bearbeite das Dashboard gerade im YAML Modus und erstelle/füge die Karten mit Button Card Templates ein. Den Code kann ich gerne bereitstellen wenn sich jemand dafür interessiert.
2 „Gefällt mir“
Hi sieht wirklich gut aus kannst Du wie gesagt den Code Mal zur Verfügung stellen ?
Danke