Powerstylezcom

Um den WSC 5 / 3 Sheet Slider zu installieren, gehen Sie bitte wie folgt vor (Sie können auch die Checkbox nach jedem abgearbeiteten Arbeitsschritt aktivieren):

• Erstellen Sie im Admin Control Panel (ACP) unter folgenden Pfad für den WSC 5 / 3 Sheet Slider eine neue Box:

  
  

  Inhalt > Boxen > Box hinzufügen (Plus-Symbol klicken)

  1



• Es öffnet sich ein Pop up-Fenster, dort folgendes auswählen und dann speichern:

  
  

  Box Typ: Template

  Mehrsprachigkeit: Bleibt ihnen überlassen

  2



• Tragen sie auf der angezeigten Seite (allgemeine Angaben) folgende Angaben ein und wählen diverse Felder aus:

  
  

  Name: Sheet Slider

  Box Titel anzeigen: Bleibt ihnen überlassen

  3



• Tragen sie auf der unter dem Registernamen "Inhalte" angezeigten Seite folgende Angaben ein:

  
  

  Titel: Sheet Slider (bei mehrsprachigen Boxeninhalt dementsprechend im jeweiligen Eingabefeld)

  Fügen Sie den folgenden Code in das Feld "Inhalt" ein (bei mehrsprachigen Boxeninhalt dementsprechend im jeweiligen Eingabefeld):

  
  <!-- Sheet Slider for Woltlab Suite 5 & 3 Made by Gino Zantarelli 2020 http://www.zantarelli.com All under Copyright-no Freeware --> <!-- Sheet Slider v2.2.0 Copyright: 2018 zkreations Licensed under MIT | https://zkreations.github.io/SheetSlider/ --> <!--Sheet Slider--> <div class="sheetSlider sh-default sh-auto"> <input id="s1" type="radio" name="slide1" checked/> <input id="s2" type="radio" name="slide1"/> <input id="s3" type="radio" name="slide1"/> <input id="s4" type="radio" name="slide1"/> <input id="s5" type="radio" name="slide1"/> <input id="s6" type="radio" name="slide1"/> <div class="sh__content"> <!-- Slider Item 1 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=180" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h1>Ich bin ein H1-Titeltext!</h1> <span>Hier steht der Untertitel um eine Beschreibung anzuzeigen...</span> </div> </div> <!-- Slider Item 2 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=290" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h2>... und ich bin ein H2-Titeltext!</h2> <span>Hier steht der Untertitel mit <a href="https://www.unsplash.com">Weblink</a></span> </div> </div> <!-- Slider Item 3 --> <div class="sh__item"> <a href="https://www.unsplash.com"><img src="https://picsum.photos/1280/720?image=350" alt=""/></a> <!-- Item Info --> <div class="sh__meta"> <h4>Bild mit Weblink</h4> <span>Leitet bei Klick auf das Bild weiter nach <a href="https://www.unsplash.com">Unsplash.com</a></span> </div> </div> <!-- Slider Item 4 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=460" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h3>Ich bin ein H3-Titeltext!</h3> <span>Hier steht der Untertitel um eine Beschreibung anzuzeigen...</span> </div> </div> <!-- Slider Item 5 --> <div class="sh__item"> <img src="https://picsum.photos/1280/720?image=530" alt=""/> <!-- Item Info --> <div class="sh__meta"> <h4>Ich bin ein H4-Titeltext!</h4> <span>Hier steht der Untertitel um eine Beschreibung anzuzeigen...</span> </div> </div> <!-- Slider Item 6 --> <div class="sh__item"> <a href="https://www.unsplash.com"><img src="https://picsum.photos/1280/720?image=680" alt=""/></a> <!-- Item Info --> <div class="sh__meta"> <h4>Bild mit Weblink</h4> <span>Leitet bei Klick auf das Bild weiter nach <a href="https://www.unsplash.com">Unsplash.com</a></span> </div> </div> </div> <!-- .sh__content --> <!-- Button --> <div class="sh__btns"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> <label for="s6"></label> </div> <!-- .sh__btn --> <!-- Arrows --> <div class="sh__arrows"> <label for="s1"></label> <label for="s2"></label> <label for="s3"></label> <label for="s4"></label> <label for="s5"></label> <label for="s6"></label> </div> <!-- .sh__arrows --> <!--Control--> <button class="sh-control"></button> </div> <!-- End Sheet Slider --> <style> .sheetSlider { line-height: 1.48; position: relative; width: 100%; padding-bottom: 30.857143%; /* Höhe des Sliders */ overflow: hidden; -webkit-font-smoothing: antialiased; color: #fff; } .sheetSlider a { color: #fff; } .sheetSlider input, .sh__btns { display: none; } /* reset */ .sheetSlider h4,.sheetSlider label,.sheetSlider a,.sheetSlider img,.sheetSlider span,.sh-control { background: none; padding: 0; margin: 0; border: 0; outline: 0; box-shadow: 0 0 transparent; text-decoration: none; } /* Inhalt */ .sh__content { position: absolute; height: 100%; width: 100%; transition: transform .7s cubic-bezier(.54,0,.1,1); transform: translate3d(0, 0, 0); } /* Anpassung Elemente */ .sh__item { display: block; position: absolute; top: 0;left: 0; width: 100%; height: 100%; } .sh__item img { width: 100%; } /* Anpassung Textinhalte */ .sh__meta { left: 25px; top: 25px; position: absolute; background-color: rgba(0, 0, 0, 0.4); /* Textblock Hintergrundfarbe hier anpassen */ padding: 8px 18px; /* Textblock Randabstand hier anpassen */ text-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 5px rgba(0, 0, 0, .16); max-width: 100%; opacity: 0; transform: translate3d(0, 4em, 0); transition: opacity .7s .4s,transform .7s .4s; } .sh__meta h1, .sh__meta h2, .sh__meta h3, .sh__meta h4, .sh__meta span { display: block; margin-bottom: 0px !important; } .sh__meta span { font-weight: 400; padding-top: 0px; } .sh__meta a { text-decoration: underline dotted !important; transition: color .5s; } .sh__meta span { color: #ffffff !important; /* Untertitel Schriftfarbe hier anpassen */ font-size: 15px; /* Untertitel Schriftgröße hier anpassen */ } .sh__meta h1 { font-size: 28px; /* H1 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta h2 { font-size: 23px; /* H2 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta h3 { font-size: 18px; /* H3 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta h4 { font-size: 34px; /* H4 Schriftgröße hier anpassen */ line-height: 1.28; } /* Anpassung Button Navigation */ .sh__btns { bottom: 0;left: 0;right: 0; position: absolute; z-index: 10; padding-left: 4em; padding-right: 4em; justify-content: space-between; margin-bottom: 20px; } .sh__btns label { background-color: rgba(255, 255, 255, .5); cursor: pointer; margin: 0 .2em; height: 6px; flex: 1 0 auto; transition: background .5s; } .sh__btns label:hover { background-color: rgba(255, 255, 255, 1); } /* Anpassung Steuerbutton */ .sh__arrows,.sh-control { position: absolute; right: 0; bottom: 0; z-index: 10; transform: translate3d(0, 0, 0); transition: transform .3s; box-shadow: 0 1px 1px rgba(0, 0, 0, .15); } .sh__arrows:hover,.sheetSlider:hover .sh__arrows,.sheetSlider:hover .sh-control { transform: translate3d(0, 0, 0); } .sh__arrows label, .sh-control { background-color: white; background-repeat: no-repeat; background-position: 50%; cursor: pointer; border-radius: 0px !important; } .sh__arrows label { display: none; transition: background-color .3s; width: 50px; height: 50px; color: #888888; } .sh__arrows label:hover { background-color: rgba(255, 255, 255, .9); color: #333333; } /* play/pause */ .sh-control { width: 45px; height: 45px; bottom: 50px; background-color: white !important; color: #888888 !important; border-radius: 0px !important; background-image: none !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } .sh-control::before { content: "\f04c" !important; font-family: FontAwesome !important; font-weight: normal !important; display: inline-block !important; font-size: 20px !important; line-height: 28px !important; vertical-align: -5px !important; } .sh-control:hover { color: #666666 !important; opacity: .9; } .sh-control.is-active { color: #333333 !important; } /* Bildformate */ /*21:9*/ .sh-21r9 { padding-bottom: 42.857143%; } /*16:9*/ .sh-16r9 { padding-bottom: 56.25%; } /*4:3*/ .sh-4r3 { padding-bottom: 75%; } /*1:1*/ .sh-1r1 { padding-bottom: 100%; } /* Animation Versions "checked" */ /*Animation Default*/ .sh-default .sh__item:nth-child(2) { left: 100%; } .sh-default .sh__item:nth-child(3) { left: 200%; } .sh-default .sh__item:nth-child(4) { left: 300%; } .sh-default .sh__item:nth-child(5) { left: 400%; } .sh-default .sh__item:nth-child(6) { left: 500%; } .sh-default .sh__item:nth-child(7) { left: 600%; } .sh-default .sh__item:nth-child(8) { left: 700%; } .sh-default .sh__item:nth-child(9) { left: 800%; } .sh-default .sh__item:nth-child(10) { left: 900%; } .sh-default input:nth-child(1):checked~.sh__content { transform: translate3d(0%, 0, 0); } .sh-default input:nth-child(2):checked~.sh__content { transform: translate3d(-100%, 0, 0); } .sh-default input:nth-child(3):checked~.sh__content { transform: translate3d(-200%, 0, 0); } .sh-default input:nth-child(4):checked~.sh__content { transform: translate3d(-300%, 0, 0); } .sh-default input:nth-child(5):checked~.sh__content { transform: translate3d(-400%, 0, 0); } .sh-default input:nth-child(6):checked~.sh__content { transform: translate3d(-500%, 0, 0); } .sh-default input:nth-child(7):checked~.sh__content { transform: translate3d(-600%, 0, 0); } .sh-default input:nth-child(8):checked~.sh__content { transform: translate3d(-700%, 0, 0); } .sh-default input:nth-child(9):checked~.sh__content { transform: translate3d(-800%, 0, 0); } .sh-default input:nth-child(10):checked~.sh__content { transform: translate3d(-900%, 0, 0); } /* Animation vertical*/ .sh-vertical .sh__item:nth-child(2) { top: 100%; } .sh-vertical .sh__item:nth-child(3) { top: 200%; } .sh-vertical .sh__item:nth-child(4) { top: 300%; } .sh-vertical .sh__item:nth-child(5) { top: 400%; } .sh-vertical .sh__item:nth-child(6) { top: 500%; } .sh-vertical .sh__item:nth-child(7) { top: 600%; } .sh-vertical .sh__item:nth-child(8) { top: 700%; } .sh-vertical .sh__item:nth-child(9) { top: 800%; } .sh-vertical .sh__item:nth-child(10) { top: 900%; } .sh-vertical input:nth-child(1):checked~.sh__content { transform: translate3d(0%, 0, 0); } .sh-vertical input:nth-child(2):checked~.sh__content { transform: translate3d(0, -100%, 0); } .sh-vertical input:nth-child(3):checked~.sh__content { transform: translate3d(0, -200%, 0); } .sh-vertical input:nth-child(4):checked~.sh__content { transform: translate3d(0, -300%, 0); } .sh-vertical input:nth-child(5):checked~.sh__content { transform: translate3d(0, -400%, 0); } .sh-vertical input:nth-child(6):checked~.sh__content { transform: translate3d(0, -500%, 0); } .sh-vertical input:nth-child(7):checked~.sh__content { transform: translate3d(0, -600%, 0); } .sh-vertical input:nth-child(8):checked~.sh__content { transform: translate3d(0, -700%, 0); } .sh-vertical input:nth-child(9):checked~.sh__content { transform: translate3d(0, -800%, 0); } .sh-vertical input:nth-child(10):checked~.sh__content { transform: translate3d(0, -900%, 0); } /* Animation fade*/ .sh-fade .sh__item { opacity: 0; transition: opacity .7s cubic-bezier(.54,0,.1,1); } .sh-fade input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), .sh-fade input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), .sh-fade input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), .sh-fade input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), .sh-fade input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), .sh-fade input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), .sh-fade input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), .sh-fade input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), .sh-fade input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-fade input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { opacity: 1; z-index: 1; } /* Animation flip */ .sh-flip .sh__item { opacity: 0; transition: transform .5s cubic-bezier(.54,0,.1,1), opacity .5s; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform-origin: bottom; } .sh-flip input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), .sh-flip input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), .sh-flip input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), .sh-flip input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), .sh-flip input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), .sh-flip input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), .sh-flip input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), .sh-flip input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), .sh-flip input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-flip input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { transform: perspective(400px); opacity: 1; z-index: 1; } /* Textanzeige */ .sheetSlider input:nth-child(1):checked~.sh__content .sh__item:nth-child(1) .sh__meta, .sheetSlider input:nth-child(2):checked~.sh__content .sh__item:nth-child(2) .sh__meta, .sheetSlider input:nth-child(3):checked~.sh__content .sh__item:nth-child(3) .sh__meta, .sheetSlider input:nth-child(4):checked~.sh__content .sh__item:nth-child(4) .sh__meta, .sheetSlider input:nth-child(5):checked~.sh__content .sh__item:nth-child(5) .sh__meta, .sheetSlider input:nth-child(6):checked~.sh__content .sh__item:nth-child(6) .sh__meta, .sheetSlider input:nth-child(7):checked~.sh__content .sh__item:nth-child(7) .sh__meta, .sheetSlider input:nth-child(8):checked~.sh__content .sh__item:nth-child(8) .sh__meta, .sheetSlider input:nth-child(9):checked~.sh__content .sh__item:nth-child(9) .sh__meta, .sheetSlider input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) .sh__meta { opacity: 1; transform: translate3d(0, 0, 0); } /* Navigations Button Bilder */ /*Navibutton links */ .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9), .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10), .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9) { display: block; float: left; } .sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9)::before { content: "\f053"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 40px; line-height: 62px; padding-left: 12px; } /*Navibutton rechts */ .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2), .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3), .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4), .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5), .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6), .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7), .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8), .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9), .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1), .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10), .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1) { display: block; float: right; } .sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2)::before, .sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3)::before, .sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4)::before, .sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5)::before, .sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6)::before, .sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7)::before, .sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8)::before, .sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9)::before, .sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1)::before, .sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10)::before, .sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1)::before { content: "\f054"; font-family: FontAwesome; font-weight: normal !important; display: inline-block; font-size: 40px; line-height: 62px; padding-left: 22px; } .sheetSlider input:nth-child(1):checked~.sh__btns label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__btns label:nth-child(2), .sheetSlider input:nth-child(3):checked~.sh__btns label:nth-child(3), .sheetSlider input:nth-child(4):checked~.sh__btns label:nth-child(4), .sheetSlider input:nth-child(5):checked~.sh__btns label:nth-child(5), .sheetSlider input:nth-child(6):checked~.sh__btns label:nth-child(6), .sheetSlider input:nth-child(7):checked~.sh__btns label:nth-child(7), .sheetSlider input:nth-child(8):checked~.sh__btns label:nth-child(8), .sheetSlider input:nth-child(9):checked~.sh__btns label:nth-child(9), .sheetSlider input:nth-child(10):checked~.sh__btns label:nth-child(10) { background-color: #ffffff; /*aktiver Sliderbutton Hintergrundfarbe*/ } /* Mobile Options */ @media (min-width: 576px) { .sheetSlider { font-size: 9px; } .sh__meta { left: 25px !important; right: 25px !important; top: 25px !important; max-width: 100% !important; width: auto !important; } .sh__arrows, .sh-control { transform: translate3d(100%, 0, 0); } .sh__arrows label { width: 60px; height: 60px; } .sh-control { bottom: calc(4em + 16px); } } @media (min-width: 768px) { .sh__btns { display: flex; } .sh__meta { display: block; } } @media (min-width: 992px) { .sheetSlider{ font-size: 10px; } } /* ================= Sheet Slider Mobile Smartphone */ @media (max-width: 576px) { .sh__meta { left: 0% !important; right: 0px !important; top: 0% !important; width: 100% !important; max-width: 100% !important; padding: 6px 12px; } .sheetSlider h1, .sheetSlider h2, .sheetSlider h3, , .sheetSlider h4 { font-size: 18px !important; /* Überschriften in Sidebar Schriftgröße hier anpassen */ } .sh__meta span, .sh__meta span { font-size: 12px; /* Untertitel in Sidebar Schriftgröße hier anpassen */ } .sh__arrows, .sh-control { display: none; } .sh__btns { display: flex !important; } } </style> <!-- Sheet Slider Script --> <script data-relocate="true"> /*! => Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */ var sheetSlider = (function(){ var animateDelay = 4000, autoplayHoverPause = false, auto, slides = document.querySelectorAll(".sh-auto input"), sliderContent = document.querySelector(".sh-auto .sh__content"), sliderButtons = document.querySelectorAll(".sh-auto .sh__btns label"), sliderArrows = document.querySelectorAll(".sh-auto .sh__arrows label"), sliderControl = document.querySelector(".sh-control"), sliderStoped = false; if (autoplayHoverPause) { sliderContent.addEventListener("mouseover", pauseSlider); sliderContent.addEventListener("mouseout", playSlider); } if(sliderControl) sliderControl.addEventListener("click", playPauseButton); function setInput(){ auto = setInterval(autoSlides, animateDelay); } function autoSlides() { for (var i = 0; i < slides.length; i++) if (slides[i].checked) { if(i === slides.length - 1) slides[0].checked = true; else slides[i + 1].checked = true; break; } } function pauseSlider(){ clearInterval(auto); } function playSlider(){ if(!sliderStoped) setInput(); } function playPauseButton(){ sliderStoped = !sliderStoped; pauseSlider(); sliderControl.classList.add('is-active'); if(!sliderStoped){ autoSlides(); playSlider(); sliderControl.classList.remove('is-active'); } } for (var i = 0; i < slides.length; i++) { if (sliderButtons.length){ // Pausar si los botones reciben un clic sliderButtons[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); } if (sliderArrows.length){ // Pausar si las flechas reciben un clic sliderArrows[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); } } window.addEventListener("load",function(){ setInput(); }); })(); </script> 4



• Wählen sie auf der unter dem Registernamen "Seiten" angezeigten Seite aus wo der WSC 5 / 3 Sheet Slider angezeigt werden soll.

  5



• Wählen sie auf der unter dem Registernamen "Zugangsbeschränkung" angezeigten Seite evtl. noch die Gruppenberechtigungen aus und speichern alles ("Absenden"-Button).

  6



• Öffnen Sie nun Ihren Stil, der optisch an den WSC 5 / 3 Sheet Slider angepasst werden soll, unter folgenden Pfad:

  
  

  Anpassung > Stile > Ihren Stil auswählen > Stift-Symbol rechtsseitig zum bearbeiten klicken

  
  

  Rufen Sie danach das Register "Erweiterte Einstellungen" auf, fügen dort folgenden Code im Fenster "Individuelles CSS und SCSS" unten ein und speichern das ganze ab:

  Achtung: Eventuell muss vorher der Schreibschutz des Stils aufgehoben werden da ansonsten die Änderungen nicht übernommen werden!

  
  

  /* ================================================================ Sheet Slider Box by Gino Zantarelli */ .sheetSlider { background-color: $wcfContentBackground !important; font-size: 14px !important; padding-bottom: 30.857143%; /* Höhe des Sliders in % oder px hier anpassen */ min-height: 130px; } .sh__meta { background-color: rgba(0, 0, 0, 0.4); /* Textblock Hintergrundfarbe hier anpassen */ padding: 8px 18px; /* Textblock Randabstand hier anpassen */ } .sh__meta h1, .sh__meta h2, .sh__meta h3, , .sh__meta h4 { color: $wcfHeaderText !important; /* Überschriften Schriftfarbe hier anpassen */ } .sh__meta span { color: $wcfHeaderText !important; /* Untertitel Schriftfarbe hier anpassen */ font-size: 15px; /* Untertitel Schriftgröße hier anpassen */ } .sh__meta h1 { font-size: 28px; /* H1 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta h2 { font-size: 23px; /* H2 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta h3 { font-size: 18px; /* H3 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta h4 { font-size: 40px; /* H4 Schriftgröße hier anpassen */ line-height: 1.28; } .sh__meta a { color: $wcfHeaderLink /* Linkfarbe hier anpassen */; font-weight: bold; } .sh__meta a:hover { color: $wcfHeaderLinkActive /* Linkfarbe Hover hier anpassen */; } .sheetSlider input:nth-child(1):checked~.sh__btns label:nth-child(1), .sheetSlider input:nth-child(2):checked~.sh__btns label:nth-child(2), .sheetSlider input:nth-child(3):checked~.sh__btns label:nth-child(3), .sheetSlider input:nth-child(4):checked~.sh__btns label:nth-child(4), .sheetSlider input:nth-child(5):checked~.sh__btns label:nth-child(5), .sheetSlider input:nth-child(6):checked~.sh__btns label:nth-child(6), .sheetSlider input:nth-child(7):checked~.sh__btns label:nth-child(7), .sheetSlider input:nth-child(8):checked~.sh__btns label:nth-child(8), .sheetSlider input:nth-child(9):checked~.sh__btns label:nth-child(9), .sheetSlider input:nth-child(10):checked~.sh__btns label:nth-child(10) { background-color: $wcfHeaderBackground !important; /* Aktiver Sliderbutton Hintergrundfarbe */ } @include screen-lg { .boxesSidebarLeft .sheetSlider, .boxesSidebarRight .sheetSlider { width: 270px; /* Breite des Sidebar Sliders hier anpassen */ padding-bottom: 150px; /* Höhe des Sidebar Sliders in % oder px hier anpassen */ line-height: 1.2; } } /* ================= Sheet Slider Declaration for Sidebar */ .boxesSidebarLeft .sh__meta, .boxesSidebarRight .sh__meta { left: 0% !important; right: 0px !important; top: 0% !important; width: 100%; padding: 6px 12px; } .boxesSidebarLeft .sh__meta h1, .boxesSidebarLeft .sh__meta h2, .boxesSidebarLeft .sh__meta h3, , .boxesSidebarLeft .sh__meta h4, .boxesSidebarRight .sh__meta h1, .boxesSidebarRight .sh__meta h2, .boxesSidebarRight .sh__meta h3, , .boxesSidebarRight .sh__meta h4 { font-size: 18px !important; /* Überschriften in Sidebar Schriftgröße hier anpassen */ } .boxesSidebarLeft .sh__meta span, .boxesSidebarRight .sh__meta span { font-size: 13px; /* Untertitel in Sidebar Schriftgröße hier anpassen */ } .boxesSidebarLeft .sh__arrows, .boxesSidebarLeft .sh-control, .boxesSidebarRight .sh__arrows, .boxesSidebarRight .sh-control { display: none; } .boxesSidebarLeft .sh__btns, .boxesSidebarRight .sh__btns { display: flex !important; } /* ================= Sheet Slider Mobile Tablet */ @include screen-md { .sh__meta { left: 25px !important; right: 25px !important; top: 25px !important; max-width: 100% !important; width: auto !important; } .sh__meta h1, .sh__meta h2, .sh__meta h3, , .sh__meta h4 { font-size: 22px !important; /* Überschriften in Sidebar Schriftgröße hier anpassen */ } .sh__meta span, .sh__meta span { font-size: 13px; /* Untertitel in Sidebar Schriftgröße hier anpassen */ } } /* ================= Sheet Slider Mobile Smartphone */ @include screen-md-down { .sh__meta { left: 0% !important; right: 0px !important; top: 0% !important; width: 100% !important; max-width: 100% !important; padding: 6px 12px; } .sh__meta h1, .sh__meta h2, .sh__meta h3, , .sh__meta h4 { font-size: 18px !important; /* Überschriften in Sidebar Schriftgröße hier anpassen */ } .sh__meta span, .sh__meta span { font-size: 12px; /* Untertitel in Sidebar Schriftgröße hier anpassen */ } .sh__arrows, .sh-control { display: none; } .sh__btns { display: flex !important; } }

  7



Wenn alles soweit richtig nach dieser Anleitung gemacht wurde, so müsste der WSC 5 / 3 Sheet Slider jetzt sichtbar sein und funktionieren - evtl. sollte noch einmal die Taste F5 zum aktualisieren der Anzeige im Browser gedrückt werden.

Kommen wir zur Bearbeitung von Bildinhalten in der WSC 5 / 3 Sheet Slider-Box, dazu öffnen Sie die erstellte Box Sheet Slider und rufen das Register "Inhalt" auf.

Folgender Codeblock stellt immer ein Sliderinhalt dar (max. 10 Stück zulässig):

Hier kann nun die Bildquelle, Verlinkungen und der Textinhalt angepasst werden.

WICHTIG: Alle verwendeten Bilder müssen gleich groß sein!

Im Demoslider sind bereits diverse Beispiele eingearbeitet mit einfachen Text, Links im Text, verlinktes Bild mit Text usw., daraus kann man selber sein eigenen Sliderinhalt anfertigen.

Sollen Bilder direkt vom eigenen Server genutzt werden, so erstellen sie einen Ordner mit Namen "sliderimages" in den Hauptpfad ihrer WSC5 / WSC 3 Server-Installation. In diesem Ordner müssen später zwingend die zu verwendeten Bilder gelagert sein um diese nutzen zu können. Alle Bilder sollten die selbe Größe (min. 2200px x 500px) sowie Dateiart haben ( z.Beispiel .jpeg-Bilder), da es sonst zu fehlerhaften Darstellungen kommen kann.

Die hier zu verwendeten Bilderlinks sollten nun so aussehen:

<img src="{@$__wcf->getPath()}sliderimages/NAME DES BILDES.jpg" alt=""/>

Rufen Sie das Register "Erweiterte Einstellungen" ihres verwendeten Stils auf und suchen dort den von ihnen eingefügten Codeblock im Fenster "Individuelles CSS und SCSS".

Jeweils wo die gesetzen Textbemerkungen zu finden sind wie

/* Untertitel in Sidebar Schriftgröße hier anpassen */

kann selber das Aussehen oder auch Höhenangaben angepasst werden, beachten sie dass Darstellungen bei Verwendung der WSC 5 / 3 Sheet Slider-Box in der Sidebar nicht zu groß sein dürfen.