[Template] Extended Content

Hallo,

das Dashboard oder auch die Startseite, welche ein jedem sofort begegnen ist zugleich auch der erste Eindruck. Woltlab bietet mit seinen Boxen-System sicher viele Möglichkeiten seine Startseite zu gestalten. Ganz individuell funktioniert dieses aber nicht immer. Zwar lässt sich jeder x-beliebiger Html- oder Template-Quellcode innerhalb der Startseite (Dashbord) intrigieren, doch so manch einer wünscht sich hier mehr Flexibilität. Um diese Flexibilität nutzen zu können möchte ich hiermit einmal zeigen wie die Startseite um ein erweiterten Content (extendedContent) erweitert werden kann.

Features

• Reines HTML & CSS
• Individuell gestaltbarer Content
• Individuell an Deinen Style anpassbar

Inhalt

1. extendedContent ohne Boxen über die komplette Breite
2. extendedContent mit Seitlichen Boxen (links bzw. rechts)
3. extendedContent mit und ohne Boxen und zusätlichen Seperator

Demo

Eine Live Demo ist derzeit leider nicht vorhanden. Wird aber in kürze verfügbar sein

Quellcode

Das unachtsame bearbeiten von Templates kann zu einen Fatal-Error führen. Entsprechend dem sind vor jeglichen Änderungen ein Backup durchzuführen! Insofern keine Kenntnisse mit Templates vorhanden sind, so empfiehlt es sich einen Entwickler des Vertrauen zu kontaktieren.

Beachte, dass bei diesem Beispiel zum extendedContent auch auf der Triangle Divider (Seperator) mit includiert wurde. Wer den extendedContent ohne diesen nutzen möchte, so muss der angegebenen Html und CSS-Quellcode entfernt werden! Für diejenigen die bereits den Triangle Divider (Seperator) in Benutzung haben, können natürlich die entsprechenden CSS-Deklarationen auslassen.

Benutzung

1. Gehe zu Anpassung  Stile  DEIN_STYLE  Erweiterte Einstellungen  Individuelles CSS und SCSS.
2. Füge dort den o.g. CSS-Quellcode ein und passe diesen nach eigenen Wünschen an (Beachte dazu den nachfolgenden Punkt: Anpassung!).
3. Gehe nun zu Anpassung  Templates  DEIN_STYLE.
4. Lege mit ein klick auf + Template hinzufügen ein neues Template an und benenne dieses extendedContent.
5. Füge nun den o.g. HTML-Code ein und speicher das Template ab.
6. Gehe erneut zu Anpassung  Templates und suche das Template pageFooter
7. Kopiere nun mit einen klick auf  das pageFooter-Template in Deine Stylegruppe.
8. Füge ganz oben den folgenden Quellcode ein: {include file='extendedContent'} und speicher dieses ab.
9. Fertig!

 Der extendedContent harmoniert u.a. auch mit den [CSS] Triangle Divider (Seperator) und dem [Template] Mega Footer.

Lizenz

Copyleft oder mit anderen Worten, macht damit was Ihr wollt

Screenshots

Gruss,

Andreas

Update: extendedContent mit Seitlichen Boxen

Möchte man wie im ersten Beitrag geschrieben, anstatt des erweiterten Content über die komplette Breite, auch Seitliche Boxen verwenden, so lässt sich dieses mit nachfolgenden Quellcode verwirklichen. Wie bereits geschrieben ist dabei jedoch zu beachten, dass die Inhalte der Seitlichen Boxen manuell mit eigenen Html, JS oder aber Template-Code angelegt werden müssen. Da Bilder jedoch mehr als tausend Worte sagen, hier vorab ein Screenshot:

Quellcode

Der folgende Quellcode ist mit den Abschnitt <section class="main" id="extendedContent">des Quellcodes aus dem ersten Beitrag zu ersetzen!

Möchte man die Boxen nicht auf der rechten, sondern linken Seite angezeigt bekommen, so muss im CSS-Quellcode <aside class="sidebar boxesSidebarRight"> in <aside class="sidebar boxesSidebarLeft"> umgenannt werden.

Screenshot

Gruss,
Andreas

Update: gemischter extendedContent mit und ohne Seitlichen Boxen und zusätzlichen Seperator (Divider)

Es geht weiter ...

Möchte man den extendedContent mit zum Teil mit Seitlichen Boxen und zudem auch ohne Seitlichen Boxen über die gesamte Breite nutzen, so kann dies mit nachfolgenden Quellcode verwirklicht werden. Um dies optisch besser darzustellen wurde in diesen Beispiel ein zweiter Seperator (Divider) eingebunden. Dieser kann natürlich optional ausgeblendet werden. Wie auch zuvor hier vorab ein Screenshot dazu:

Quellcode

Der folgende Quellcode ist mit den Abschnitt <section class="main" id="extendedContent"> des Quellcodes aus dem ersten Beitrag zu ersetzen!

Möchte man die Boxen nicht auf der rechten, sondern linken Seite angezeigt bekommen, so muss im CSS-Quellcode <aside class="sidebar boxesSidebarRight"> in <aside class="sidebar boxesSidebarLeft"> umgenannt werden.

Screenshot

Gruss,
Andreas