Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. owl - Tauschbörse für CSS Klassen

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    17
    1
    408

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    5.0k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.4k

owl - Tauschbörse für CSS Klassen

Scheduled Pinned Locked Moved Visualisierung
18 Posts 7 Posters 3.0k Views 16 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • DJMarc75D Offline
    DJMarc75D Offline
    DJMarc75
    wrote on last edited by DJMarc75
    #9

    Falls jemand wissen möchte wie man einen Skrollbalken unten wegbekommt (der erscheint z.B. bei dem CSS "purple-plain-buchi" wenn man mehr als 3 Pakete im Widget einstellt) dann ist folgender Eintrag nötig:

    ."xyz".vis-owl-parcel-container {
    
    overflow-x: hidden;
    
    }
    
    

    edit: "xyz" ist der Namen des verwendeten CSS

    Lehrling seit 1975 !!!
    Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
    https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

    1 Reply Last reply
    0
    • DJMarc75D Offline
      DJMarc75D Offline
      DJMarc75
      wrote on last edited by DJMarc75
      #10

      Mahlzeit.

      Hier nun mal mein erster Versuch: EDIT - 30.03.2022

      Parcel Control

      Anzeige von mehr als 50 Zustellungen:

      2022-03-30 (3)_LI.jpg

      Einstellungen im Widget

      2022-03-30 (4).png 2022-03-30 (5).png

      bei text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px

      CSS

      .yellow-green-djmarc75.vis-owl-parcel-headline {
      
          border-radius: 5px 5px 5px 5px;
      
          height: 40px;
      
          width: 833px;
      
          background-color: #F0A30A;
          
      
      }
      
       
      .yellow-green-djmarc75.vis-owl-parcel-headline-text {
      
          font-size: 25px;
          
          color: #ffffff;
          
          text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px;
      
      }
      
       
      
      .yellow-green-djmarc75.vis-owl-parcel-sepline {
      
          opacity: 0;
      
          width: 833px;
      
          background-color: #444444;
      
      }
      
       
      
      .yellow-green-djmarc75.vis-owl-parcel-container {
      
          top: 52px;
      
          width: 833px;
      
          height: 695px;
      
          background-color: transparent;
      
          overflow-x: hidden;
      
      }
      
       
      
      .yellow-green-djmarc75.vis-owl-parcel{
          
          background-color: #008a00; 
          
          border-radius: 5px 5px 5px 5px;
      
          width: 798px;
      
          opacity: 0.92;
      
      }
      
      .yellow-green-djmarc75.vis-owl-parcel-source 
      {
          
          background-color: #008a00; 
          
          border-radius: 5px 5px 5px 5px;
      
          width: 833px;
      
          opacity: 0.92;
          
          position: relative;
      
          top: 50%;
      
          -webkit-transform: translateY(-50%);
      
          -ms-transform: translateY(-50%);
      
          transform: translateY(-50%);
          
      }
      
       
      
      .yellow-green-djmarc75.vis-owl-parcel-id-inDelivery {
      
          color: #ffffff;
          
      }
      
       
      
      .yellow-green-djmarc75.vis-owl-parcel-name-inDelivery{
      
          color: #ffffff;
          
          width: 833px;
      
      }
      
       
      
      .yellow-green-djmarc75.vis-owl-parcel-status-inDelivery{
      
          color: #ffffff;
      
      }
      
      
      .yellow-green-djmarc75.vis-owl-parcel-name{
      
          color: #ffffff;
          
          width: 833px;
      
      }
      
      
      .yellow-green-djmarc75.vis-owl-parcel-id{
      
          color: #ffffff;
      
      }
      
      
      .yellow-green-djmarc75.vis-owl-parcel-status{
      
          color: #ffffff;
      
      }
      
      .yellow-green-djmarc75.scrollbar
      {
          overflow-y: vissible;
      }
      

      Lehrling seit 1975 !!!
      Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
      https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

      Damrak2022D 1 Reply Last reply
      2
      • B Buchi

        owl - Odd Widget Library

        Sammlung von Widgets für die Vis. Link
        Diskussionen / Fragen zu den Designs bitte hier führen.

        Tauschbörse

        Ich würde mich freuen wenn sich hier mit der Zeit eine Tauschbörse für Designs zu meinen Widgets aufbaut. Da jede Vis anders ist, jeder einen anderen Geschmack hat aber man ja oft auf bereits bestehenden Designs aufbauen oder sich Ideen holen kann, erleichtert das sicher die Arbeit und hilft Einsteigern sich eine schöne Vis bauen zu können.

        Syntax der CSS Klassen

        Um nicht zu schnell die Übersicht zu verlieren und bei Rückfragen auch den Ersteller schnell finden zu können, würde ich vorschlagen die CSS Klassen wie folgt zu benennen:

        (Farbe)-(Stil)-(Name des Erstellers hier im Forum)

        Beispiel:
        dark-plain-buchi

        .dark-plain-buchi.vis-owl-flexcontrol-comp-container {
            background-color: #222222;
            border-radius:5px 5px 5px 5px;
            box-shadow: 0px 0px 0px 1px rgba(82, 145, 164, 0.3);
            opacity: 1;
        }
        

        Als Überschrift zu den CSS Klassen das jeweilige Widget, so dass schnell erkennbar ist wofür die CSS verwendbar sind und wenn möglich ein Bild damit man gleich sieht wie dann das Design letztendlich aussieht.

        Die Nutzung ist dann einfach über die Eigenschaften des Widgets im Abschnitt Generell mit der Eigenschaft CSS Klasse. Dadurch können beliebig viele Styles als CSS zur Verfügung gestellt werden und es ist möglich das Widget mehrmals mit jeweils anderem Design zu verwenden.

        7cca5d5d-9609-4743-b4d0-ad6c29a7730c-image.png
        Ein komplettes Beispiel erstelle ich gleich im nächsten Post ;)

        ChaotC Offline
        ChaotC Offline
        Chaot
        wrote on last edited by
        #11

        Ich mag ja auch eher Grün:
        Pakete.jpg

        .chaot.vis-owl-parcel-headline{
            border-radius: 3px 3px 3px 3px;
            height: 26px;
            width: 310px;
            background-color: #82de24;
            box-shadow: 0px 0px 0px 1px rgba(82, 145, 164, 0.3);
        }
         
        .chaot.vis-owl-parcel-headline-text{
            color: #000000;
        }
         
        .chaot.vis-owl-parcel-sepline{
            opacity: 0;
            width: 690px;
        background-color: #444444;
        }
         
        .chaot.vis-owl-parcel-container {
        width: 750px;
        height: 650px;
        background-color: #222222;
        }
         
        .chaot.vis-owl-parcel{
            background-color: rgba(0, 0, 0, 1); 
            border-color: #Ece0ac;
            border-style: solid; 
            border-width: 1px 1px 1px 1px; 
            width: 770px;
            opacity: 0.92;
        background-image: linear-gradient(90deg, rgba(130,222,36,1) 0%, rgba(205,233,126,1) 18%, rgba(130,222,36,1) 100%);
            
        }
         
        .chaot.vis-owl-parcel-id-inDelivery {
            color: #7d7d7d         ;
        }
         
        .chaot.vis-owl-parcel-name-inDelivery{
            color: #111111  ;
        }
         
        .chaot.vis-owl-parcel-status-inDelivery{
            color: #110916  ;
        }
        .chaot.vis-owl-parcel-container {
         
        background-color: transparent;
        }
        

        ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

        1 Reply Last reply
        2
        • B Buchi

          owl - Odd Widget Library

          Sammlung von Widgets für die Vis. Link
          Diskussionen / Fragen zu den Designs bitte hier führen.

          Tauschbörse

          Ich würde mich freuen wenn sich hier mit der Zeit eine Tauschbörse für Designs zu meinen Widgets aufbaut. Da jede Vis anders ist, jeder einen anderen Geschmack hat aber man ja oft auf bereits bestehenden Designs aufbauen oder sich Ideen holen kann, erleichtert das sicher die Arbeit und hilft Einsteigern sich eine schöne Vis bauen zu können.

          Syntax der CSS Klassen

          Um nicht zu schnell die Übersicht zu verlieren und bei Rückfragen auch den Ersteller schnell finden zu können, würde ich vorschlagen die CSS Klassen wie folgt zu benennen:

          (Farbe)-(Stil)-(Name des Erstellers hier im Forum)

          Beispiel:
          dark-plain-buchi

          .dark-plain-buchi.vis-owl-flexcontrol-comp-container {
              background-color: #222222;
              border-radius:5px 5px 5px 5px;
              box-shadow: 0px 0px 0px 1px rgba(82, 145, 164, 0.3);
              opacity: 1;
          }
          

          Als Überschrift zu den CSS Klassen das jeweilige Widget, so dass schnell erkennbar ist wofür die CSS verwendbar sind und wenn möglich ein Bild damit man gleich sieht wie dann das Design letztendlich aussieht.

          Die Nutzung ist dann einfach über die Eigenschaften des Widgets im Abschnitt Generell mit der Eigenschaft CSS Klasse. Dadurch können beliebig viele Styles als CSS zur Verfügung gestellt werden und es ist möglich das Widget mehrmals mit jeweils anderem Design zu verwenden.

          7cca5d5d-9609-4743-b4d0-ad6c29a7730c-image.png
          Ein komplettes Beispiel erstelle ich gleich im nächsten Post ;)

          B Online
          B Online
          basty2
          wrote on last edited by basty2
          #12

          Update: Bilder in der Breite fixiert und inDeliverToday hinzugefügt. Achtung: img.vis-owl-parcel-source ist gültig nicht nur für das CSS, muss ggf. wieder geändert werden.

          Hallo zusammen,
          für die Vielbesteller oder wenig Platzhaber.
          Ich habe eine Version erstellt mit nur einer Zeile. Und ich mag es dunkel. ;-)

          d2404697-f504-4d32-b235-15e7b3b4338a-image.png

          Bild für Amazon mit weißer Schrift notwendig.

          css bei mir mit Namen kompakt2

          .kompakt2.vis-owl-parcel {
          background-color: #280022;
          }
          
          .kompakt2.vis-owl-parcel-container {
              Background-color: transparent;
          }
          
          .kompakt2.vis-owl-parcel-id {
              visibility: hidden;
          }
          
          .kompakt2.vis-owl-parcel-name {
              left: 110px;
              height: 20px;
              color: grey;
          }
          
          .kompakt2.vis-owl-parcel-status{
              color:#292929;
              z-index: 14;
              width: 600px;
              height: 10px;
              top: 15px;
              left: 110px;
          }
          
          img.vis-owl-parcel-source{ 
           height: 17px;
           width: 40px; 
          } 
          
          .kompakt2.vis-owl-parcel-source{
              z-index: 14;
              max-width: 50px;
              max-height: 20px;
              top: 3px;
              left: 2px;
          }
          
          
          .kompakt2.vis-owl-parcel-name-inDelivery{
              color:#FFFFFF;
              z-index: 14;
              width: 460px;
              height: 20px;
              top: 0px;
              left: 60px;
          
          }
           
          .kompakt2.vis-owl-parcel-status-inDelivery{
              color:#81F781;
              z-index: 14;
              width: 660px;
              height: 20px;
              top: 0px;
              left: 180px;
              Background-color:#280022;
          }
          
          .kompakt2.vis-owl-parcel-id-inDelivery {
              visibility: hidden;
          }
          .kompakt2.vis-owl-parcel-DeliveryToday {
              Background-color:#280022;
          }
          
          .kompakt2.vis-owl-parcel-id-DeliveryToday {
              visibility: hidden;
          }
          
          .kompakt2.vis-owl-parcel-name-DeliveryToday {
              color:#FFFFFF;
              z-index: 14;
              width: 460px;
              height: 20px;
              top: 0px;
              left: 60px;
              Background-color:#280022;
          }
          .kompakt2.vis-owl-parcel-status-DeliveryToday {
              color:#81F781;
              z-index: 14;
              width: 660px;
              height: 20px;
              top: 0px;
              left: 180px;
              Background-color:#280022;
          }
          
          
          1 Reply Last reply
          2
          • B Buchi

            Parcel Control

            Kompakte Anzeige. Bei mir auf einem Dashboard zur Anzeige von max. 3 Sendung in Zustellung.

            96711420-1888-4d66-bd17-f4b235870598-image.png

            Historie

            [2022-03-13] Erster Upload

            CSS

            .gray-compact-buchi.vis-owl-parcel-container {
                top: 0px;
                left: 0px;
                width: 365px;
                background-color: #cccccc;
                overflow: hidden;
            }
            
            .gray-compact-buchi.vis-owl-parcel{
                height: 30px;
                width: 365px;
                background: linear-gradient(214deg, rgba(35,55,54,.6), rgba(45,58,153,0) 33.77%), 
                linear-gradient(29deg, rgba(35,55,54,.5), rgba(45,58,153,0) 33.77%);
            }
            
            .gray-compact-buchi.vis-owl-parcel-id{
                visibility: hidden;
            }
            
            .gray-compact-buchi.vis-owl-parcel-id-inDelivery{
                visibility: hidden;
            }
            
            .gray-compact-buchi.vis-owl-parcel-name-inDelivery{
                left: 110px;
                top: 2px;
                font-size: 10px;
                width: 240px;
                height: 10px;
                color: #095f96;
            }
            
            .gray-compact-buchi.vis-owl-parcel-status-inDelivery{
                left: 110px;
                top: 12px;
                width: 240px;
                height: 10px;
                font-size: 10px;
                color: #000000;
            }
            
            
            Damrak2022D Offline
            Damrak2022D Offline
            Damrak2022
            wrote on last edited by
            #13

            @buchi sagte in owl - Tauschbörse für CSS Klassen:

            Sorry, ich bin anscheinend nicht dazu in der Lage das richtig einzubinden.
            Wenn ich Dein CSS nehme und auf dem Tab CSS einsetze sieht es weiterhin so aus:
            Bildschirmfoto 2022-04-04 um 08.39.11.png
            Bildschirmfoto 2022-04-04 um 08.39.00.png

            Ich habe das Feld CSS Klasse auch schon leergelassen, mit und ohne Punkt am Anfang versucht und auch nur mit: vis-owl-parcel
            Mir ist schon klar das ich über CSS die Höhe, Breite Text und Farben konfigurieren kann. Aber das Widget müsste doch erstmal korrekt dargestellt werden.

            Mit besten Grüßen
            Andy

            ChaotC 1 Reply Last reply
            0
            • Damrak2022D Damrak2022

              @buchi sagte in owl - Tauschbörse für CSS Klassen:

              Sorry, ich bin anscheinend nicht dazu in der Lage das richtig einzubinden.
              Wenn ich Dein CSS nehme und auf dem Tab CSS einsetze sieht es weiterhin so aus:
              Bildschirmfoto 2022-04-04 um 08.39.11.png
              Bildschirmfoto 2022-04-04 um 08.39.00.png

              Ich habe das Feld CSS Klasse auch schon leergelassen, mit und ohne Punkt am Anfang versucht und auch nur mit: vis-owl-parcel
              Mir ist schon klar das ich über CSS die Höhe, Breite Text und Farben konfigurieren kann. Aber das Widget müsste doch erstmal korrekt dargestellt werden.

              ChaotC Offline
              ChaotC Offline
              Chaot
              wrote on last edited by
              #14

              @damrak2022 CSS Klasse wäre in dem Beispiel:

              gray-compact-buchi
              

              ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

              Damrak2022D 1 Reply Last reply
              0
              • ChaotC Chaot

                @damrak2022 CSS Klasse wäre in dem Beispiel:

                gray-compact-buchi
                
                Damrak2022D Offline
                Damrak2022D Offline
                Damrak2022
                wrote on last edited by
                #15

                @chaot sagte in owl - Tauschbörse für CSS Klassen:

                gray-compact-buchi

                Okay, danke, habe ich geändert.

                Mit besten Grüßen
                Andy

                1 Reply Last reply
                0
                • DJMarc75D DJMarc75

                  Mahlzeit.

                  Hier nun mal mein erster Versuch: EDIT - 30.03.2022

                  Parcel Control

                  Anzeige von mehr als 50 Zustellungen:

                  2022-03-30 (3)_LI.jpg

                  Einstellungen im Widget

                  2022-03-30 (4).png 2022-03-30 (5).png

                  bei text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px

                  CSS

                  .yellow-green-djmarc75.vis-owl-parcel-headline {
                  
                      border-radius: 5px 5px 5px 5px;
                  
                      height: 40px;
                  
                      width: 833px;
                  
                      background-color: #F0A30A;
                      
                  
                  }
                  
                   
                  .yellow-green-djmarc75.vis-owl-parcel-headline-text {
                  
                      font-size: 25px;
                      
                      color: #ffffff;
                      
                      text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px;
                  
                  }
                  
                   
                  
                  .yellow-green-djmarc75.vis-owl-parcel-sepline {
                  
                      opacity: 0;
                  
                      width: 833px;
                  
                      background-color: #444444;
                  
                  }
                  
                   
                  
                  .yellow-green-djmarc75.vis-owl-parcel-container {
                  
                      top: 52px;
                  
                      width: 833px;
                  
                      height: 695px;
                  
                      background-color: transparent;
                  
                      overflow-x: hidden;
                  
                  }
                  
                   
                  
                  .yellow-green-djmarc75.vis-owl-parcel{
                      
                      background-color: #008a00; 
                      
                      border-radius: 5px 5px 5px 5px;
                  
                      width: 798px;
                  
                      opacity: 0.92;
                  
                  }
                  
                  .yellow-green-djmarc75.vis-owl-parcel-source 
                  {
                      
                      background-color: #008a00; 
                      
                      border-radius: 5px 5px 5px 5px;
                  
                      width: 833px;
                  
                      opacity: 0.92;
                      
                      position: relative;
                  
                      top: 50%;
                  
                      -webkit-transform: translateY(-50%);
                  
                      -ms-transform: translateY(-50%);
                  
                      transform: translateY(-50%);
                      
                  }
                  
                   
                  
                  .yellow-green-djmarc75.vis-owl-parcel-id-inDelivery {
                  
                      color: #ffffff;
                      
                  }
                  
                   
                  
                  .yellow-green-djmarc75.vis-owl-parcel-name-inDelivery{
                  
                      color: #ffffff;
                      
                      width: 833px;
                  
                  }
                  
                   
                  
                  .yellow-green-djmarc75.vis-owl-parcel-status-inDelivery{
                  
                      color: #ffffff;
                  
                  }
                  
                  
                  .yellow-green-djmarc75.vis-owl-parcel-name{
                  
                      color: #ffffff;
                      
                      width: 833px;
                  
                  }
                  
                  
                  .yellow-green-djmarc75.vis-owl-parcel-id{
                  
                      color: #ffffff;
                  
                  }
                  
                  
                  .yellow-green-djmarc75.vis-owl-parcel-status{
                  
                      color: #ffffff;
                  
                  }
                  
                  .yellow-green-djmarc75.scrollbar
                  {
                      overflow-y: vissible;
                  }
                  
                  Damrak2022D Offline
                  Damrak2022D Offline
                  Damrak2022
                  wrote on last edited by Damrak2022
                  #16

                  @djmarc75 gelöscht

                  Mit besten Grüßen
                  Andy

                  B 1 Reply Last reply
                  0
                  • Damrak2022D Damrak2022

                    @djmarc75 gelöscht

                    B Offline
                    B Offline
                    Buchi
                    wrote on last edited by
                    #17

                    @damrak2022
                    Es wäre schön wenn die Bitte hier keine Diskussionen zu führen, beachtet wird.

                    Beste Grüße
                    Gerhard

                    Damrak2022D 1 Reply Last reply
                    1
                    • B Buchi

                      @damrak2022
                      Es wäre schön wenn die Bitte hier keine Diskussionen zu führen, beachtet wird.

                      Damrak2022D Offline
                      Damrak2022D Offline
                      Damrak2022
                      wrote on last edited by
                      #18

                      @buchi Sorry, das war ein Fehler von mir. Habe nicht darauf geachtet und werde es gleich löschen

                      Mit besten Grüßen
                      Andy

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      570

                      Online

                      32.7k

                      Users

                      82.5k

                      Topics

                      1.3m

                      Posts
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Home
                      • Recent
                      • Tags
                      • Unread 0
                      • Categories
                      • Unreplied
                      • Popular
                      • GitHub
                      • Docu
                      • Hilfe