Je vais rester sur ma première idée, déjà faire une première « version » de mon dashboard, je passe pas mal de temps pour peu de choses faites 
J’aime bien le style de la cover card, je pense la garder un certain temps, et le lien du template cover, c’est très abstrait pour moi, ce n’est pas encore pour tout de suite, peut-être dans une autre mouture, quand tout ce que je veux sera en place, mais ca c’est pas encore fait.
Merci de ton temps 
1 « J'aime »
Merci pour tout.
La plus belle de toutes les cartes existantes !
L’intégralité de mon configuration est refaite avec Bubble !
Couplé à Decluttering, et quelques ajouts de variables couleurs, c’est un régal !!!
3 « J'aime »
Hâte de voir ce que ça donne
Salut @Clooos
j’ai un ventilateur connecté avec différents paramètres que j’aimerais pouvoir les contrôler avec des subs button notamment pour oscillating qui est de type switch et preset_mode qui est un input_select
ça fait bien 2h que je tourne en rond pour comprendre comment l’intégrer dans un sub button
est-ce que je dois créer de nouvelles entités pour le moment ou est-ce que je suis passé à côté de quelque chose ?
j’ai utilisé une carte bouton de type slider
Hâte de voir ta nouvelle configuration. Pourrais-tu s’il te plaît déjà nous partager une capture d’écran ?
Top, merci pour les screenshots et le partage à venir !
1 « J'aime »
Salut @Marleo,
Je débute avec les cartes Bubble mais voila comment j’ai intégré une image à la place de l’icône.
Déjà tu dois définir la valeur « none » à la place de l’icône.
Ensuite, en dessous de card_mod, dans la section « .bubble-icon-container », tu dois ajouter cela dans cette ordre.
card_mod:
style: |
.bubble-icon-container {
background: transparent;
background-size: cover;
background-image: url("url_vers_l_image");
Ci-dessous le code complet de la carte météo
Résumé
type: custom:bubble-card
card_type: button
button_type: state
entity: weather.maison
name: Crosne
scrolling_effect: false
show_attribute: false
card_layout: large-2-rows
sub_button:
- entity: sensor.maison_temperature_ressentie
show_background: false
show_state: true
icon: mdi:sun-thermometer
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: normal
style: '--popup-border-radius: 10px'
content:
type: horizontal-stack
cards:
- type: statistics-graph
chart_type: line
period: hour
entities:
- sensor.maison_temperature_ressentie
stat_types:
- max
logarithmic_scale: false
hide_legend: true
title: Température Extérieur
days_to_show: 1
- entity: sensor.maison_vitesse_des_rafales_aujourd_hui
show_background: false
icon: mdi:weather-windy
show_state: true
tap_action:
action: none
- show_background: false
show_state: true
icon: mdi:home-thermometer
entity: sensor.climate_average_inside_temperature
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: normal
style: '--popup-border-radius: 10px'
content:
type: horizontal-stack
cards:
- type: statistics-graph
chart_type: line
period: hour
entities:
- sensor.climate_average_inside_temperature
stat_types:
- max
logarithmic_scale: false
hide_legend: true
title: Température Intérieur
days_to_show: 1
- entity: sensor.maison_precipitation
show_background: false
show_state: true
icon: mdi:weather-rainy
tap_action:
action: none
show_icon: true
icon: none
force_icon: false
layout_options:
grid_columns: 4
grid_rows: 1
show_name: true
show_last_changed: false
tap_action:
action: navigate
navigation_path: '#weather_forecast'
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: navigate
navigation_path: '#weather_forecast'
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.bubble-icon-container {
background: transparent;
background-size: cover;
background-image:
{% set entity = states("sensor.openweathermap_condition") %} {% set
cloud = states("sensor.maison_couverture_nuageuse")|int %} {% set
rain = states("sensor.maison_precipitation")|float %} {% if entity
== "exceptional" %}
{% set slug = "isolated_scattered_tstorms_day" %}
{% elif entity == "fog" %}
{% set slug = "haze_fog_dust_smoke" %}
{% elif entity == "hail" %}
{% set slug = "wintry_mix_rain_snow" %}
{% elif entity == "lightning" or entity == "lightning-rainy"%}
{% set slug = "strong_tstorms" %}
{% elif entity == "snowy" %}
{% set slug = "flurries" %}
{% elif entity == "snowy-rainy" %}
{% set slug = "wintry_mix_rain_snow" %}
{% elif rain > 0 and rain <= 0.5 %}
{% set slug = "drizzle" %}
{% elif rain > 0.5 and rain <= 1.5 %}
{% set slug = "showers_rain" %}
{% elif rain > 1.5 %}
{% set slug = "heavy_rain" %}
{% elif states("sun.sun") == "below_horizon" %}
{% if cloud < 20 %}
{% set slug = "clear_night" %}
{% elif cloud < 40 %}
{% set slug = "mostly_clear_night" %}
{% elif cloud < 60 %}
{% set slug = "partly_cloudy_night" %}
{% elif cloud < 80 %}
{% set slug = "mostly_cloudy_night" %}
{% elif cloud <= 100 %}
{% set slug = "cloudy" %}
{% endif %}
{% else %}
{% if cloud < 20 %}
{% set slug = "sunny" %}
{% elif cloud < 40 %}
{% set slug = "mostly_sunny" %}
{% elif cloud < 60 %}
{% set slug = "partly_cloudy" %}
{% elif cloud < 80 %}
{% set slug = "mostly_cloudy_day" %}
{% elif cloud <= 100 %}
{% set slug = "cloudy" %}
{% endif %}
{% endif %}
url("http://www.gstatic.com/images/icons/material/apps/weather/2x/{{slug}}_dark_color_96dp.png");
}
.bubble-sub-button-1 {
background-color:
{% set templow = states(config.sub_button[0].entity) %}
{% if templow < '10' %}
rgb(var(--bbl-rgb-blue))
{% elif templow > '40' %}
rgb(var(--bbl-rgb-red))
{% elif templow > '30' %}
rgb(var(--bbl-rgb-orange))
{% endif %}
;
}
.bubble-sub-button-2 {
background-color:
{% set wind = states(config.sub_button[1].entity) %}
{% if wind > '40' %}
rgb(var(--bbl-rgb-orange))
{% elif wind > '60' %}
rgb(var(--bbl-rgb-red))
{% endif %}
;
}
.bubble-sub-button-3 {
background-color:
{% set temphigh = states(config.sub_button[2].entity) %}
{% if temphigh < '10' %}
rgb(var(--bbl-rgb-blue))
{% elif temphigh > '40' %}
rgb(var(--bbl-rgb-red))
{% elif temphigh > '30' %}
rgb(var(--bbl-rgb-orange))
{% endif %}
;
}
.bubble-sub-button-4 {
background-color:
{% set rain = states(config.sub_button[3].entity) %}
{% if rain > '0.0' %}
rgb(var(--bbl-rgb-blue))
{% endif %}
;
}
1 « J'aime »
Salut @mrgrlscz,
Aurais-tu la possibilité de nous partager ton thème light à l’occasion ?
#//////////////////////////////////////////////////////////////////////////////////////#
#/////// //////////////#
#/////// THEME: NovaPuccino
#/////// //////////////#
#//////////////////////////////////////////////////////////////////////////////////////#
NovaPuccino:
# ====================================================================================
# ====================================================================================
# ============================================================= CARD_MOD (theme-level)
card-mod-theme: NovaPuccino # mandatory
card-mod-more-info-yaml: |
.: |
ha-dialog {
--vertical-align-dialog: center !important;
}
state-card-content {
display: none !important;
}
ha-more-info-state-head, p.name {
display: none !important;
}
/* workaround colored outline border */
ha-dialog > div {
outline: none !important;
}
card-mod-root-yaml: |
.: |
/* edit mode. */
app-header.edit-mode {
padding-bottom: 4px;
border-bottom: 4px solid var(--accent-color);
}
/* hide help button */
a.menu-link[target="_blank"] {
display: none;
}
/* increase header's z-index to overlap almost everything */
.header {
z-index: 6 !important;
}
/* delete the 2px top border */
hui-masonry-view {
padding-top: calc( 4px - var(--ha-card-border-width) ) ;
}
/* hide header on small screens regarding dev_boolean */
@media only screen and (max-width: 599px) {
.header {
display: {{ 'none' if states('input_boolean.dev_mode') == 'off' }} !important;
opacity: {{ '0' if states('input_boolean.dev_mode') == 'off' }} !important;
}
#view {
padding-top: {{ '0' if states('input_boolean.dev_mode') == 'off' }} !important;
margin-top: {{ '0' if states('input_boolean.dev_mode') == 'off' }} !important;
height: {{ 'calc(100vh - env(safe-area-inset-top)) !important' if states('input_boolean.dev_mode') == 'off' }} !important;
}
}
# card-mod-sidebar-yaml: |
# .: |
# a:hover paper-icon-item .item-text{
# color: var(--nova-color);
# }
# a:hover paper-icon-item ha-icon {
# color: var(--nova-color) !important;
# }
# /* background
# a:hover paper-icon-item {
# background: var(--nova-color-shade);
# } */
# card-mod-root: |
# /* aucune idée du résultat */
# app-toolbar {
# display: none;
# }
# card-mod-view-yaml: |
# /* move the sidebar (in a view) from right to left side */
# hui-sidebar-view $: |
# .container {
# flex-direction: row-reverse;
# }
# card-mod-row: |
# /* Display battery level in background of entities with battery or battery_level attributes */
# :host {
# display: block;
# {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
# {% if battery %}
# background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
# {% endif %}
# }
# card-mod-row-yaml: |
# /* Put a custom secondary-info text in entities that have a battery */
# hui-generic-entity-row$: |
# {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
# {% if battery %}
# .info.text-content::after {
# content: "{{battery}}%";
# display: block;
# color: var(--secondary-text-color);
# }
# {% endif %}
modes:
# ==================================================================================
# ==================================================================================
# ============================================================================ LIGHT
light:
accent-color: var(--teal-palette-color-02)
contrast: var(--text) # darkest
text: "#4c4f69"
subtext1: "#5c5f77"
subtext0: "#6c6f85" # pri-text
overlay2: "#7c7f93"
overlay1: "#8c8fa1"
overlay0: "#9ca0b0"
surface2: "#acb0be" # sec-text
surface1: "#bcc0cc"
surface0: "#ccd0da"
crust: "#dce0e8" # sidebar
base: "#e6e9ef" # primary
mantle: "#eff1f5" # secondary
purple: "#513169"
lila: "#5e488a"
blue: var(--blue-palette-color-05)
sky: "#05b5e6"
water: "#3dc1a9"
green: "#74cc6c"
lime: "#b9ca5d"
yellow: "#fec84e"
orange: "#fe9b57"
fire: "#ff7045"
red: "#d53e4f"
crimson: "#9e0142"
nova-color: var(--nova-palette-color-05) #lavender
nova-palette-color-00: "#d3b5f9" # lightest
nova-palette-color-01: "#c49cf7"
nova-palette-color-02: "#b584f5"
nova-palette-color-03: "#a66bf3"
nova-palette-color-04: "#9752f1"
nova-palette-color-05: "#8839ef" #var(--nova-color)
nova-palette-color-06: "#7732d2"
nova-palette-color-07: "#662bb4"
nova-palette-color-08: "#552496"
nova-palette-color-09: "#4d2187"
nova-palette-color-10: "#3a1966" # darkest
blue-palette-color-00: "#cbdcfd" # lightest
blue-palette-color-01: "#b9d0fc"
blue-palette-color-02: "#96b8fb"
blue-palette-color-03: "#73a0f9"
blue-palette-color-04: "#548bf8"
blue-palette-color-05: "#3475f6" #var(--blue)
blue-palette-color-06: "#1e66f5"
blue-palette-color-07: "#1953c8"
blue-palette-color-08: "#13409a"
blue-palette-color-09: "#0e2d6c"
blue-palette-color-10: "#0b2251" # darkest
# ==================================================================================
# ==================================================================================
# ============================================================================= DARK
dark:
accent-color: var(--teal)
contrast: "#e5e9fa" # lightest
text: "#cad3f5"
subtext1: "#b8c0e0"
subtext0: "#a5adcb" # pri-text
overlay2: "#939ab7"
overlay1: "#8087a2"
overlay0: "#6e738d"
surface2: "#5b6078" # sec-text
surface1: "#494d64"
surface0: "#363a4f"
mantle: "#24273a" # secondary
base: "#1e2030" # primary
crust: "#181926" # sidebar
purple: "#615099"
lila: "#796acc"
blue: var(--blue-palette-color-05)
sky: "#7eb5e3"
water: "#92c8bc"
green: "#a6da95"
lime: "#e6f598"
yellow: "#ffd17a"
orange: "#ffad6e"
fire: "#ff7d59"
red: "#de455c"
crimson: "#9e0142"
nova-color: var(--nova-palette-color-05) # pink
nova-palette-color-00: "#f5d5f5" # lightest
nova-palette-color-01: "#f1c6f1"
nova-palette-color-02: "#eeb8ee"
nova-palette-color-03: "#eaaaea"
nova-palette-color-04: "#e79ce7"
nova-palette-color-05: "#e38de3" #var(--nova-color)
nova-palette-color-06: "#c77cc7"
nova-palette-color-07: "#b973b9"
nova-palette-color-08: "#9d629d"
nova-palette-color-09: "#8a568a"
nova-palette-color-10: "#764a76" # darkest
blue-palette-color-00: "#c6d8fa" # lightest
blue-palette-color-01: "#b3caf8"
blue-palette-color-02: "#a0bdf7"
blue-palette-color-03: "#8db0f5"
blue-palette-color-04: "#7aa3f3"
blue-palette-color-05: "#6b93e3" #var(--blue)
blue-palette-color-06: "#5b83d3"
blue-palette-color-07: "#4e70b5"
blue-palette-color-08: "#415e97"
blue-palette-color-09: "#3b5588"
blue-palette-color-10: "#344b79" # darkest
# ====================================================================================
# ====================================================================================
# ============================================================================= COMMON
# ----------------------------------------------------------------------------
# ----------------------------------------------------------------------------
# ---------------------------------------------------------------------- TESTS
# masonry-view-card-margin: 5px # 4px
# sidebar-width: 4px
# state-cover-garage_door-on-color: purple
# state-cover-garage_door-off-color: green
# state-garage_door-active-color: green
# state-cover-active-color: green
# button-card-light-color: var(--red)
# button-card-dark-color: var(--red)
# ---------------------------------------------------------------- definitions
# ----------------------------------------------------------------------------
# ----------------------------------------------------------------------------
# dark: "#4c4f69" # "#181926"
light: "#cad3f5" # "#eff1f5"
white: "#eaedfb"
aqua: var(--teal-palette-color-01) # "#96beca"
teal: var(--teal-palette-color-05) # "#2d7d95"
petrol: var(--teal-palette-color-10) # "#24445c"
teal-palette-color-00: "#cbdfe5" # lightest
teal-palette-color-01: "#96beca" #var(--aqua)
teal-palette-color-02: "#7caebd"
teal-palette-color-03: "#629eb0"
teal-palette-color-04: "#488ea3"
teal-palette-color-05: "#2d7d95" #var(--teal)
teal-palette-color-06: "#2b6f87"
teal-palette-color-07: "#296179"
teal-palette-color-08: "#27536b"
teal-palette-color-09: "#264c64"
teal-palette-color-10: "#24445c" # darkest #var(--petrol)
alpha: 0.8
beta: 0.4
fade: 80%
shade: 50%
dialog-backdrop-filter: blur(6px)
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
ha-card-box-shadow: none
nova-light-box-shadow: 0px 0px 8px -4px rgba(0,0,0,.2)
nova-medium-box-shadow: 0px 0px 8px -1px rgba(0,0,0,.4)
# # Browser_mod popup
# popup-min-width: 400px
# popup-max-width: 900px
# popup-padding-x: 5px
# popup-padding-y: 5px
# # popup-header-background-color: red
# popup-background-color: transparent
# popup-border-width: 0px
popup-border-radius: var(--ha-card-border-radius)
# popup-border-color: transparent
# Toast (popup bas de page)
# paper-toast-background-color: var(--nova-color-fade) # ne fonctionne plus avril2024
# NEW Toasts?
#
mdc-shape-small: var(--ha-card-border-radius) # OK default: 2px
#
# do NOT work
mdc-snackbar-label-text: red
mdc-snackbar-label-text-color: red
mdc-snackbar-container-color: red
mat-mdc-snack-bar-button-color: red
mdc-snackbar-supporting-text-color: red
# ---------------------------------------------------------------------- links
# ----------------------------------------------------------------------------
# ----------------------------------------------------------------------------
nova-color-fade: color-mix(in srgb, var(--nova-color) var(--fade), transparent)
nova-color-shade: color-mix(in srgb, var(--nova-color) var(--shade), transparent)
info-color-fade: color-mix(in srgb, var(--info-color) var(--fade), transparent)
info-color-shade: color-mix(in srgb, var(--info-color) var(--shade), transparent)
success-color-fade: color-mix(in srgb, var(--success-color) var(--fade), transparent)
success-color-shade: color-mix(in srgb, var(--success-color) var(--shade), transparent)
warning-color-fade: color-mix(in srgb, var(--warning-color) var(--fade), transparent)
warning-color-shade: color-mix(in srgb, var(--warning-color) var(--shade), transparent)
error-color-fade: color-mix(in srgb, var(--error-color) var(--fade), transparent)
error-color-shade: color-mix(in srgb, var(--error-color) var(--shade), transparent)
accent-color-fade: color-mix(in srgb, var(--accent-color) var(--fade), transparent)
accent-color-shade: color-mix(in srgb, var(--accent-color) var(--shade), transparent)
text-fade: color-mix(in srgb, var(--text) var(--fade), transparent)
text-shade: color-mix(in srgb, var(--text) var(--shade), transparent)
# LOVELACE
accent-text-color: var(--white)
primary-color: var(--accent-color)
# light-primary-color: red # delete?
divider-color: var(--sidebar-background-color)
primary-text-color: var(--subtext0)
secondary-text-color: var(--surface2)
text-primary-color: var(--accent-text-color)
disabled-text-color: var(--surface0)
primary-background-color: var(--base)
secondary-background-color: var(--mantle)
# SEVERITY
info-color: var(--blue)
success-color: var(--green)
warning-color: var(--orange)
error-color: var(--red)
# SIDEBAR
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--sidebar-selected-text-color)
sidebar-selected-text-color: var(--state-active-color)
# STATES
state-lock-locking-color: var(--warning-color)
state-lock-locked-color: var(--error-color)
state-lock-unlocked-color: var(--success-color)
state-lock-unlocking-color: var(--info-color)
# HONEYCOMB MODULE
honeycomb-menu-icon-color: var(--primary-text-color)
honeycomb-menu-background-color: var(--surface0)
honeycomb-menu-icon-active-color: var(--base)
honeycomb-menu-active-background-color: var(--warning-color)
# honeycomb-menu-disabled: var(--overlay0) # transparent
rainbow-palette-color-00: var(--purple)
rainbow-palette-color-01: var(--lila)
rainbow-palette-color-02: var(--blue)
rainbow-palette-color-03: var(--sky)
rainbow-palette-color-04: var(--water)
rainbow-palette-color-05: var(--green)
rainbow-palette-color-06: var(--lime)
rainbow-palette-color-07: var(--yellow)
rainbow-palette-color-08: var(--orange)
rainbow-palette-color-09: var(--fire)
rainbow-palette-color-10: var(--red)
rainbow-palette-color-11: var(--crimson)
# BUTTONS
paper-item-icon-color: var(--subtext0)
paper-item-icon-active-color: var(--nova-color) #var(--primary-color)
# ICONS
state-icon-color: var(--primary-text-color)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# SLIDERS
paper-slider-knob-color: var(--info-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--info-color)
# LABELS
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-blue: var(--info-color)
label-badge-green: var(--success-color)
label-badge-yellow: var(--warning-color)
label-badge-red: var(--error-color)
label-badge-gray: var(--overlay0)
# CARDS
card-background-color: var(--secondary-background-color)
ha-card-background: var(--card-background-color)
ha-card-border-width: 0px
ha-card-border-radius: 15px
ha-card-border-color: transparent
ha-dialog-border-radius: var(--ha-card-border-radius)
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--surface0)
paper-card-background-color: var(--card-background-color)
# SWITCH
switch-checked-button-color: var(--success-color)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# TOGGLE
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)
# TABLE
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: var(--surface0)
# DROPDOWNS
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--secondary-background-color)
mdc-theme-surface: var(--mantle)
mdc-theme-primary: var(--accent-color)
mdc-theme-on-primary: var(--accent-text-color)
mdc-theme-secondary: var(--nova-color) # some checkboxes? (devboard)
mdc-radio-unchecked-color: var(--primary-background-color) # some checkboxes? (devboard)
mdc-theme-on-secondary: var(--accent-text-color)
# RE/CODE
markdown-code-background-color: var(--surface0)
# CHECKBOX
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# INPUT
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
# STATE ACTIVE
state-active-color: var(--nova-color)
# ALARM CONTROL PANEL
state-alarm_control_panel-disarmed-color: var(--success-color)
state-alarm_control_panel-arming-color: var(--primary-text-color)
state-alarm_control_panel-armed_away-color: var(--nova-color)
state-alarm_control_panel-armed_home-color: var(--info-color)
state-alarm_control_panel-armed_night-color: var(--nova-color)
state-alarm_control_panel-pending-color: var(--warning-color)
state-alarm_control_panel-triggered-color: var(--error-color)
# BINARY SENSOR
# state-binary_sensor-active-color: var(--state-active-color)
state-binary_sensor-problem-on-color: var(--warning-color)
# LIGHT
state-light-on-color: var(--warning-color)
state-light-active-color: var(--state-light-on-color) #var(--state-active-color) #dispensable
# MEDIA PLAYER
state-media_player-idle-color: var(--info-color)
state-media_player-speaker-idle-color: var(--state-media_player-idle-color)
state-media_player-active-color: var(--state-active-color)
# SWITCH
state-switch-on-color: var(--state-active-color)
state-switch-active-color: var(--state-switch-on-color) #dispensable
# Outlet
state-switch-outlet-on-color: var(--state-switch-on-color) #dispensable
# ------------------------------------------------------------------------- HACS
# BUBBLE CARD
bubble-button-background-color: transparent # var(--accent-color)
background-color: transparent # var(--crust)
# background-color-2: green # do not use
# MINI MEDIA PLAYER
mini-media-player-base-color: var(--primary-text-color)
mini-media-player-icon-color: var(--overlay0)
mmp-accent-color: var(--accent-color)
mini-media-player-progress-height: 8px
# PAPER BUTTONS ROW
pbs-button-color: var(--primary-text-color)
pbs-button-active-color: var(--nova-color)
# pbs-button-rgb-color: var(--primary-text-color)
# pbs-button-rgb-default-color: var(--primary-text-color)
pbs-button-unavailable-color: var(--disabled-text-color)
# Header
#### propriété CSS: width: var(--mdc-top-app-bar-width,100%)
app-header-background-color: var(--mantle)
app-header-text-color: var(--text)
mdc-top-app-bar-fixed-box-shadow: 0px 1px 4px -1px rgba(0,0,0,.4) # mdc-top-app-bar-fixed-box-shadow: 0px 2px 4px -1px rgba(0,0,0,.2)
# app-header-edit-background-color: var(--text) # "#455a64"
# app-header-edit-text-color: var(--surface0)
# GAPS
grid-card-gap: 8px
vertical-stack-card-gap: var(--grid-card-gap)
horizontal-stack-card-gap: var(--grid-card-gap)
# stack-card-gap: 16px
# # HorseHoe Card + Swiss Army Knife Card
# theme-card-box-shadow: var(--shadow-elevation-2dp_-_box-shadow)
### SAK do NOT delete / do NOT use
sak-gradient-color-green: "#A8E05F" # vert
sak-gradient-color-yellow: "#FDD74B" # jaune
sak-gradient-color-orange: "#FE9B57" # orange
sak-gradient-color-red: "#FE6A69" # rouge
sak-gradient-color-purple: "#A97ABC" # violet
sak-gradient-color-pink: "#A87383" # pink
rainbow-gradient-color-01: "#5e4fa2" # violet
rainbow-gradient-color-02: "#3288bd" # bleu
rainbow-gradient-color-03: "#66c2a5" # vert
rainbow-gradient-color-04: "#abdda4" # vert clair
rainbow-gradient-color-05: "#e6f598" # jaune clair
rainbow-gradient-color-06: "#fee08b" # jaune
rainbow-gradient-color-07: "#fdae61" # orange
rainbow-gradient-color-08: "#f46d43" # orange foncé
rainbow-gradient-color-09: "#d53e4f" # rouge
rainbow-gradient-color-10: "#9e0142" # rouge foncé
yellow-gradient-color-00: "#FFF6E3"
yellow-gradient-color-01: "#FFE9B9"
yellow-gradient-color-02: "#FFDA8A"
yellow-gradient-color-03: "#FFCB5B"
yellow-gradient-color-04: "#FFBF37"
yellow-gradient-color-05: "#ffb414"
yellow-gradient-color-06: "#FFAD12"
yellow-gradient-color-07: "#FFA40E"
yellow-gradient-color-08: "#FF9C0B"
yellow-gradient-color-09: "#FF8C06"
yellow-gradient-color-10: "#FF8305"
cs-theme-default-lighten-50: "#FDFDFD"
cs-theme-default-lighten-40: "#FAFAFA"
cs-theme-default-lighten-30: "#F7F7F7"
cs-theme-default-lighten-20: "#F4F3F3"
cs-theme-default-lighten-10: "#F1F1F1"
cs-theme-default-base: "#efeeee"
cs-theme-default-darken-10: "#EDECEC"
cs-theme-default-darken-20: "#EBE9E9"
cs-theme-default-darken-30: "#E8E7E7"
cs-theme-default-darken-40: "#E4E2E2 "
1 « J'aime »
Bonjour à tous,
M’étant mis aussi sur Bubble avec un mix de Rounded et suivant les tutos de My Smart Home : https://www.youtube.com/watch?v=9CwOQFFiHH8, j’ai besoin de vos lumières pour modifier le fond de la croix qui permet de fermer la pop-up.
J’aimerai le mettre de la même couleur que le fond du header à savoir ici Rose Mercière ^^
Merci pour votre aide
EDIT : voici le code si certains veulent faire des modifications sur la croix
.bubble-close-button {
background: #aa7370 !important;
color: ${state === 'on' ? 'white' : 'white'} !important;
}
1 « J'aime »
Hello,
Est une screen d’un cash sur tablette ? et qui utilise dans ta famille le dash ? car je sais que ici ma femme par exemple elle cherche des choses simples, si je lui mets ce genre de tableau, personne ne l’utilise ahaha.
Sur tout support c’est le même rendu. Téléphone compris.
Moi et ma femme.
J’ai justement fait un truc simple.
2 « J'aime »
Bonjour à tous,
Je débarque depuis peu dans le monde de Home Assistant et j’ai bien entendu adopté Bubble Card (Chapeau bas @Clooos ).
Je bute néanmoins sur un élément et malgré plusieurs recherches, je n’ai pas trouvé de réponse.
J’ai fait la pop-up suivante pour gérer l’éclairage de mon bureau :
J’ai deux groupes : 1 Spots qui regroupe les trois spots au plafond de la pièce et 1 Etagère qui regroupe les 2 étagères
J’aimerai autant que possible éviter d’avoir un slider général pour chaque groupe.
Le Sub-button qui est au bout du séparateur Etagères me permet de régler les réglages du groupe des deux étagères. J’ai réussi à adapter la couleur de fond par rapport a celle qui était présente de base mais je cherche un moyen pour que la couleur de ce sub-button soit celle du groupe étagère comme le fond les boutons slider.
J’ignore si je me fais bien comprendre mais un peu d’aide serait vraiment appréciable.
Merci d’avance !
1 « J'aime »
Bonsoir, c’est possible simplement :
Exemple avec condition pour la couleur en plus
.bubble-sub-button-1 {
background-color: ${hass.states['climate.daikinsalon'].state === 'off' ? '' : hass.states['climate.daikinsalon'].state === 'cool' ? 'rgba(87, 160, 238, 1)' : hass.states['climate.daikinsalon'].state === 'heat' ? 'rgba(238, 87, 87, 1)' : 'purple' } !important;
}
A mettre dans les custom styles
Je viens de faire un test, ceci est fonctionnel chez moi avec la dernière version en date de BubbleCard (2.2.0)
styles: |
div.bubble-sub-button.bubble-sub-button-1.background-on {
background-color: rgb( ${hass.states['YOUR_LIGHT_ENTITY_ID'].attributes.rgb_color} );
}
Un énorme merci ça fonctionne parfaitement !
Mishroom chips pour cette ligne
Bonjour, @Clooos et la communauté
Je chercher a rendre transparent le fond du popup bubble card mais je n’y arrive pas quelqu’un aurait une piste?
J’ai essayé via styles et card mod sans succès.
Merci
