openhabforum.de


https://openhabforum.de/

layout page mit transparenten item

https://openhabforum.de/viewtopic.php?t=9357

Seite 2 von 3

Re: layout page mit transparenten item

Verfasst: 11. Nov 2024 16:46
von lenschith
Danke für die Info.
Balu dann bleibt nur warten und hoffen auf 4.3 oder selbst ein Widget erstellen. Aber auch das ist kein Hexenwerk.
:D

Re: layout page mit transparenten item

Verfasst: 12. Nov 2024 11:46
von BaluderBaer
hey ihr zwei beide

am thema widget bin ich schon dran, klapp auch schon einiges.
habe noch 2 offen probleme damit, versuche diese aber erst mal selber zu klaren. werde mich evtl damit hier dann nocheinmal melden und ggf nachfragen wie ich dies machen muss.

danke erst mal an euch beide fuer diese super hilfe

balu

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 10:00
von BaluderBaer
hallo team

als wenn ich es nicht gewust habe, hier doch noch ein paar fragen.:

ich moechte den ueberschriftentext des dropdownmenues als "fettdruck" und / ober "unterstrichen" haben.
dazu muss ich vor dem text dies einschalten und danach wieder auschalten.

font-weight:bold;
font-weight:normal;

text-decoration: underline;
text-decoration: none;

ich kann anstellen was ich will, sowohl im widget als auch im layout ziehen beide parameter nicht.
es bleibt immer so wie oben im screenshot " ACCU - Carstenxxxxxx "
es kommt auch keine fehlermeldung in code .

die beschreibung der parameter habe ich aus.:
https://www.winkelb.com/css-font-weight

anbei der header bereich. ( beispiel )

Code: Alles auswählen

   - component: oh-list-item
     config:
       iconUseState: true
       style:
         background-color: wheat
         border-radius: 15px
         font-size: 120%
         font-weight: bold;
         noShadow: true
         text-decoration: underline;
       stylesheet: |
         .item-inner {
           justify-content: center;
         }
       textColor: red
       title: ACCU Hue Sensoren
	   font-weight: normal;
       text-decoration: none;
evtl hat ja jemand eine gute idee dazu .
Danke an alle

balu

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 12:28
von lenschith
Underline funktioniert bei mir habe aber das
;
weggelassen.

Code: Alles auswählen

text-decoration: underline
bold habe ich bei mir auch nicht hin bekommen.
Vermute mal das geht nicht bei Item-List

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 12:38
von peter-pan
Habe mal bei mir etwas rumgespielt, und
List-Item-SetUp-Beispiel:

Code: Alles auswählen

component: oh-list-item
config:
  action: group
  actionGroupPopupItem: gGrTop
  badge: Details
  badgeColor: blue
  style:
    --f7-badge-text-color: red
    --f7-list-item-title-font-size: 120%
    --f7-list-item-title-font-weight: bold
    text-decoration: underline
  title: MQTT - GroupTopic
Das sieht dann so aus:
underline.jpg
Du musst auf jeden Fall die Strichpunkte (Semikola ";") weglassen ;)

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 12:53
von lenschith
also bei mir wird das nicht BOLD Größe 120% oder die Underline funktionieren aber Fett gedruckt wird bei mir nichts.
Welche OH Version hast du zum testen verwendet? ich teste das auf 4.2.2 hatten schon was das mit 4.3 geklappt hat aber mit 4.2.2 nicht

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 13:09
von BaluderBaer
hallo leute

danke fuer deine antwort, jedoch klappen bei mir, naja
ich verwende die version 4.2.2

jetzt sehe ich zwar den unterstrich, jedoch auch obwohl ich es deakt habe auch bei den untermenues. gleiches verhalten auch bei dem eintrag oben.
und fett geht garnicht
anbei der code und ein screenshot von mir.

evtl siehst du hier etwas was ich falsch gemacht habe.
die ueberschrift und der erste eintrag sollten fett sein, jedoch nur die ueberschrift unterstrichen

Code: Alles auswählen

              - component: oh-grid-col
                config:
                  medium: "33"
                  small: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        accordionList: true
                        outline: true
                        simpleList: false
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              iconUseState: true
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                noShadow: true
                                font-weight: bold
                                text-decoration: underline
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: ACCU Hue Sensoren
                              text-decoration: none
                            slots:
                              accordion:
                                - component: oh-list-card
                                  config:
                                    accordionList: true
                                    noBorder: true
                                    noShadow: true
                                    outline: true
                                  slots:
                                    default:
                                      - component: oh-label-item
                                        config:
                                          action: analyzer
                                          actionAnalyzerChartType: day
                                          actionAnalyzerItems:
                                            - CarstenTabletBatteryLevel
                                          icon: oh:batterylevel
                                          iconUseState: true
                                          item: SamsungTablet_CarstenTabletBatteryLevel
                                          style:
                                            text-decoration: none
                                            background-color: green
                                            font-size: 100%
                                            font-weight: bold
                                          textColor: black
                                          title: Battery Level Tablet S6 Light
                                      - component: oh-label-item
                                        config:
                                          action: analyzer
                                          actionAnalyzerChartType: day
                                          actionAnalyzerItems:
                                            - CarstenTabletBatteryLevel
                                          icon: oh:batterylevel
                                          iconUseState: true
                                          item: SamsungTablet_CarstenTabletBatteryLevel
                                          style:
                                            background-color: green
                                            text-decoration: none
                                            font-size: 100%
                                          textColor: black
                                          title: Battery Level Tablet S6 Light
                                      - component: oh-label-item
                                        config:
                                          action: analyzer
                                          actionAnalyzerChartType: day
                                          actionAnalyzerItems:
                                            - CarstenTabletBatteryLevel
                                          icon: oh:batterylevel
                                          iconUseState: true
                                          item: SamsungTablet_CarstenTabletBatteryLevel
                                          style:
                                            text-decoration: none
                                            background-color: green
                                            font-size: 100%
                                          textColor: black
                                          title: Battery Level Tablet S6 Light
danke
balu

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 13:30
von peter-pan
Ich weiss jetzt nicht ganz genau was du meinst.

Wenn ich dein Bild anschaue, dann hast du eine List-Card mit mehreren List-Item().

Wenn ich mir aber deinen Yaml-Code anschaue, dann sieht es so aus als hättest du eine ListCard und ein List-Item, und danach eine List-Card mit mehreren List-Item(s), und das verstehe ich nicht ganz :o

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 15:57
von BaluderBaer
das ganze ist ein testlayout fuer dropdown menues mit hintergrund bild
drop down klappt soweit
jetzt wollte ich den letzten bereich die ueberschrift fett machen und untersrichen haben.
anzeige "fett" klappt garnicht, unterstrichen bedingt .

folge ist, das der komplette bereich unterstrichen ist.
evtl ist dies ja auch ein folgefehler, weil ich vorher etwas falsch gemacht habe
anbei der komplette code vorm testlayout mit screenshot

Code: Alles auswählen

config:
  label: TF - Test Uebersicht ACCU Staende DropDown
  order: "99"
  sidebar: true
  style:
    background-image: url("/static/Stargate.png")
    background-position: center
    background-repeat: no-repeat
    background-size: cover
  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:
                  medium: "33"
                  small: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        accordionList: true
                        outline: true
                        simpleList: false
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              iconUseState: true
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: ACCU Handy / Tablet
                            slots:
                              accordion:
                                - component: oh-list-card
                                  config:
                                    accordionList: true
                                    noBorder: true
                                    noShadow: true
                                    outline: true
                                  slots:
                                    default:
                                      - component: oh-list-card
                                        config:
                                          accordionList: true
                                          noBorder: true
                                          noShadow: true
                                          outline: true
                                        slots:
                                          default:
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: white
                                                  font-size: 100%
                                                  font-weight: bold
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: white
                                                  font-size: 100%
                                                  font-weight: bold
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: white
                                                  font-size: 100%
                                                  font-weight: bold
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
              - component: oh-grid-col
                config:
                  medium: "33"
                  small: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        accordionList: true
                        outline: true
                        simpleList: false
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              iconUseState: true
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              text-decoration: underline
                              textColor: red
                              title: ACCU Fibaro Sensoren
                            slots:
                              accordion:
                                - component: oh-list-card
                                  config:
                                    accordionList: true
                                    noBorder: true
                                    noShadow: true
                                    outline: true
                                  slots:
                                    default:
                                      - component: oh-list-card
                                        config:
                                          accordionList: true
                                          noBorder: true
                                          noShadow: true
                                          outline: true
                                        slots:
                                          default:
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: gray
                                                  font-size: 100%
                                                  font-weight: bold
                                                  opacity: 0.5
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: gray
                                                  font-size: 100%
                                                  font-weight: bold
                                                  opacity: 0.5
                                                  textColor: black
                                                title: Battery Level Tablet S6 Light
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: gray
                                                  font-size: 100%
                                                  font-weight: bold
                                                  opacity: 0.5
                                                  textColor: black
                                                title: Battery Level Tablet S6 Light
              - component: oh-grid-col
                config:
                  medium: "33"
                  small: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        accordionList: true
                        outline: true
                        simpleList: false
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              iconUseState: true
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: ACCU Fibaro Sensoren
                            slots:
                              accordion:
                                - component: oh-list-card
                                  config:
                                    accordionList: true
                                    noBorder: true
                                    noShadow: true
                                    outline: true
                                  slots:
                                    default:
                                      - component: oh-list-card
                                        config:
                                          accordionList: true
                                          noBorder: true
                                          noShadow: true
                                          outline: true
                                        slots:
                                          default:
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: transparent
                                                  font-size: 100%
                                                  font-weight: bold
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: transparent
                                                  font-size: 100%
                                                  font-weight: bold
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
                                            - component: oh-label-item
                                              config:
                                                action: analyzer
                                                actionAnalyzerChartType: day
                                                actionAnalyzerItems:
                                                  - CarstenTabletBatteryLevel
                                                icon: oh:batterylevel
                                                iconUseState: true
                                                item: SamsungTablet_CarstenTabletBatteryLevel
                                                style:
                                                  background-color: transparent
                                                  font-size: 100%
                                                  font-weight: bold
                                                textColor: black
                                                title: Battery Level Tablet S6 Light
              - component: oh-grid-col
                config:
                  medium: "33"
                  small: "50"
                  width: "100"
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        accordionList: true
                        outline: true
                        simpleList: false
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              iconUseState: true
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                noShadow: true
                                font-weight: bold
                                text-decoration: underline
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: ACCU Hue Sensoren
                              text-decoration: none
                            slots:
                              accordion:
                                - component: oh-list-card
                                  config:
                                    accordionList: true
                                    noBorder: true
                                    noShadow: true
                                    outline: true
                                  slots:
                                    default:
                                      - component: oh-label-item
                                        config:
                                          action: analyzer
                                          actionAnalyzerChartType: day
                                          actionAnalyzerItems:
                                            - CarstenTabletBatteryLevel
                                          icon: oh:batterylevel
                                          iconUseState: true
                                          item: SamsungTablet_CarstenTabletBatteryLevel
                                          style:
                                            text-decoration: none
                                            background-color: green
                                            font-size: 100%
                                            font-weight: bold
                                          textColor: black
                                          title: Battery Level Tablet S6 Light
                                      - component: oh-label-item
                                        config:
                                          action: analyzer
                                          actionAnalyzerChartType: day
                                          actionAnalyzerItems:
                                            - CarstenTabletBatteryLevel
                                          icon: oh:batterylevel
                                          iconUseState: true
                                          item: SamsungTablet_CarstenTabletBatteryLevel
                                          style:
                                            background-color: green
                                            text-decoration: none
                                            font-size: 100%
                                            font-weight: bold
                                          textColor: black
                                          title: Battery Level Tablet S6 Light
                                      - component: oh-label-item
                                        config:
                                          action: analyzer
                                          actionAnalyzerChartType: day
                                          actionAnalyzerItems:
                                            - CarstenTabletBatteryLevel
                                          icon: oh:batterylevel
                                          iconUseState: true
                                          item: SamsungTablet_CarstenTabletBatteryLevel
                                          style:
                                            text-decoration: none
                                            background-color: green
                                            font-size: 100%
                                            font-weight: bold
                                          textColor: black
                                          title: Battery Level Tablet S6 Light
masonry: []

Re: layout page mit transparenten item

Verfasst: 19. Nov 2024 17:02
von Harka
Moin,
Fett will bei mir bisher auch nicht. Den Unterstrich kannst Du auch grün färben. Hier ein Lösungsvorschlag mit zentralisierter Formatierung. (OH_4.3)

Code: Alles auswählen

component: oh-list-card
config:
  accordionList: true
  outline: true
  simpleList: false
slots:
  default:
    - component: oh-list-item
      config:
        iconUseState: true
        style:
          background-color: wheat
          border-radius: 15px
          font-size: 120%
          noShadow: true
        stylesheet: |
          .item-inner {
            justify-content: center;
            text-decoration-line: underline;
          }
        textColor: red
        title: ACCU Hue Sensoren
        text-decoration: none
      slots:
        accordion:
          - component: oh-list-card
            config:
              accordionList: true
              noBorder: true
              noShadow: true
              outline: true
              textColor: black
              style:
                text-decoration: none
                background-color: green
                font-size: 100%
              stylesheet: |
                .item-inner {
                  text-decoration-color: green;
                }
            slots:
              default:
                - component: oh-label-item
                  config:
                    action: analyzer
                    actionAnalyzerChartType: day
                    actionAnalyzerItems:
                      - CarstenTabletBatteryLevel
                    icon: oh:batterylevel
                    iconUseState: true
                    item: SamsungTablet_CarstenTabletBatteryLevel
                    title: Battery Level Tablet S6 Light
                - component: oh-label-item
                  config:
                    action: analyzer
                    actionAnalyzerChartType: day
                    actionAnalyzerItems:
                      - CarstenTabletBatteryLevel
                    icon: oh:batterylevel
                    iconUseState: true
                    item: SamsungTablet_CarstenTabletBatteryLevel
                    title: Battery Level Tablet S6 Light
                - component: oh-label-item
                  config:
                    action: analyzer
                    actionAnalyzerChartType: day
                    actionAnalyzerItems:
                      - CarstenTabletBatteryLevel
                    icon: oh:batterylevel
                    iconUseState: true
                    item: SamsungTablet_CarstenTabletBatteryLevel
                    title: Battery Level Tablet S6 Light
Alle Zeiten sind UTC+02:00
Seite 2 von 3

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de