Neue Produkte haben nichts unserer Website zu tun, das sind zwei verschiedene Dinge. Aktuell arbeiten wir eben auch noch zusätzlich an einen Update unserer Seiten.
Das neue Produkte kommen ist kein Geheimnis. Die werden aber erst dann veröffentlicht wenn ich, im Falle von Stilen, das Gefühl habe das sie auch gut genug für eine Veröffentlichung sind. Andere Faktoren gibt es nicht. Neue Stile können auch vor dem Update auf die Suite veröffentlicht werden. Oder mit dem Update, Oder auch danach.
Eine Alternative wäre EasyMedia Bilder:
https://www.cls-design.com/shop/product/74-easymedia-bilder/
Klingt nach einem Javascriptfehler, kannst du mal in die Konsole schauen ob da was steht? Rechtsklick -> Untersuchen -> Fehler
Hallo Zusammen,
um das Update auf WoltLab Suite 3 zeitnah durchführen zu können haben wir heute den Kompatibilitätsmodus für WCF 2.0-Links deaktiviert und entsprechende Umleitungen eingefügt (vielen Dank dafür an VieCode und MysteryCode 
).
Eigentlich sollte alles wie gehabt funktionieren, falls Ihr doch irgendwo auf ein Problem stoßt, bitte einfach kurz hier oder per Konversation darauf hinweisen.
Vielen Dank.
Euer cls-design-Team
Bitteschöööön:
<div class="slideshow">
<div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=492')"></div>
<div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=487')"></div>
<div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=483')"></div>
<div class="slideshow-image" style="background-image: url('https://unsplash.it/1600/1400?image=478')"></div>
</div>
<style>
.slideshow {
height: 400px;
overflow: hidden;
position: relative;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes
kenburns-1 { 0%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@keyframes
kenburns-1 { 0%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes
kenburns-2 { 23.4375%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes
kenburns-2 { 23.4375%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes
kenburns-3 { 48.4375%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes
kenburns-3 { 48.4375%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes
kenburns-4 { 73.4375%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes
kenburns-4 { 73.4375%
{
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>position: absolute und width: 100vw; auf .slideshow haben das Layout gekillt.
Du mußt den Inhalt auf den weißen Bereich konzentrieren, die Höhe wird ja immer auf 350px skaliert. Also quasi auf diesen Bereich:
Puh, der Slider ist so entworfen das man Bilder in jedem Format verwenden kann und immer die Mitte zu sehen ist. Bei Text ist das jetzt etwas ticky da die Bildhöhe auf 350 Pixel festgelegt ist.
Das müßte dann in etwa so aussehen:
Das ist der Bereich der immer sichtbar ist:
Vielleicht probierst du das mal so.
Hallo,
du kannst das Geld auch per Post schicken, haben auch schon ein paar gemacht.
Gruß Tom
Hallo,
ja das ist richtig, eine Lösung dafür gibt es im Supportbereich des Stil.
Hallo,
du installierst einfach das Plugin, danach werden die Standardränge:
automatisch umgewandelt.
Wenn du jetzt für einen selbst erstellten Rang den Level 4 haben willst, dann trägst du die entsprechende Klasse (ohne Punkt) ein:
Dann wird für den Rang diese Darstellung verwendet: