Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. owl - Tauschbörse für CSS Klassen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    owl - Tauschbörse für CSS Klassen

    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      Buchi last edited by Buchi

      Parcel Control

      Anzeige der Sendungsverfolgung. Sicher noch nicht das endgültige Design aber schon mal ein Anfang 😉

      f0529c41-9a91-4e4c-9091-3bdcb1fe0bea-image.png

      Historie

      [2022-03-13] Typo korrigiert (Widget und CSS) "inDelivery"
      [2022-03-12] Erster Upload

      CSS

      .purple-plain-buchi.vis-owl-parcel-headline{
          border-radius: 3px 3px 3px 3px;
          height: 26px;
          width: 310px;
          background-color: #AF6BC3;
          box-shadow: 0px 0px 0px 1px rgba(82, 145, 164, 0.3);
      }
      
      .purple-plain-buchi.vis-owl-parcel-headline-text{
          color: #000000;
      }
      
      .purple-plain-buchi.vis-owl-parcel-sepline{
          opacity: 0;
          width: 690px;
      background-color: #444444;
      }
      
      .purple-plain-buchi.vis-owl-parcel-container {
      width: 712px;
      height: 650px;
      background-color: #222222;
      }
      
      .purple-plain-buchi.vis-owl-parcel{
          background-color: rgba(0, 0, 0, 1); 
          border-color: #Ece0ac;
          border-style: solid; 
          border-width: 1px 1px 1px 1px; 
          width: 694px;
          opacity: 0.92;
      background-image: linear-gradient(-225deg, #857F75 0%, #E9CCF9 48%, #AF6BC3 100%);
          
      }
      
      .purple-plain-buchi.vis-owl-parcel-id-inDelivery {
          color: #8739EB         ;
      }
      
      .purple-plain-buchi.vis-owl-parcel-name-inDelivery{
          color: #8739EB  ;
      }
      
      .purple-plain-buchi.vis-owl-parcel-status-inDelivery{
          color: #ffffff  ;
      }
      
      1 Reply Last reply Reply Quote 2
      • B
        Buchi last edited by

        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;
        }
        
        
        Damrak2022 1 Reply Last reply Reply Quote 0
        • sigi234
          sigi234 Forum Testing Most Active last edited by sigi234

          @buchi

          Hallo, wie bekomme ich den Hintergrund transparent?

          Edit 210322

          Hab es jetzt so gelöst:

          Screenshot (4781).png

          CSS

          /*transparent-sigi234*/
          
          .transparent-sigi234.vis-owl-parcel-headline {
           
              border-radius: 0px 0px 0px 0px;
           
              height: 40px;
           
              width: 990px;
           
              background-color: transparent;
              
          }
           
           
          .transparent-sigi234.vis-owl-parcel-headline-text  {
           
              font-size: 25px;
           
              color: #ffffff;
           
              text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-container {
           
          background-color: transparent;
          
          }
           
          .transparent-sigi234.vis-owl-parcel-container {
           
          overflow-x: hidden;
          overflow-y: hidden;
           
          }
           
          
          
          .transparent-sigi234.vis-owl-parcel-sepline {
           
              opacity: 1;
           
              width: 990px;
              background-color: #ffffff;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-container {
           
              top: 52px;
           
              width: 990px;
           
              height: 250px;
           
              background-color: transparent;
           
              overflow-x: hidden;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel {
              
              background-color: transparent; 
              
              border-radius: 5px 5px 5px 5px;
           
              width: 990px;
           
              opacity: 0.92;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-source {
              
              background-color: #008a00; 
              
              border-radius: 5px 5px 5px 5px;
           
              width: 990px;
           
              opacity: 0.92;
              
              position: relative;
           
              top: 50%;
           
              -webkit-transform: translateY(-50%);
           
              -ms-transform: translateY(-50%);
           
              transform: translateY(-50%);
              
          }
           
           
          .transparent-sigi234.vis-owl-parcel-id-inDelivery {
           
              color: #ffffff;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-name-inDelivery {
           
              color: #ffffff;
              width: 480px;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-status-inDelivery {
           
              color: #3cff33;
              padding-left: 205px;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-name {
           
              color: #ffffff;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-id {
           
              color: #ffffff;
           
          }
           
           
          .transparent-sigi234.vis-owl-parcel-status {
           
              color: #ffffff;
              
          
          
          }
          

          CSS Hintergrund : transparent

          Tilimanka DJMarc75 2 Replies Last reply Reply Quote 1
          • Tilimanka
            Tilimanka @sigi234 last edited by

            @sigi234
            versuch mal
            background: linear-gradient(transparent)

            1 Reply Last reply Reply Quote 0
            • DJMarc75
              DJMarc75 @sigi234 last edited by

              @sigi234 said in owl - Tauschbörse für CSS Klassen:

              Hallo, wie bekomme ich den Hintergrund transparent?

              Weiss nicht ob Du das im Widgetforum schon gelesen hast aber ich habe es folgend gelöst:

              "xyz".vis-owl-parcel-container {
              
              background-color: transparent;
              }
              

              und anschliessend ...

              2022-03-18 (7).png

              um auch den Hintergrund des kompletten Widgets (oben und links) transparent zu bekommen.

              1 Reply Last reply Reply Quote 1
              • DJMarc75
                DJMarc75 last edited by DJMarc75

                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

                1 Reply Last reply Reply Quote 0
                • DJMarc75
                  DJMarc75 last edited by 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;
                  }
                  
                  Damrak2022 1 Reply Last reply Reply Quote 2
                  • Chaot
                    Chaot @Buchi last edited by

                    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;
                    }
                    
                    1 Reply Last reply Reply Quote 2
                    • B
                      basty2 @Buchi last edited by basty2

                      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 Reply Quote 2
                      • Damrak2022
                        Damrak2022 @Buchi last edited by

                        @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.

                        Chaot 1 Reply Last reply Reply Quote 0
                        • Chaot
                          Chaot @Damrak2022 last edited by

                          @damrak2022 CSS Klasse wäre in dem Beispiel:

                          gray-compact-buchi
                          
                          Damrak2022 1 Reply Last reply Reply Quote 0
                          • Damrak2022
                            Damrak2022 @Chaot last edited by

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

                            gray-compact-buchi

                            Okay, danke, habe ich geändert.

                            1 Reply Last reply Reply Quote 0
                            • Damrak2022
                              Damrak2022 @DJMarc75 last edited by Damrak2022

                              @djmarc75 gelöscht

                              B 1 Reply Last reply Reply Quote 0
                              • B
                                Buchi @Damrak2022 last edited by

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

                                Damrak2022 1 Reply Last reply Reply Quote 1
                                • Damrak2022
                                  Damrak2022 @Buchi last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  882
                                  Online

                                  31.9k
                                  Users

                                  80.1k
                                  Topics

                                  1.3m
                                  Posts

                                  7
                                  18
                                  2078
                                  Loading More Posts
                                  • Oldest to Newest
                                  • Newest to Oldest
                                  • Most Votes
                                  Reply
                                  • Reply as topic
                                  Log in to reply
                                  Community
                                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                  The ioBroker Community 2014-2023
                                  logo