Balu dann bleibt nur warten und hoffen auf 4.3 oder selbst ein Widget erstellen. Aber auch das ist kein Hexenwerk.
layout page mit transparenten item
-
lenschith
- Beiträge: 313
- Registriert: 11. Dez 2020 22:36
Re: layout page mit transparenten item
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.
Balu dann bleibt nur warten und hoffen auf 4.3 oder selbst ein Widget erstellen. Aber auch das ist kein Hexenwerk.
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED
-
BaluderBaer
- Beiträge: 90
- Registriert: 2. Mär 2023 20:26
Re: layout page mit transparenten item
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
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
-
BaluderBaer
- Beiträge: 90
- Registriert: 2. Mär 2023 20:26
Re: layout page mit transparenten item
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 )
evtl hat ja jemand eine gute idee dazu .
Danke an alle
balu
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;
Danke an alle
balu
-
lenschith
- Beiträge: 313
- Registriert: 11. Dez 2020 22:36
Re: layout page mit transparenten item
Underline funktioniert bei mir habe aber das
bold habe ich bei mir auch nicht hin bekommen.
Vermute mal das geht nicht bei Item-List
weggelassen.;
Code: Alles auswählen
text-decoration: underline
Vermute mal das geht nicht bei Item-List
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED
-
peter-pan
- Beiträge: 2758
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: layout page mit transparenten item
Habe mal bei mir etwas rumgespielt, und
List-Item-SetUp-Beispiel:
Das sieht dann so aus:
Du musst auf jeden Fall die Strichpunkte (Semikola ";") weglassen 
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
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.3.5 openhabian
-
lenschith
- Beiträge: 313
- Registriert: 11. Dez 2020 22:36
Re: layout page mit transparenten item
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
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
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED
-
BaluderBaer
- Beiträge: 90
- Registriert: 2. Mär 2023 20:26
Re: layout page mit transparenten item
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
danke
balu
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
balu
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
-
peter-pan
- Beiträge: 2758
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: layout page mit transparenten item
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
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
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.3.5 openhabian
-
BaluderBaer
- Beiträge: 90
- Registriert: 2. Mär 2023 20:26
Re: layout page mit transparenten item
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
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: []
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
-
Harka
- Beiträge: 489
- Registriert: 30. Apr 2021 13:13
Re: layout page mit transparenten item
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)
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