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. owl - Tauschbörse für CSS Klassen

NEWS

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.8k

owl - Tauschbörse für CSS Klassen

Geplant Angeheftet Gesperrt Verschoben Visualisierung
18 Beiträge 7 Kommentatoren 2.6k Aufrufe 16 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.
  • DJMarc75D Online
    DJMarc75D Online
    DJMarc75
    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
    0
    • DJMarc75D Online
      DJMarc75D Online
      DJMarc75
      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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 Offline
          B Offline
          basty2
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              0
              • ChaotC Chaot

                @damrak2022 CSS Klasse wäre in dem Beispiel:

                gray-compact-buchi
                
                Damrak2022D Offline
                Damrak2022D Offline
                Damrak2022
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von Damrak2022
                  #16

                  @djmarc75 gelöscht

                  Mit besten Grüßen
                  Andy

                  B 1 Antwort Letzte Antwort
                  0
                  • Damrak2022D Damrak2022

                    @djmarc75 gelöscht

                    B Offline
                    B Offline
                    Buchi
                    schrieb am zuletzt editiert von
                    #17

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

                    Beste Grüße
                    Gerhard

                    Damrak2022D 1 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 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

                      852

                      Online

                      32.4k

                      Benutzer

                      81.5k

                      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