Wie kann ich die WoltLab Homepage emulieren?

Hey Paul,

please write in English if you're not fluent in German, it's much more easy for both - you and the person who wants to help.

As I can see, you already created a thread in the English corner of the forum: How to emulate the WoltLab homepage?

Why did you create another one in German?

All the people that may can help are the developers. These kind of crazy people usually use the forum and all other things in English, because it's the world language and everybody can speak / read / write it.

Please respect that only a few people here work at WoltLab. It's not their priority to help you getting the same website layout as they have. People like Alexander Ebert, etc. have holidays, too. Mr. Ebert has a family, he has parents, siblings - respect his own interests.

If you are friendly to the people here, they surely help you.

Quote from PJK

I need to get my question answered (instead of being told to use my browser's developer tool)

The browser tools are the best to find out how the layout works. You can't apply it to your site 1:1 because every site is different, but you can try to understand how the logic behind works and learn how to do it yourself.

Quote from jacboy

please write in English if you're not fluent in German

Im Deutschen Bereich? Anstand hast Du auch nicht.

Höre bitte auf ein Deutsches Thema zu Verdenglischen. Paul schreibt hier in Deutsch also kannst Du auch in Deutsch Antworten.

Danke

Genau das würde mich auch interessieren. Wie bekommt man es hin, dass auf der Startseite ein Bild über die gesamte Breite und Höhe angezeigt wird, so wie es auf der Seite von Woltlab der Fall ist? Ich habe die Woltlab Suite 3.0 zwar im Moment noch nicht, aber ich habe mir so eine Demo einrichten lassen und habe dort probiert sowas zu machen, aber mir wird das Bild immer nur in verkleinerter Version angezeigt. Deshalb hänge ich mich hier einfach mal mit rein...

Das ist eigentlich recht einfach.

• Du legst eine neue Box über die Boxen-Verwaltung an. Beispielsweise eine Text-Box.
• Als Position wählst Du Hero.
• Unter Inhalte das was Du haben willst, also bspw. Titel mit Hallo und Text mit Du da...
• Unter Seiten wählst Du die Seite aus, auf der das angezeigt wird, bei mir ist es die Startseite
• In Deinen Stil packst Du als zusätzliche Angaben dann die Gestaltung mit Link zum Bild, das als Hintergrund angezeigt werden soll:

body[data-page-id="XXXX"] {
    // Box-Styling mit Hintergrund über die gesamte Breite
    .boxesHero {
        background-image: url('https://picload.org/image/raigprro/road-street-blur-blurred.jpg');
        background-size: cover;
        display: flex;
        min-height: calc(100vh - 50px);
    }

    // logo und breadcrumbs ausblenden
    .pageHeaderLogo,
    .pageNavigation {
        display: none;
    }

    // Anpassung, damit kein leerer Raum dargestellt wird
    .pageHeaderFacade > .layoutBoundary {
        padding: 0 !important;
    }

    @include screen-md-down {
        // Darstellung des mobilen Logos erzwingen
        .pageHeaderLogo,
        .pageHeaderLogoSmall {
            display: block;
        }
    }
}

Zusätzlich habe ich den Bereich mit dem Logo entfernt.

Das war es auch schon. Ergebnis:

Quote from azerus

Das ist eigentlich recht einfach.

Zusätzlich habe ich den Bereich mit dem Logo entfernt.

Das war es auch schon. Ergebnis:

Wie verhält sich das mobile? Passt sich das Ganze an?

Quote from Devon

Wie verhält sich das mobile? Passt sich das Ganze an?

Jep.

Quote from azerus

body[data-page-id="XXX"] {

wie bekommt man die data-page-id raus

ich habe die Boxen Nr genommen die ich angelegt habe aber es passiert dann denoch nichts.

Es wird die Grafik nicht angezeigt, und aus der rechten Seiten Leiste die Boxen werden angezeigt.

Mfg

Die steht zum Beispiel wenn Du die Seite aufrufst im Seitenquelltext im body-Tag und heißt dort genauso wie im CSS (data-page-id="xxx"). Andernfalls wenn Du die Seite im ACP bearbeitest, steht die ID auch in der Adressleiste.

Quote from azerus

Das ist eigentlich recht einfach.

• Du legst eine neue Box über die Boxen-Verwaltung an. Beispielsweise eine Text-Box.
• Als Position wählst Du Hero.
• Unter Inhalte das was Du haben willst, also bspw. Titel mit Hallo und Text mit Du da...
• Unter Seiten wählst Du die Seite aus, auf der das angezeigt wird, bei mir ist es die Startseite
• In Deinen Stil packst Du als zusätzliche Angaben dann die Gestaltung mit Link zum Bild, das als Hintergrund angezeigt werden soll:

CSS

// Gestaltung der Box vom Typ .boxesHero auf der Seite mit ID XXX
    body[data-page-id="XXX"] {
        .boxesHero {
            background-image: url('https://img2.picload.org/image/rairrdgr/road-street-blur-blurred.jpg');
            background-size: cover;
            display: flex;
            min-height: calc(100vh - 50px);
        }
        // damit der große Bereich mit dem Logo ausgeblendet wird
        .pageHeaderFacade {
            display: none;
        }
    }

Display More

Zusätzlich habe ich den Bereich mit dem Logo entfernt.

Das war es auch schon. Ergebnis:

Hallo Scamander , Herzlichen Dank für Diese Anleitung, die Sache funktioniert Einwandfrei,

Quote from azerus

Jep.

Und wie schafft man es, dass das Logo mobil angezeigt wird wie bei Woltlab?

Quote from D3nnis3n

Und wie schafft man es, dass das Logo mobil angezeigt wird wie bei Woltlab?

Habe noch mal gespielt und eine Lösung ohne Template-Änderung gefunden. Mit dem hier aktualisierten CSS von oben, wird das Logo mobil dargestellt:

body[data-page-id="XXXX"] {
    // Box-Styling mit Hintergrund über die gesamte Breite
    .boxesHero {
        background-image: url('https://picload.org/image/raigprro/road-street-blur-blurred.jpg');
        background-size: cover;
        display: flex;
        min-height: calc(100vh - 50px);
    }

    // logo und breadcrumbs ausblenden
    .pageHeaderLogo,
    .pageNavigation {
        display: none;
    }

    // Anpassung, damit kein leerer Raum dargestellt wird
    .pageHeaderFacade > .layoutBoundary {
        padding: 0 !important;
    }

    @include screen-md-down {
        // Darstellung des mobilen Logos erzwingen
        .pageHeaderLogo,
        .pageHeaderLogoSmall {
            display: block;
        }
    }
}

Sehr hübsch. Im Nicht-HTML Modus kann man wohl keine FontAwesomeIcons verwenden? Sie werden zwar im Editor angezeigt, auch nicht gelöscht, aber im Frontend sind sie dann schlicht nicht zu sehen.

Quote from D3nnis3n

Sehr hübsch. Im Nicht-HTML Modus kann man wohl keine FontAwesomeIcons verwenden? Sie werden zwar im Editor angezeigt, auch nicht gelöscht, aber im Frontend sind sie dann schlicht nicht zu sehen.

ja, das hab ich leider auch schon festgestellt. Die Icon scheinen nur im html Modus zu funktionieren bzw angezeigt zu werden.

Ich würde das aber als Bug sehen, hinsichtlich dessen, dass sie im Editor ja gar nicht entfernt werden und sichtbar sind.

Ist aber auch so mit Info-Meldungen, die via HTML Modus eingeschleust werden. Im Editor alles okey, aber dann wirds weggefiltert.