Hallo, Besucher der Thread wurde 70 aufgerufen und enthält 2 Antworten

letzter Beitrag von Belarus am

[Template] Extended Content

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.
    • Neu

    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.

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    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

    • Neu

    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!

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    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

    • Neu

    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!

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    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

    • Neu
    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!