( solved ) fragen zur farbe in pages

Einrichtung der openHAB Umgebung und allgemeine Konfigurationsthemen.

Moderatoren: seppy, udo1toni

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo zusammen

DANKE DANKE DANKE

mit den aenderungen von "udo1toni" funzt die temperaturanzeige jetzt richtig. ( und kann diese erweitern / veraendern )

wenn wir es jetzt noch mit dem header hinbekommen koennten, waere ich super gluecklich ( punkt 1 auf der obrigen liste ) !!!
( nicht ueber die arbeit die dann vor mir liegt, sondern ueber das aussehen der seite ) :D :D :D

dennoch schon einmal vielen vielen dank fuer eure unterstuetzung bzw hilfe

baluderbaer

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

Hallo zusammen
als erstes einmal , sorry
heute nacht ist die 2 info anscheinend kompl schief gegangen.

wurde einfach nicht angehangen ....


zu meiner frage, warum wird hier dr header in der einen ansicht richtig angezeigt, jedoch wenn ich im overview die page anzeigen lasse ist dies nicht ok
es ist hierbei egal welche farben ich einstelle ( unterer bereich )
yellow green red blue etc. der eine richtig, der andere zeigt immer blaue schrift auf wessen grund. hierbei ist es auch egal ob ich den "card-header" drin habe oder nicht.

config:
label: Testlayout Farben Temperatur im Haus
order: "20"
sidebar: true
style:
background: silver
backgroundImage: /static/garage.jpg
stylesheet: |
.item-after {
color: blue;
font-weight: bold;
font-size: 120%
color: blue;
background-color: yellow;
}
.card-header {
color: blue;
font-weight: bold;
font-size: 100%;
color: blue;
background-color: orange;
}
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-list-card
config: {}
slots:
default:
- component: oh-list-item
config:
listButton: true
style:
background-color: wheat
font-size: 120%
font-weight: bold;
textColor: red
title: Temperatur Steckdosen


wo ist hier mein denkfehler ???


Danke an alle
ihr seit einfach mal spitze und hilfsbereit, ( muss auch mal gesagt werden )

balu der baer
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Harka
Beiträge: 475
Registriert: 30. Apr 2021 13:13
Answers: 19

Re: fragen zur farbe in pages

Beitrag von Harka »

schwer zu erkennen. Nutze bitte für Code bitte die BBCodes ( </>)
Sieht aber so aus das Du stylesheet an der falschen Stelle abgelegt hast.
Versuch mal

Code: Alles auswählen

  title: Temperatur Steckdosen
  stylesheet: |
    .card-header {
      color: blue;
      font-weight: bold;
      font-size: 100%;
      background-color: orange;
    }
und zwar wenn Du hier auf Edit-YAML klickst
ForumFarbe10.png
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo harka
das ist der komplette code fuer die page.
es ist egal ob ich diesen teil oben rein kopiere oder bei der ueberschrift.
ergebniss ist immer das gleiche, wie bei den screenshots

anbei hoffe ich jetzt mit der richtigen formatierung der komplette code der testseite

Code: Alles auswählen

config:
  label: Testlayout Farben Temperatur im Haus
  order: "20"
  sidebar: true
  style:
    background: silver
    backgroundImage: /static/garage.jpg
  stylesheet: |
    .item-after {
      color: blue;
      font-weight: bold;
      font-size: 120%
      color: blue;
      background-color: yellow;
    }
    .card-header {
      color: blue;
      font-weight: bold;
      font-size: 100%;
      color: blue;
      background-color: orange;
    }
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 120%
                                font-weight: bold;
                              textColor: red
                              title: Temperatur Steckdosen
                          - component: oh-label-item
                            config:
                              badge: =@'Ankleidezimmer_Drucker_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Ankleidezimmer_Drucker_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Ankleidezimmer
                          - component: oh-label-item
                            config:
                              badge: =@'Treppe_oben_Beleuchtung_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Treppe_oben_Beleuchtung_Temperatur'
                                -10)/3),6),0)]
                              icon: Temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Flur 1 tes OG
                          - component: oh-label-item
                            config:
                              badge: =@'Wohnzimmerschrank_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Wohnzimmerschrank_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Wohnzimmer
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Hue Sensor - API V2 - Sensor
                          - component: oh-label-item
                            config:
                              badge: =@'Hue_Sensor_1_API_V2__Test_Buero_Temperature'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Hue_Sensor_1_API_V2__Test_Buero_Temperature'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: PapayaWhip
                                font-size: 100%
                                font-weight: bold;
                              textColor: red
                              title: Hue Test Sensor 1 ( Kellertreppe unten )
                          - component: oh-label-item
                            config:
                              badge: =@'Hue_Sensor_2_API_V2__Test_Buero_Temperature'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Hue_Sensor_2_API_V2__Test_Buero_Temperature'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: PapayaWhip
                                font-size: 100%
                                font-weight: bold;
                              textColor: red
                              title: Hue Test Sensor 2 ( Kellertreppe oben )
                          - component: oh-label-item
                            config:
                              badge: =@'Hue_Sensor_3_API_V2__Test_Buero_Temperature'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Hue_Sensor_3_API_V2__Test_Buero_Temperature'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: PapayaWhip
                                font-size: 100%
                                font-weight: bold;
                              textColor: red
                              title: Hue Test Sensor 3 ( Treppe 1 OG unten )
                          - component: oh-label-item
                            config:
                              badge: =@'Hue_Sensor_4_API_V2__Test_Buero_Temperature'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Hue_Sensor_4_API_V2__Test_Buero_Temperature'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: PapayaWhip
                                font-size: 100%
                                font-weight: bold;
                              textColor: red
                              title: Hue Test Sensor 4 ( Treppe 1 OG oben )
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 120%
                                font-weight: bold;
                              textColor: red
                              title: Temperatur Steckdosen
                          - component: oh-label-item
                            config:
                              badge: =@'Esszimmertisch_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Esszimmertisch_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Esszimmertisch
                          - component: oh-label-item
                            config:
                              badge: =@'Terrassentuer_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Terrassentuer_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Terrassentuer
                          - component: oh-label-item
                            config:
                              badge: =@'Kueche_oben_Rechts_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Kueche_oben_Rechts_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Kueche
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Aktuelle Temperatur Heizkoerper
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Wintergarten_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Wintergarten_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: LemonChiffon
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Wintergarten
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Bad_oben_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Bad_oben_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: gold
                                font-size: 100%
                                font-weight: bold;
                              textColor: red
                              title: Bad 1 tes OG
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Bad_unten_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Bad_unten_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: gold
                                font-size: 100%
                                font-weight: bold;
                              textColor: red
                              title: Bad EG
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Schlafzimmer_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Schlafzimmer_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Schlafzimmer 1 tes OG
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 120%
                                font-weight: bold;
                              textColor: red
                              title: Temperatur Steckdosen
                          - component: oh-label-item
                            config:
                              badge: =@'Wintergarten_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Wintergarten_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Wintergarten
                          - component: oh-label-item
                            config:
                              badge: =@'Universal_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Universal_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Universal
                          - component: oh-label-item
                            config:
                              badge: =@'Gartenhaus_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Gartenhaus_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: LightSlateGray
                                font-size: 100%
                                font-weight: bold;
                              textColor: white
                              title: Gartenhaus Stromstein Vorgarten
                          - component: oh-label-item
                            config:
                              badge: =@'Hecke_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Hecke_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: LightSlateGray
                                font-size: 100%
                                font-weight: bold;
                              textColor: white
                              title: Gartenhaus Stromstein Steingarten
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Heizkörperregler Aktuelle Temperatur
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Wintergarten_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Wintergarten_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Wintergarten
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Heizkörperregler Aktuelle Temperatur
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Bad_oben_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Bad_oben_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Bad 1 tes OG
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Schlafzimmer_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Schlafzimmer_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Schlafzimmer 1 tes OG
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Heizkörperregler Aktuelle Temperatur
                          - component: oh-label-item
                            config:
                              badge: =@'Heizkorperregler_Bad_unten_Aktuelle_Temperatur'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Heizkorperregler_Bad_unten_Aktuelle_Temperatur'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Bad EG
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Temperatur Rauchmelder
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_004_FGSD002_Smoke_Detector_Dachboden_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_004_FGSD002_Smoke_Detector_Dachboden_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Dachboden
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_005_FGSD002_Smoke_Detector_Bad_1_tes_OG_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_005_FGSD002_Smoke_Detector_Bad_1_tes_OG_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Bad 1 tes OG
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_006_FGSD002_Smoke_Detector_Flur_1_tes_OG_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_006_FGSD002_Smoke_Detector_Flur_1_tes_OG_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: Temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Flur 1 tes OG
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_005_FGSD002_Smoke_Detector_Bad_1_tes_OG_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_005_FGSD002_Smoke_Detector_Bad_1_tes_OG_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Schlafzimmer
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_006_FGSD002_Smoke_Detector_Flur_1_tes_OG_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_006_FGSD002_Smoke_Detector_Flur_1_tes_OG_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: Temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Ankleidezimmer
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Temperatur Rauchmelder
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_007_FGSD002_Smoke_Detector_Flur_EG_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_007_FGSD002_Smoke_Detector_Flur_EG_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Flur EG
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_008_FGSD002_Smoke_Detector_Kueche_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_008_FGSD002_Smoke_Detector_Kueche_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Kueche
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_009_FGSD002_Smoke_Detector_Wohnzimmer_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_009_FGSD002_Smoke_Detector_Wohnzimmer_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Wohnzimmer
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_009_FGSD002_Smoke_Detector_Wohnzimmer_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_009_FGSD002_Smoke_Detector_Wohnzimmer_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Test ( Kinderzimmer )
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: true
                              style:
                                background-color: wheat
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Temperatur Rauchmelder
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_010_FGSD002_Smoke_Detector_Flur_Keller_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_010_FGSD002_Smoke_Detector_Flur_Keller_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Flur Keller
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_011_FGSD002_Smoke_Detector_Gaestezimmer_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_011_FGSD002_Smoke_Detector_Gaestezimmer_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Gaestezimmer
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_012_FGSD002_Smoke_Detector_Buero_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_012_FGSD002_Smoke_Detector_Buero_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Buero
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_013_FGCD001_Carbon_Monoxide_Sensor_Heitzungskeller_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_013_FGCD001_Carbon_Monoxide_Sensor_Heitzungskeller_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: Temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Heitzungskeller CO2
                          - component: oh-label-item
                            config:
                              badge: =@'Fibaro_Node_003_FGSD002_Smoke_Detector_Vorratsraum_Test_Temperature_Sensor'
                              badgeColor: =['black', 'teal','blue', 'yellow',
                                'green','orange','red'][Math.max(Math.min(~~((#'Fibaro_Node_003_FGSD002_Smoke_Detector_Vorratsraum_Test_Temperature_Sensor'
                                -10)/3),6),0)]
                              icon: Temperature
                              iconUseState: true
                              style:
                                background-color: white
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Vorratsraum
masonry: []
grid: []
canvas: []
DANKE FUER DEINE UNTERSTUETZUNG / ZEIT

balu
Zuletzt geändert von BaluderBaer am 31. Okt 2024 22:18, insgesamt 1-mal geändert.

Harka
Beiträge: 475
Registriert: 30. Apr 2021 13:13
Answers: 19

Re: fragen zur farbe in pages

Beitrag von Harka »

Du nutzt bisher List_Button und erzeugst damit Links die üblicher Weise genau so angezeigt werden.

E: um die Anzeige der List-Items dennoch zu zentrieren kannst Du jeweils wieder stylesheet anwenden. Beispiel:

Code: Alles auswählen

component: oh-list-item
config:
  listButton: false
  style:
    background-color: wheat
    font-size: 100%
  stylesheet: |
    .item-inner {
      justify-content: center;
    }
  textColor: black
  title: Temperatur Steckdosen

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

guten morgen harka

DANKE fuer die superschnelle antwort !!!!

eingebaut => ja
funktion jetzt gegeben => ja
verstehen = > absolut NEIN, sorry

warum reicht an der stelle die definition nicht aus ?? was bewirkt an dieser stelle der eintrag ( ausser das die funktion jetzt geht )
das haette ich nie geschaft !!!!

gruss
balu

Harka
Beiträge: 475
Registriert: 30. Apr 2021 13:13
Answers: 19

Re: fragen zur farbe in pages

Beitrag von Harka »

Moin,
:lol: verstehen - ich doch auch nicht. Hab auch nur sehr rudimentäre Kenntnisse von CSS und Co.

Ich gebe mal wieder, wie ich es für mich eingeordnet habe: Ein Link wie https://www.openhab.org/ wird wird ohne weitere Zutun in einer bestimmten Weise dargestellt. Das kann man sicher auch beeinflussen. Könnte mir auch gerade vorstellen, dass dies der elegantere Weg sein könnte.

Ansonsten sind deine Überschriften ja genau so Listeneinträge wie die Zeilen mit den Sensoren. Damit diese anders dargestellt werden muss dies individuell festgelegt werden. Wenn Du mehrere Eigenschaften ändern möchtest (zentriert, unterstrichen, ...), müsste es gehen dies einmal zentral als Variable o.ä. festzulegen und mit stylesheet nur jeweils diese Variable aufzurufen.?

Genau dieser Befehl .item-inner {justify-content: center; } ist nötig weil es nicht reicht den reinen Text zu zentrieren sondern dies muss bei dessen unmittelbaren Cheffin erbettelt werden.

BaluderBaer
Beiträge: 90
Registriert: 2. Mär 2023 20:26
Answers: 0

Re: fragen zur farbe in pages

Beitrag von BaluderBaer »

hallo zusammen

danke an alle,

funzt jetzt alles wie gewuenscht

ihr seit ein superteam, muss mal gesagt werden...... :D

balu

Antworten