Powerstylez.com - CSS3 Simple AddFooter

CSS3 Simple AddFooter - Anleitung

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.

Bitte befolgen sie genau diese Anleitung, dann sollte alles reibungslos ablaufen sowie fehlerfrei angezeigt werden... Ihr Gino Zantarelli

Achtung:
Bevor Sie die CSS3 Simple AddFooter Installation gemäß Anleitung beginnen, sichern Sie evtl. Ihr Forum. Es werden keine Datenbankeinträge vorgenommen, nur Templates angelegt und CSS-Code Ihrem jeweilig genutzten Stil zugefügt - es sollten daher keine gravierenden Schäden auftreten.

Installation:

Um den CSS3 AddFooter zu installieren, gehen Sie bitte wie folgt vor (Sie können auch die Checkbox nach jedem abgearbeiteten Arbeitsschritt aktivieren):

Erstellen Sie unter folgenden Pfad für den CSS3 Simple AddFooter eine Templategruppe, welche später vom Stil genutzt werden muss:

Anpassung > Templategruppen > Templategruppe hinzufügen
Name: CSS3Simpleaddfooter
Verzeichnis: CSS3Simpleaddfooter/

Sie können die Templategruppe auch mit einer anderen Namensbezeichnung anlegen - wichtig ist nur, dass später die neu angelegten Templates dort eingefügt sind.
Achtung: Sollten Sie für ihren Stil bereits eine Templategruppe nutzen, so muss keine neue Templategruppe erstellt werden!
1

Suchen Sie das original Template "pageFooter" unter folgenden Pfad und kopieren dieses in Ihre neu erstellte Templategruppe (oder bereits vorhandene Templategruppe Ihres Stils):

Anpassung > Templates

Achtung: Sollte die für ihren Stil genutzte Templategruppe bereits das Template "pageFooter" beinhalten, so darf dieses nicht neu zugefügt werden!
2

Öffnen Sie das Template "pageFooter" in Ihrer Templategruppe und suchen dort folgende Codestelle:

<footer id="pageFooter" class="pageFooter">

Fügen Sie darunter folgenden Code ein & speichern danach das Template:

{include file='SimpleAddFooter'}
3

Erstellen Sie in Ihrer Templategruppe ein neues Template unter folgenden Pfad:

Anpassung > Templates > Template hinzufügen

Templategruppe: CSS3Simpleaddfooter (bzw. der Name Ihrer genutzten Templategruppe)

Name: SimpleAddFooter

Fügen Sie den folgenden Code in das Feld "Template-Quelltext" ein & speichern danach das Template:

 <div id ="add_footer" class ="layoutBoundary"> {if $__wcf->getLanguage()->languageCode === 'de'}<h2>Simple AddFooter</h2>{/if} {if $__wcf->getLanguage()->languageCode === 'en'}<h2>Simple AddFooter</h2>{/if} <div class ="addInbox"> <div class ="add_boxleft"> {if $__wcf->getLanguage()->languageCode === 'de'}<h1>Links für Woltlab Produkte</h1>{/if} {if $__wcf->getLanguage()->languageCode === 'en'}<h1>Links for Woltlab products</h1>{/if} <p><a href="https://www.powerstylez.com/" target="blank">Powerstylez.com</a></p> <p><a href="https://softcreatr.dev/" target="blank">SoftCreatR.dev</a></p> <p><a href="https://viecode.com/" target="blank">Viecode</a></p> <p><a href="https://www.woltlab.com/de/" target="blank">Woltlab GmbH ©</a></p> <p><a href="https://zaydowicz.de/" target="blank">Zaydowicz.de</a></p> </div> <div class ="add_boxleft_second"> {if $__wcf->getLanguage()->languageCode === 'de'}<h1>Praktische Links</h1>{/if} {if $__wcf->getLanguage()->languageCode === 'en'}<h1>Practical links</h1>{/if} <p><a href="https://codepen.io/" target="blank">CodePen</a></p> <p><a href="https://tympanus.net/codrops/" target="blank">Codrops</a></p> <p><a href="https://www.cssscript.com/" target="blank">CSS Script</a></p> <p><a href="https://css-tricks.com/" target="blank">CSS-Tricks</a></p> <p><a href="https://freefrontend.com/" target="blank">Free Frontend</a></p> </div> <div class ="add_boxright"> {if $__wcf->getLanguage()->languageCode === 'de'}<h1>Netzwerk-Links</h1>{/if} {if $__wcf->getLanguage()->languageCode === 'en'}<h1>Social links</h1>{/if} {if $__wcf->getLanguage()->languageCode === 'de'}<p>Bleibe mit uns in Kontakt und folge uns!</p>{/if} {if $__wcf->getLanguage()->languageCode === 'en'}<p>Stay with us in contact and follow now!</p>{/if} <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="https://store.steampowered.com/" class="steam"> </a> <a href="https://www.instagram.com/" class="instagram"> </a> </p> <p>Share the Love...</p> </div> <div class ="add_boxright_second"> {if $__wcf->getLanguage()->languageCode === 'de'}<h1>Was ist der Simple AddFooter?</h1>{/if} {if $__wcf->getLanguage()->languageCode === 'en'}<h1>What is the simple AddFooter?</h1>{/if}  {if $__wcf->getLanguage()->languageCode === 'de'} <p class="textbox">Der Simple AddFooter wurde von <a href="https://www.powerstylez.com">Gino Zantarelli</a> entwickelt und stellt per HTML-Inhalt & CSS verschiedene Boxen im Footerbereich dar.</p> <br/> <p class="textbox">Die Inhalte können manuell im Template 'SimpleAddFooter' der verwendeten Templategruppe des Stils den eigenen Bedürfnissen angepasst werden.</p> <br/> <a href="https://www.powerstylez.com"><i>» Powerstylez.com</i></a> {/if}  {if $__wcf->getLanguage()->languageCode === 'en'} <p class="textbox">The Simple AddFooter was created by <a href="https://www.powerstylez.com">Gino Zantarelli</a> and represents different boxes in the footer area via HTML content & CSS.</p> <br/> <p class="textbox">The contents can be adjusted manually in the template 'SimpleAddFooter' of the used template group of the style to your own needs.</p> <br/> <a href="https://www.powerstylez.com"><i>» Powerstylez.com</i></a> {/if} </div> </div> </div> 4

Öffnen Sie nun Ihren Stil, der den CSS3 Simple AddFooter nutzen soll, unter folgenden Pfad:

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

Im Register "Daten" wählen Sie beim Auswahlfenster für die Templategruppe den Eintrag "CSS3Simpleaddfooter" aus, bzw. belassen es bei der bereits genutzten Templategruppe welche das neu erstellte Template enthält.

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:

/* ============================================================================================= */ /* === DO NOT TOUCH ============================= WSC 3 / 5 Simple Add Footer by Gino Zantarelli */ /* ============================================================================================= */ #add_footer.layoutBoundary { padding: 15px 20px 15px; background-color: $wcfContentBackground; } .addInbox { width: auto !important; display: -webkit-flex; display: flex; } #add_footer.layoutBoundary h1 { font-size: 14px; margin-bottom: 10px; color: $wcfHeaderText; padding: 4px 10px; font-weight: 600; background-color: $wcfHeaderBackground; } #add_footer.layoutBoundary h2 { font-size: 16px; line-height: 16px; color: $wcfContentHeadlineText; padding: 7px 0px; margin-bottom: 10px; border-bottom: 2px solid $wcfContentHeadlineText; } #add_footer.layoutBoundary h2::before { content: "\f0ac"; font-family: FontAwesome; padding-right: 4px; font-size: 18px; font-weight: 400; } #add_footer.layoutBoundary p { line-height: 1.3; font-weight: normal; margin-left: 5px; } #add_footer.layoutBoundary p.textbox { line-height: 1.4; font-weight: normal; } #add_footer.layoutBoundary li { list-style: none; text-decoration: none; border: none; } #add_footer.layoutBoundary a::before { content: "\f101"; font-family: FontAwesome; padding-right: 4px; } .add_boxright_second a::before { display: none; } #add_footer.layoutBoundary 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; } .instagram { background: #d438b0; height: 60px; width: 60px; padding-bottom: 3px; margin-top: 5px; display: inline-block; text-decoration: none; } #add_footer.layoutBoundary 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.layoutBoundary 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.layoutBoundary 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.layoutBoundary 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.layoutBoundary 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.layoutBoundary 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.layoutBoundary 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; } #add_footer.layoutBoundary a.instagram::before { content: "\f16d" !important; font-family: FontAwesome; color: #fff; position: absolute; font-size: 29px; margin-top: 26px; margin-left: 32px; font-weight: normal; z-index: 10; } /* ============================================================================================= */ /* === DO NOT TOUCH ============================================ Mobile Mode for SimpleAddFooter */ /* ============================================================================================= */ @include screen-md-down { .addInbox { display: inline-block; } .add_boxleft { width: 100%; } .add_boxleft_second { width: 100%; } .add_boxright { width: 100%; } .add_boxright_second { width: 100%; } #add_footer.layoutBoundary h1 { margin-top: 15px; font-size: 16px; line-height: 20px; } .tumb, .face, .goog, .twitt, .youtube, .twitch, .steam, .instagram { padding: 2px 0px 0px 2px; height: 98px; width: 98px; margin-right: 5px; } #add_footer.layoutBoundary a.face::before { font-size: 50px; margin-top: 35px; margin-left: 60px; font-weight: normal; } #add_footer.layoutBoundary a.twitt::before { font-size: 50px; margin-top: 35px; margin-left: 40px; font-weight: normal; } #add_footer.layoutBoundary a.goog::before { font-size: 50px; margin-top: 35px; margin-left: 40px; font-weight: normal; } #add_footer.layoutBoundary a.tumb::before { font-size: 50px; margin-top: 35px; margin-left: 55px; font-weight: normal; } #add_footer.layoutBoundary a.youtube::before { font-size: 50px; margin-top: 35px; margin-left: 36px; font-weight: normal; } #add_footer.layoutBoundary a.twitch::before { font-size: 50px; margin-top: 35px; margin-left: 40px; font-weight: normal; } #add_footer.layoutBoundary a.steam::before { font-size: 50px; margin-top: 35px; margin-left: 40px; font-weight: normal; } #add_footer.layoutBoundary a.instagram::before { font-size: 50px; margin-top: 35px; margin-left: 40px; font-weight: normal; } #add_footer.layoutBoundary p.textbox { font-size: 14px; line-height: 1.3; font-weight: 400; } }
5

Wenn alles soweit richtig nach dieser Anleitung gemacht wurde, so sollte der CSS3 Simple AddFooter jetzt im genutzten Stil sichtbar sein (unten über der Footer Navigation) - evtl. sollte noch einmal die Taste F5 zum aktualisieren der Anzeige im Browser gedrückt werden.

Bearbeitung der CSS3 Simple AddFooter Inhalte

Kommen wir zur Bearbeitung der Inhalte Ihres CSS3 Simple AddFooter, dazu öffnen Sie das Template "SimpleAddFooter" in Ihrer Templategruppe des Stils:

Anpassung > Templates > Ihre Templategruppe auswählen > Name: SimpleAddFooter

- Bearbeitung des Haupttitels Ihres AddFooter:

In folgender Codezeile kann der sichtbare Top-Titel des CSS3 Simple AddFooter gegen Ihren eigenen Titel ausgetauscht werden (Deutsch / Englisch):

Bearbeitung des Titels der ersten Box linksseitig:

In folgender Codezeile kann der Titel der ersten Box linksseitig gegen Ihren eigenen Titel ausgetauscht werden (Deutsch / Englisch):

Bearbeitung des Titels der zweiten Box linksseitig:

In folgender Codezeile kann der Titel der zweiten Box linksseitig gegen Ihren eigenen Titel ausgetauscht werden (Deutsch / Englisch):

Bearbeitung des Titels der dritten Box linksseitig:

In folgender Codezeile kann der Titel der dritten Box linksseitig gegen Ihren eigenen Titel ausgetauscht werden (Deutsch / Englisch):

Bearbeitung des Titels der vierten Box linksseitig:

In folgender Codezeile kann der Titel der vierten Box linksseitig gegen Ihren eigenen Titel ausgetauscht werden (Deutsch / Englisch):

Bearbeitung Weblinks der ersten Box linksseitig:

In den folgenden Codezeilen können Sie die Weblinks der ersten Box linksseitig Ihren Bedürfnissen anpassen (Deutsch / Englisch):

Bearbeitung Weblinks der zweiten Box linksseitig:

In den folgenden Codezeilen können Sie die Weblinks der zweiten Box linksseitig Ihren Bedürfnissen anpassen (Deutsch / Englisch):

Bearbeitung Links der Social Links-Box:

In den folgenden Codezeilen können Sie die Links der Social Links-Box Ihren Bedürfnissen anpassen (Deutsch / Englisch):

Bearbeitung Text der vierten Box linksseitig:

In den folgenden Codezeilen können Sie den Text & Link der vierten Box linksseitig Ihren Bedürfnissen anpassen (Deutsch / Englisch):

{if $__wcf->getLanguage()->languageCode === 'de'}<h1>Was ist der Simple AddFooter?</h1>{/if}
            {if $__wcf->getLanguage()->languageCode === 'en'}<h1>What is the simple AddFooter?</h1>{/if}

{if $__wcf->getLanguage()->languageCode === 'de'}
            <p class="textbox">Der Simple AddFooter wurde von <a href="https://www.powerstylez.com">Gino Zantarelli</a> entwickelt und stellt per HTML-Inhalt & CSS verschiedene Boxen im Footerbereich dar.</p>
			<br/>
			<p class="textbox">Die Inhalte können manuell im Template 'SimpleAddFooter' der verwendeten Templategruppe des Stils den eigenen Bedürfnissen angepasst werden.</p>
<br/>
<a href="https://www.powerstylez.com"><i>» Powerstylez.com</i></a>
            {/if}

{if $__wcf->getLanguage()->languageCode === 'en'}
            <p class="textbox">The Simple AddFooter was created by <a href="https://www.powerstylez.com">Gino Zantarelli</a> and represents different boxes in the footer area via HTML content & CSS.</p>
			<br/>
			<p class="textbox">The contents can be adjusted manually in the template 'SimpleAddFooter' of the used template group of the style to your own needs.</p>
<br/>
<a href="https://www.powerstylez.com"><i>» Powerstylez.com</i></a>
            {/if}

Fragen & Antworten

Was bezweckt der CSS3 Simple AddFooter?

Mit dem CSS3 Simple AddFooter können Sie Extra Linkinhalte, Text & Social Links in Ihrem Woltlab Suite 3 im unteren Bereich als Tabelle darstellen und steigern dadurch die Attraktivität ihres Internetauftritts.

Wo kann man den CSS3 Simple AddFooter optisch anpassen?

Eine optische Anpassung kann in der CSS-Definition des eingefügten Codeblocks für den CSS3 Simple AddFooter durchgeführt werden.

Wo kann man den CSS3 Simple AddFooter inhaltlich anpassen?

Eine inhaltliche Anpassung kann im erstellten Template "SimpleAddFooter" durchgeführt werden.

Der Inhalt ist in html geschrieben, daher sollte ein Grundwissen in html-coding vorhanden sein. Anhand dieser Anleitung ist das bearbeiten aber auch für Laien geeignet.

Der CSS3 Simple AddFooter wird nicht angezeigt - was nun?

- Überprüfen sie ob alle benötigten Templates & die benötigte Templategruppe vorhanden sind.

- Kontrollieren Sie ob im genutzten Stil die Templategruppe mit den benötigten Templates ausgewählt ist.

- Überprüfen Sie im Template "SimpleAddFooter" alle Pfade & Angaben.

Muss ich den CSS3 Simple AddFooter benutzen?

Selbstverständlich müssen Sie den CSS3 Simple Add Footer nicht benutzen und können diesen entfernen, dieses geht ganz einfach durch Entfernung einer Codezeile im Template "pageFooter" Ihres Stils.

Um die Codezeile zu entfernen, gehen Sie in das Admin Panel (ACP) und öffnen den Pfad zu Ihrem Footertemplate:

Anpassung > Templates > Ihre Templategruppe auswählen > Name: pageFooter

Drücken sie nun auf das Stift-Symbol linksseitig zum bearbeiten des Templates, suchen Sie folgende Codezeile & entfernen Sie diese:

{include file='SimpleAddFooter'}

Danach das Template speichern und der CSS3 Simple AddFooter ist nicht mehr im Stil sichtbar. Möchten Sie später den CSS3 Simple Add Footer doch in Ihrem Stil anzeigen, so braucht man nur die Codezeile wieder in das Template einfügen.

Achtung: Wenn Sie nicht wissen, welche Templategruppe Ihr Stil nutzt, so können Sie dieses sehen unter folgenden Pfad: Anpassung > Stile > Ihren Stil auswählen > Stift-Symbol rechtsseitig zum bearbeiten klicken > Register "Daten" > Template-Gruppe

Lizenzbestimmungen kostenlose Erweiterungen / Anleitungen:

Angebotene, kostenlose Erweiterungen / Anleitungen unterliegen dem geistigen Eigentumsrecht von Powerstylez.com und dürfen nicht auf eigenen oder anderen Plattformen kostenlos, kostenpflichtig oder als sogenannte "Warez" angeboten werden (auch nicht auszugsweise). Es ist untersagt diese Erweiterungen in fremden kostenpflichtigen oder kostenlos angebotenen Stilangeboten zu verwenden.

Angebotene, kostenlose Erweiterungen / Anleitungen dürfen für die eigene Verwendung optisch sowie codebasiert angepasst werden, das enthaltene Copyright darf nicht verändert, verdeckt oder entfernt werden.

Mitgelieferte Dateien wie z. Bspl. Photoshopvorlagen dürfen nicht auf eigenen oder anderen Plattformen kostenlos, kostenpflichtig oder als sogenannte "Warez" angeboten werden.