Posts by Gino Zantarelli

Gino Zantarelli · Feb 6th 2017

Du kannst eine neue Box erstellen (Box-Typ TEMPLATE), Name SimpleAddFooter. Den Haken bei Box-Titel anzeigen RAUSNEHMEN. Die Position auf Seitenende einstellen.

Folgender Inhalt kommt in das Editorfeld:

Code

<!--
Woltlab Suite 3 SimpleAddFooter HTML
Made by Gino Zantarelli 2013-2017
http://www.zantarelli.com
All under Copyright-no Freeware
-->
<div id ="add_footer">


             <h2>Simple AddFooter</h2><!-- First Title enter here -->
<div class ="addInbox">
<div class ="add_boxleft">


            <h1>Technical Sources</h1><!-- Box Title left enter here -->


			<p><a href="http://www.zantarelli.com/" target="blank">Gino Zantarelli</a></p>
			<p><a href="http://net.tutsplus.com/" target="blank">Net.Tutplus</a></p>
			<p><a href="http://www.webappers.com/" target="blank">Webappers</a></p>
			<p><a href="http://www.ajaxr.de/" target="blank">Ajaxr</a></p>
			<p><a href="http://www.webresourcesdepot.com/" target="blank">Webresourcesdepot</a></p>
			<p><a href="http://www.dynamicdrive.com/" target="blank">Dynamicdrive</a></p>
			<p><a href="http://www.webdesign.org/" target="blank">Web Design Libary</a></p>
</div>


<div class ="add_boxleft_second">


            <h1>Special Links</h1><!-- Box Title middle enter here -->


			<p><a href="http://css-tricks.com/" target="blank">CSS-Tricks</a></p>
			<p><a href="http://de.selfhtml.org/" target="blank">Selfhtml</a></p>
			<p><a href="http://www.smashingmagazine.com/" target="blank">Smashingmagazine</a></p>
			<p><a href="http://jquery.com/" target="blank">JQuery</a></p>
			<p><a href="http://codecanyon.net/" target="blank">Codecanyon</a></p>
			<p><a href="http://psd.tutsplus.com/" target="blank">Psd tuts Plus</a></p>
			<p><a href="http://tympanus.net/codrops/" target="blank">Codrops</a></p>
</div>


<div class ="add_boxright">


            <h1>Social Links</h1><!-- Box Title middle enter here -->


			<p>Stay with us in contact and follow now!</p>


			<p>
			<a href="https://facebook.com" class="face"> </a>
			<a href="https://twitter.com" class="twitt"> </a>			
			<a href="https://plus.google.com" class="goog"> </a>			
			<a href="https://www.tumblr.com" class="tumb"> </a>
			<a href="https://www.twitch.tv/" class="twitch"> </a>
			<a href="https://www.youtube.com" class="youtube"> </a>
			<a href="http://store.steampowered.com" class="steam"> </a>
			</p>
			<p>Share the Love…</p>					
</div>


<div class ="add_boxright_second">


            <h1>I gotta piss… motherfucker</h1><!-- Box Title right enter here -->
            <p class="textbox">Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</p>
<br/>
<a href="http://slipsum.com"><i>» Filltext by slipsum.com</i></a>


</div>
</div>
</div>

Display More

Als Titel wieder SimpleAddFooter eingeben-speichern.

Folgender Codeinhalt kommt in die CSS-Definition eines genutzten Stils (muss bei JEDEN genutzten Stil eingefügt werden):

CSS

/* ============================================================================================= */
/* === DO NOT TOUCH ================================= WCS 3 Simple Add Footer by Gino Zantarelli */
/* ============================================================================================= */


#add_footer {
    padding: 15px 20px 15px;
    background-color: $wcfContentBackground;
    width: auto !important;
}
.addInbox {
    width: auto !important;
    display: -webkit-flex;
    display: flex;
}
#add_footer h1 {
    font-size: 14px;
    margin-bottom: 10px;
    color: $wcfHeaderText;
    padding: 4px 10px;
    font-weight: 600;
    background-color: $wcfHeaderBackground;
}
#add_footer h2 {
    font-size: 16px;
    line-height: 16px;
	color: $wcfContentHeadlineText;
    padding: 7px 0px;
	margin-bottom: 10px;
    border-bottom: 2px solid $wcfContentHeadlineText;
}
#add_footer h2::before {
    content: "\f0ac";
    font-family: FontAwesome;
    padding-right: 4px;
    font-size: 18px;
	font-weight: 400;
}
#add_footer p {
    line-height: 1.3;
    font-weight: normal;
    margin-left: 5px;
}
#add_footer p.textbox {
    line-height: 1.4;
    font-weight: normal;
}
#add_footer li {
    list-style: none;
    text-decoration: none;
    border: none;
}
#add_footer a::before {
    content: "\f101";
    font-family: FontAwesome;
    padding-right: 4px;
}
.add_boxright_second a::before {
    display: none;
}
#add_footer a {
    font-weight: normal;
    text-decoration: none;
}
.add_boxleft {
    float: left;
    margin-top: 5px;
    width: 22.5%;
    margin-right: 0.3%;
    min-height: 160px;
    outline: 0px none;
    padding-bottom: 5px;
}
.add_boxleft_second {
    float: left;
    margin-top: 5px;
    width: 22.5%;
	margin-left: 0.4%;
    margin-right: 0.3%;
    min-height: 160px;
    outline: 0px none;
    padding-bottom: 5px;
}
.add_boxright {
    float: left;
    margin-top: 5px;
    margin-left: 0.4%;
    margin-right: 0.3%;
    width: 26.5%;
    min-height: 160px;
    outline: 0px none;
    padding-bottom: 5px;
}
.add_boxright_second {
    float: right;
    margin-top: 5px;
	margin-left: 0.4%;
    width: 26.5%;
    min-height: 160px;
    outline: 0px none;
    padding-bottom: 5px;
}
.face {
    background: #3a5b9a;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
.twitt {
    background: #28AAE1;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
.goog {
    background: #DC5442;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
.tumb {
    background: #4D6982;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
.youtube {
    background: #CC181E;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
.twitch {
    background: #6441a5;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
.steam {
    background: #111111;
    height: 60px;
    width: 60px;
    padding-bottom: 3px;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}
#add_footer a.face::before {
    content: "\f09a" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 28px;
    margin-top: 26px;
    margin-left: 40px;
    font-weight: normal;
    z-index: 10;
}
#add_footer a.twitt::before {
    content: "\f099" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 29px;
    margin-top: 28px;
    margin-left: 29px;
    font-weight: normal;
    z-index: 10;
}
#add_footer a.goog::before {
    content: "\f1a0" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 28px;
    margin-top: 26px;
    margin-left: 32px;
    font-weight: normal;
    z-index: 10;
}
#add_footer a.tumb::before {
    content: "\f173" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 28px;
    margin-top: 26px;
    margin-left: 40px;
    font-weight: normal;
    z-index: 10;
}
#add_footer a.youtube::before {
    content: "\f16a" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 28px;
    margin-top: 27px;
    margin-left: 26px;
    font-weight: normal;
    z-index: 10;
}
#add_footer a.twitch::before {
    content: "\f1e8" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 28px;
    margin-top: 26px;
    margin-left: 28px;
    font-weight: normal;
	z-index: 10;
}
#add_footer a.steam::before {
    content: "\f1b6" !important;
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 28px;
    margin-top: 26px;
    margin-left: 28px;
    font-weight: normal;
    z-index: 10;
}


/* ============================================================================================= */
/* === DO NOT TOUCH ============================================ Shrink Mode for SimpleAddFooter */
/* ============================================================================================= */


@media only screen and (max-width: 980px) {


.addInbox {
    display: inline-block;
}
.add_boxleft {
    width: 100%;
}
.add_boxleft_second {
    width: 100%;
}
.add_boxright {
    width: 100%;
}
.add_boxright_second {
    width: 100%;
}
#add_footer h1 {
    margin-top: 15px;
    font-size: 16px;
    line-height: 20px;
}	
.tumb, .face, .goog, .twitt, .youtube, .twitch, .steam {
    padding: 2px 0px 0px 2px;
    height: 98px;
    width: 98px;
    margin-right: 5px;
}
#add_footer a.face::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 60px;
    font-weight: normal;
}
#add_footer a.twitt::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 40px;
    font-weight: normal;
}
#add_footer a.goog::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 40px;
    font-weight: normal;
}
#add_footer a.tumb::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 55px;
    font-weight: normal;
}
#add_footer a.youtube::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 36px;
    font-weight: normal;
}
#add_footer a.twitch::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 40px;
    font-weight: normal;
}
#add_footer a.steam::before {
    font-size: 50px;
    margin-top: 35px;
    margin-left: 40px;
    font-weight: normal;
}
#add_footer p.textbox {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
}
}

Display More

Gino

Gino Zantarelli · Feb 3rd 2017

Möchten Sie für die Woltlab Suite 3 / Woltlab Suite 5 eine attraktive Linkarea-Anzeige im Footer-Bereich mit anpassbaren Linkinhalten, Social Links (Facebook, Google+, Twitter, Tumblr, YouTube, Twitch, Steam, Instagram) & Textbox, dann bietet Ihnen Gino Zantarelli diese kostenlose Lösung an - ganz ohne Java Script, Bilderdateien & nur auf HTML/CSS 3 basierend.

Diese Version nutzt KEINE Bilderdateien (dadurch wird unnötiger Traffic vermieden), passt sich optisch an den jeweilig genutzen Stil an (per CSS @-Definitionen) ,basiert rein auf Templates und unterstützt Deutsch sowie Englisch .

Die Bearbeitung des Footerinhalts ist zwar nicht so bequem wie bei einem Plugin im ACP, aber einfach direkt im Template zu machen - die hier in der angefügten Datei enthaltene HTML-Anleitung ist sehr ausführlich geschrieben und daher auch für Anfänger geeignet.

Standardansicht:

Nach dem Download der Datei diese bitte entpacken und die darin enthaltene Datei mit dem Browser öffnen!

Product

WSC 6 Social SlideOut (Free)

Foldable, modern microslider based on HTML & CSS for the share button of the Woltlab software

Free

Mit freundlichen Gruß
Gino Zantarelli

Gino Zantarelli · Jan 29th 2017

In der neuen Woltlab Suite 3 wurde das Threadstarter-Symbol in Beiträgen entfernt, dieses kann man aber wieder sichtbar machen / neu anpassen. Das folgende Symbol ist ein Stiftsymbol (sieht besser als ein Stern aus, hat sonst etwas von Auszeichung oder Rangdarstellung).
Füge folgenden Codeblock der CSS-Definition des Stils hinzu:

CSS

.messageList > .messageGroupStarter > .message > .messageSidebar::after {
    content: "\f14b";
    color: $wcfSidebarLink;
    font-family: FontAwesome;
    font-size: 17px;
    display: block;
    left: 7px;
    position: absolute;
    top: 2px;
    font-weight: normal !important;
}

Display More

Evtl. müßten die Werte left & top den eigenen Stil anpasst werden, ganz wie man die Position des Symbols haben möchte.

Gino Zantarelli · Jan 29th 2017

Eine Neuerung im WSC 3, die nicht so schön aussieht, ist die Teiltransparenz der dargestellten Signatur in Beiträgen, dadurch geht die Aufmerksamkeit deutlich zurück.
Um die Teiltransparenz zu entfernen, füge folgenden Code der CSS-Definition des Stils hinzu:

Code

.messageSignature {
    opacity: 1;
}

Gino Zantarelli · Jan 29th 2017

Nutzt man ein verlinktes Signaturbild, so wird ein Link-Zeichen angezeigt (und das nervt...).

Um das Zeichen zu entfernen, füge folgenden Codeblock der CSS-Definition des Stils hinzu:

Code

.messageSignature a.externalURL::after {
    display: none;
}

Gino Zantarelli · Jan 29th 2017

Um die letzten Artikel auf der Hauptseite als Boxen nebeneinander anzuzeigen, nutze folgenden CSS-Code (der CSS-Definition des Stils zufügen):

Code

.articleList {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1%;
    margin-right: -1%;
}
.articleList > li {
    width: 50%;
    flex: 0 0 48%;
    margin-bottom: 20px;
    max-width: 48%;
    border: 1px solid $wcfContentBorderInner;
    margin: 1%;
    padding: 20px;
    min-height: 200px;
    margin-bottom: 20px;
}
.articleList > li:not(:first-child) {
    margin-top: 0px;
}
.articleList .articleListTeaser {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

Display More

Es werden nun jeweils 2 x 50% breite Boxen nebeneinander angezeigt die flexibel in der Breite sind.

Für die Ansicht im Mobilmodus füge folgendes ganz unten hinzu:

Code

@media only screen and (max-width: 980px) {
.articleList > li {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0%;
}
}

Gino Zantarelli · Dec 4th 2016

The controller icon can be edited / removed in the CSS definition of the style.

Search the following code (from line 155):

Code

.wbbBoardList .icon32.icon-folder-close-alt::before, .wbbBoardList .icon32.icon-lock::before, .wbbBoardList .icon32.icon-folder-close.markAsRead::before {
    color: #E4E4E4;
    content: "\f11b";
    font-size: 25px;
}

Delete or customize the following line in this code block:
content: "\f11b";

The symbol is a font (FontAwesome) and is represented by the number / letter code (here f11b).

Best regards
Gino

Gino Zantarelli · Sep 29th 2016

Suche in der CSS-Definition des Stils nach folgenden Codeblock:

Code

.logo a {
    position: absolute;
    margin-top: 20px;
    margin-left: 20px;
}

Den Wert margin-top: 20px; auf deine benötigte Höhe anpassen.

Gino

Gino Zantarelli · Nov 6th 2015

Ab Zeile 2020 im Shrink Modus folgendes zufügen:

Code

.mainMenu a.icon.icon16.icon-list.jsDropdownEnabled {
    font-size: 1.1rem;
    font-family: FontAwesome;
    line-height: 40px;
    padding: 0px 30px;
    height: 40px;
}
.mainMenu > ul > li.active {
    margin-bottom: 0px;
}

Gino

Gino Zantarelli · Oct 25th 2015

Hallo Dr. Doom,
um die Farbe der blinkenden Icons zu ändern, öffne die CSS-Definition des Stils und suche folgende Codeblocks:

Ab Zeile 178:

Code

.wbbBoardList .icon32.icon-folder-close.markAsRead::before {
    color: #FFFFFF;
    content: "\f11b";
	font-size: 25px;
    animation: blink 1s steps(3, start) infinite;
    -webkit-animation: blink 1s steps(3, start) infinite;
    -moz-animation: blink 1s steps(3, start) infinite;
    -o-animation: blink 1s steps(3, start) infinite;
}
.filebaseCategoryList .icon32.icon-folder-close.markAsRead::before {
    color: #FFFFFF;
    content: "\f019";
	font-size: 22px;
    animation: blink 1s steps(3, start) infinite;
    -webkit-animation: blink 1s steps(3, start) infinite;
    -moz-animation: blink 1s steps(3, start) infinite;
    -o-animation: blink 1s steps(3, start) infinite;
}

Display More

Die jeweilige Zeile color:#FFFFFF; nach deinem Farbwunsch ändern.

Betreff dem Logo,
selbstverständlich darfst du das Logo anpassen, nur meine Copyrights nicht entfernen oder verändern.

mit freundlichen Gruß
Gino

Gino Zantarelli · Oct 15th 2015

Hallo Marco,
suche folgende Codestellen in der CSS-Definition des Stils und wechsle diese Blöcke aus (ca. ab Zeile 400):

Code

.mainMenu > ul > li > a {
    background-color: #444F5A;
    letter-spacing: 1px;
    padding: 0px 30px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.85rem;
    line-height: 40px;
    color: #FFF;
}

Code

.mainMenu a.icon.icon16.icon-list.jsDropdownEnabled {
    font-size: 1.1rem;
    font-family: FontAwesome;
    line-height: 40px;
    padding: 0px 30px;
    height: 40px;
}

Du kannst Dir die Höhen anpassen an den Stellen line-height: 40px; und height: 40px; - beides muss die gleichen Höhenwerte haben.

Mit freundlichen Gruß
Gino

Gino Zantarelli · Jul 9th 2015

Um Support als Kunde von Gino Zantarelli zu erhalten, müssen Sie sich hier im Forum neu registrieren und als Kunde per Konversation verifizieren.

Wie verifiziere ich mich als Kunde?
Schicken Sie mir (Gino Zantarelli) eine Konversation mit Rechnungs- oder Personenangaben um sich als Kunde verifizieren zu können. Ihre Daten werden selbstverständlich vertraulich behandelt & nach Verfizierung umgehend vernichtet.

Was passiert nach der Verifizierung?
Nach erfolgreicher Verifizierung werden Sie von mir in die Forengruppe "Kunde" eingestuft und haben Zugang zum Forensupport für kostenpflichtige WSC 5 / WSC 3-Stile.

Ich bin kein Kunde, muss man sich trotzdem verifizieren?
Als "Nicht-Kunde" muss man sich auch nicht verifizieren und hat daher auch nur Zugang zum Forensupport für kostenlose WSC 5 / WSC 3-Stile.

Gino Zantarelli · Jul 9th 2015

Wie sollte man sich im Powerstylez-Forum verhalten um ein harmonisches & hilfbereites Umfeld zu schaffen? Hier ein paar kleine Verhaltensregeln:

- Bitte bewahren Sie einen netten, umgangsfreundlichen Ton
- Öffentliche Beleidigungen/Diffamierungen werden nicht geduldet und haben administrative Konsequenzen (Löschung der Beiträge, Einschränkung der Forenrechte)
- Persönliche Differenzen sind nicht im Forum auszutragen, nutzen Sie die Konversationsmöglichkeiten des Forums
- Beiträge in Capslock (Alles in Großbuchstaben geschrieben) oder pushen innerhalb von 24 Stunden sind zu unterlassen, dadurch werden diese auch nicht schneller bearbeitet oder wahrheitsgetreuer

- Lesen & beachten sie auch unsere Nutzungsbestimmungen

Es wäre wünschenswert hier im Supportforum jedem Hilfestellungen geben zu können, leider kann dieses nicht immer zu 100% umgesetzt werden..... also haben Sie bitte Verständnis dafür.

Gino Zantarelli · Jul 9th 2015

Um Benutzern erfolgreich & schnell Support geben zu können werden folgende Angaben benötigt:

- Welche Forenversion wird genutzt
- Webadresse wo man sich das Forum anschauen kann (zwecks Fehleranalyse)
- Welche(r) Stil(e) ist/sind betroffen
- Welche(r) Fehler tritt/treten auf (bitte so genau wie möglich beschreiben -Screenshots nur über Dateianhang einfügen)

- Welcher Browser wird genutzt

Posts by Gino Zantarelli

Simple AddFooter am Seitenende

HTML SimpleAddFooter für WSC 3 / WSC 5

WSC 3 - Threadstarter-Symbol anzeigen

WSC 3 - Transparenz der Signatur in Beiträgen entfernen (Anleitung)

Signaturbild mit Link- Linkzeichen entfernen

"Letzte Artikel"- Boxen nebeneinander anzeigen

Play the Game - blinkenden Controller austauschen

Magnifico Grigio Blu - Logo zentrieren

Magnifico Grigio Blu Menühöhe ändern

Play the Game - blinkenden Controller austauschen

Magnifico Grigio Blu Menühöhe ändern

Anmeldung Kundensupport

Verhaltensregeln für das Powerstylez.de/com Supportforum

Was gehört in eine Supportmeldung?