Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. CSS Training

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    10
    1
    322

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.5k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.5k

CSS Training

Geplant Angeheftet Gesperrt Verschoben Visualisierung
17 Beiträge 8 Kommentatoren 3.2k Aufrufe 18 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO OliverIO

    @enrico-fischer

    Warum wiederholst du bei container_radius immer alles?
    reicht da nicht eine container klasse und 3 oder 4 radius klassen, die nur den radius jeweils definieren?
    bei custom-radio/glow auch

    .container_radius{
        color: white;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
        border: 0.5px solid #29323C;
    }
     
    .container_radius10px {
        border-radius: 30px;
    }
    .container_radius30px {
        border-radius: 30px;
    }
    

    als css klasse kann man dann die beiden kombinieren

    <div class="container_radius container_radius10px"></div>
    <div class="container_radius container_radius30px"></div>
    

    und die Namen noch kürzen

    das macht css etwas pflegeleichter und man muss die selben parameter bei Änderung nicht an mehreren Stellen pflegen

    Enrico FischerE Offline
    Enrico FischerE Offline
    Enrico Fischer
    schrieb am zuletzt editiert von
    #5

    @oliverio Ja mach ich eigendlich auch. Ist nur etwas einfacher zu verstehen wenn sich ein Neuling damit beschäftigt.

    1 Antwort Letzte Antwort
    0
    • Enrico FischerE Enrico Fischer

      @wszene

      Du musst bin deinem Schalter in Ränder noch den Wert eingeben für True oder False.In dem unten angehängtem Code istballes drin.Du musst nur in das Feld mit dem XXXXX deinen Schalter angeben.

      {wert:XXXXXXXXXXXXXXX;wert == "true" ? "#17e83b": ""}
      

      Unbenannt.jpg

      FoodFighterF Offline
      FoodFighterF Offline
      FoodFighter
      schrieb am zuletzt editiert von
      #6

      @enrico-fischer
      Beim linken Schalter
      "Beispiel: Widget = Material bool Switch_____CSS Class:custom-radio_radius30px_____"
      sehe ich auch keine Auswirkungen bei der Rand-Farbe (In deinem Demo-Video ebenfalls nicht).
      :thinking_face:

      Nichts desto trotz - sehr schön gemacht, vielen Dank!

      Enrico FischerE 1 Antwort Letzte Antwort
      0
      • Enrico FischerE Enrico Fischer

        @wszene

        Du musst bin deinem Schalter in Ränder noch den Wert eingeben für True oder False.In dem unten angehängtem Code istballes drin.Du musst nur in das Feld mit dem XXXXX deinen Schalter angeben.

        {wert:XXXXXXXXXXXXXXX;wert == "true" ? "#17e83b": ""}
        

        Unbenannt.jpg

        WszeneW Offline
        WszeneW Offline
        Wszene
        schrieb am zuletzt editiert von
        #7

        @enrico-fischer sagte in CSS Training:

        @wszene

        Du musst bin deinem Schalter in Ränder noch den Wert eingeben für True oder False.In dem unten angehängtem Code istballes drin.Du musst nur in das Feld mit dem XXXXX deinen Schalter angeben.

        {wert:XXXXXXXXXXXXXXX;wert == "true" ? "#17e83b": ""}
        

        Unbenannt.jpg


        Danke dir habe es gefunden

        Meine Hard- & Software:

        • MSI Cubi 5 10M-049DE mit Proxmox
        • CC2652P Zigbee Stick
        • Steckdosen mit Tasmota und Zigbee
        • Lichtschalter mit Tasmota
        • IKEA TRÅDFRI Glühbirnen
        • Aqara Sensoren
        1 Antwort Letzte Antwort
        0
        • FoodFighterF FoodFighter

          @enrico-fischer
          Beim linken Schalter
          "Beispiel: Widget = Material bool Switch_____CSS Class:custom-radio_radius30px_____"
          sehe ich auch keine Auswirkungen bei der Rand-Farbe (In deinem Demo-Video ebenfalls nicht).
          :thinking_face:

          Nichts desto trotz - sehr schön gemacht, vielen Dank!

          Enrico FischerE Offline
          Enrico FischerE Offline
          Enrico Fischer
          schrieb am zuletzt editiert von
          #8

          @foodfighter beim linken ist der grüne rand auch nicht drin.

          FoodFighterF 1 Antwort Letzte Antwort
          0
          • Enrico FischerE Enrico Fischer

            @foodfighter beim linken ist der grüne rand auch nicht drin.

            FoodFighterF Offline
            FoodFighterF Offline
            FoodFighter
            schrieb am zuletzt editiert von FoodFighter
            #9

            @enrico-fischer
            Ich habe das Projekt extra nochmal frisch importiert.
            links ist der grüne Rand auch drin

            Screenshot 2022-01-14 151716.png

            edit:
            Ich hatte die Hoffnung, dass der ausgewaschene Rand dadurch die Farbe ändern würde :D

            Enrico FischerE 1 Antwort Letzte Antwort
            0
            • FoodFighterF FoodFighter

              @enrico-fischer
              Ich habe das Projekt extra nochmal frisch importiert.
              links ist der grüne Rand auch drin

              Screenshot 2022-01-14 151716.png

              edit:
              Ich hatte die Hoffnung, dass der ausgewaschene Rand dadurch die Farbe ändern würde :D

              Enrico FischerE Offline
              Enrico FischerE Offline
              Enrico Fischer
              schrieb am zuletzt editiert von
              #10

              @foodfighter

              hast Recht.Mach bei Weite 1 und bei style Solid dann geht es wenn du deinen Adapter eingetragen hast

              Unbenannt.jpg

              FoodFighterF 1 Antwort Letzte Antwort
              0
              • Enrico FischerE Enrico Fischer

                @foodfighter

                hast Recht.Mach bei Weite 1 und bei style Solid dann geht es wenn du deinen Adapter eingetragen hast

                Unbenannt.jpg

                FoodFighterF Offline
                FoodFighterF Offline
                FoodFighter
                schrieb am zuletzt editiert von
                #11

                @enrico-fischer
                danke

                1 Antwort Letzte Antwort
                0
                • S Offline
                  S Offline
                  sebwirtz
                  schrieb am zuletzt editiert von
                  #12

                  Hi. Danke für dein Training.
                  Bin noch voll der noob was CSS angeht.

                  Verstehe deine CSS soweit, aber ich würde gerne diesen Glow bei bei einem Widget haben wenn dies Aktiv ist. Nur da frage ich mich, was trage ich wo ein...

                  Könntest du/ihr mir dabei behilflich sein?

                  R 1 Antwort Letzte Antwort
                  0
                  • S sebwirtz

                    Hi. Danke für dein Training.
                    Bin noch voll der noob was CSS angeht.

                    Verstehe deine CSS soweit, aber ich würde gerne diesen Glow bei bei einem Widget haben wenn dies Aktiv ist. Nur da frage ich mich, was trage ich wo ein...

                    Könntest du/ihr mir dabei behilflich sein?

                    R Offline
                    R Offline
                    Revobobo
                    schrieb am zuletzt editiert von
                    #13

                    @sebwirtz
                    Ich befasse mich auch gerade NEU mit dem Thema.
                    Zuerst befüllst du den CSS Reiter in deinem Projekt mit dem CSS Code.
                    screenshot067.png

                    Danach markierst Du ein Widget und vergibst in der CSS Klasse einen Verweis zu dem CSS Code.
                    screenshot066.png

                    Viele Grüße

                    S J 2 Antworten Letzte Antwort
                    0
                    • R Revobobo

                      @sebwirtz
                      Ich befasse mich auch gerade NEU mit dem Thema.
                      Zuerst befüllst du den CSS Reiter in deinem Projekt mit dem CSS Code.
                      screenshot067.png

                      Danach markierst Du ein Widget und vergibst in der CSS Klasse einen Verweis zu dem CSS Code.
                      screenshot066.png

                      Viele Grüße

                      S Offline
                      S Offline
                      sebwirtz
                      schrieb am zuletzt editiert von
                      #14

                      @revobobo
                      Das habe ich alles gemacht. Aber das ändert mein Widget immer. Möchte gerne das der "glow" nur im aktiv bzw. True Fall erscheint.

                      GlasfaserG 1 Antwort Letzte Antwort
                      0
                      • S sebwirtz

                        @revobobo
                        Das habe ich alles gemacht. Aber das ändert mein Widget immer. Möchte gerne das der "glow" nur im aktiv bzw. True Fall erscheint.

                        GlasfaserG Offline
                        GlasfaserG Offline
                        Glasfaser
                        schrieb am zuletzt editiert von
                        #15

                        @sebwirtz sagte in CSS Training:

                        Möchte gerne das der "glow" nur im aktiv bzw. True Fall erscheint.

                        Das habe ich dir hier beschrieben , wo du dazu ein Thread erstellt hast zu deiner Frage :

                        https://forum.iobroker.net/topic/51563/widget-mit-animiertem-schatten-rand-css?loggedin=true

                        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                        1 Antwort Letzte Antwort
                        0
                        • R Revobobo

                          @sebwirtz
                          Ich befasse mich auch gerade NEU mit dem Thema.
                          Zuerst befüllst du den CSS Reiter in deinem Projekt mit dem CSS Code.
                          screenshot067.png

                          Danach markierst Du ein Widget und vergibst in der CSS Klasse einen Verweis zu dem CSS Code.
                          screenshot066.png

                          Viele Grüße

                          J Offline
                          J Offline
                          juergen2304
                          schrieb am zuletzt editiert von
                          #16

                          @revobobo hallo, gibt es ein widget oder css code für den tollen on/off switch?

                          LG

                          Enrico FischerE 1 Antwort Letzte Antwort
                          0
                          • J juergen2304

                            @revobobo hallo, gibt es ein widget oder css code für den tollen on/off switch?

                            LG

                            Enrico FischerE Offline
                            Enrico FischerE Offline
                            Enrico Fischer
                            schrieb am zuletzt editiert von
                            #17

                            @juergen2304 said in CSS Training:

                            @revobobo hallo, gibt es ein widget oder css code für den tollen on/off switch?

                            LG

                            Ganz oben im ersten Post ist alles drin.

                            1 Antwort Letzte Antwort
                            0
                            Antworten
                            • In einem neuen Thema antworten
                            Anmelden zum Antworten
                            • Älteste zuerst
                            • Neuste zuerst
                            • Meiste Stimmen


                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            773

                            Online

                            32.5k

                            Benutzer

                            81.7k

                            Themen

                            1.3m

                            Beiträge
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                            ioBroker Community 2014-2025
                            logo
                            • Anmelden

                            • Du hast noch kein Konto? Registrieren

                            • Anmelden oder registrieren, um zu suchen
                            • Erster Beitrag
                              Letzter Beitrag
                            0
                            • Home
                            • Aktuell
                            • Tags
                            • Ungelesen 0
                            • Kategorien
                            • Unreplied
                            • Beliebt
                            • GitHub
                            • Docu
                            • Hilfe