[DISKUSSION] Zeigt her eure Visus!

[adimaster]

eigene Styles in der benutzerdefinierten CSS-Datei

Hast Du ein kleines Bsp. dazu?

[Sensej]

Hast Du ein kleines Bsp. dazu?

Hi Adi,
ich versuche es am WE oder nächste Woche ein kleines Beispiel zu erstellen

MfG Juri

[Sensej]

Hallo zusammen,
hier ist ein kleines Beispiel.
Die Positionierung des Labels muss noch irgendwie auf "center" geändert werden, habe ich noch nicht geschafft.
Für Verbesserungsvorschläge bin offen

2022-04-30 19_01_59-Window.jpg

Template für die Schaltfläche

Code: Alles auswählen

<template name="Templ_Zentral">
        <group nowidget="true">
            <layout colspan="1"/>
            <trigger value="{{ val }}" mapping="{{ mapping }}" align="center">
                <layout colspan="1"/>
                <label/>
                <address transform="DPT:1.001" mode="write">{{ address }}</address>
            </trigger>
             <text align="center">
              <layout colspan="1"/>
              <label>{{ name }}</label>
            </text>
          </group>
      </template>

Gruppe "Zentral-Beleuchtung" mit der Funktion "Alles AUS"

Code: Alles auswählen

<group nowidget="true" class="zentral">
        <layout colspan="4"/>
         <group name="Zentral-Beleuchtung" nowidget="true">
           <layout colspan="4"/>
            <template name="Templ_Zentral">
           <value name="mapping">Zentral_Licht</value>
           <value name="val">0</value>
           <value name="address">0/0/0</value>
           <value name="name">Alles AUS</value>
           </template>
         </group>
	</group>

Mapping "Zentral_Licht"

Code: Alles auswählen

<mapping name="Zentral_Licht">
        <entry value="0">
          <icon name="light_light" color="#f9b234"/>
        </entry>
        <entry value="1">
          <icon name="light_light_dim_100"/>
        </entry>
      </mapping>

CSS-Style der Klasse "zentral"

Code: Alles auswählen

/*
 * Zentralle Funktionen
 */

.custom_zentral .icon {
  background-color: #343434;
  border-radius: 100%;
  padding: 0.2em;
  height: 2.6em;
  width: 2.6em;

}

.custom_zentral .switchPressed 
{
    border-style: none;
    background: none;
}

.custom_zentral .text > div 
{
  line-height: 1.5em;
  font-size: 0.7em;
}

.custom_zentral .text 
{
  border-radius: 0 0 7px 7px;
}

MfG Juri