Wie kann ich die WoltLab Homepage emulieren?

  • Affected Version
    WoltLab Suite 3.0

    Ich versuche, ein großes Bild zu erhalten, um im Header-Bereich auf der Dashboard-Seite zu sehen, wie das, was hier getan wird, https://www.woltlab.com/, aber ich habe kein Glück. Wie ist die WoltLab Homepage eingerichtet?

    Dies gilt nicht für Header und Logo:

    CSS
    .boxesHero {
            background: url(#{$style_image_path}background.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            min-height: calc(100vh - 50px); 
    }
  • Why did you create another one in German?

    Because there are more German speaking users and I need to get my question answered (instead of being told to use my browser's developer tool). Unfortunately, if you ask a question in the English forums the chance of it being answered is not very good.

  • 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.

    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.

  • 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.

    I did not expect to get an answer yesterday or even today. My decision to ask my question in the German forums was based on past experiences with asking questions in the English forums.

  • 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:

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

    Das war es auch schon. :) Ergebnis:

    Edited 2 times, last by Scamander: CSS-Code optimiert (siehe paar Beiträge unten) (December 27, 2016 at 4:29 PM).

  • 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

    Mit freundlichen Grüßen

  • 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. :)

  • 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:

    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,

    Mit Besten Grüßen, ArnoEdwin Begnadigt.           I write as I learned it, and because I can't do better, allow me ;)

    Edited 2 times, last by ArnoEdwin: Link zur Seite entfernt, wird nun doch nicht genutzt. Sry (December 29, 2016 at 7:25 PM).

  • Jep.

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

    Meine Beiträge stellen - sofern nicht ausdrücklich anders gekennzeichnet - ausschließlich meine subjektive und aus Erfahrung und / oder Reflexion gewonnene Meinung dar und sind nicht als Fakten zu verstehen. Meinungen sind persönliche Ansichten und benötigen keine Belege. In Deutschland gilt nach Artikel 5 des Grundgesetzes Meinungsfreiheit. Meine Beiträge stellen keine Rechtsberatung dar, hierzu bin ich nicht befugt.

  • 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:

  • 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.

    Meine Beiträge stellen - sofern nicht ausdrücklich anders gekennzeichnet - ausschließlich meine subjektive und aus Erfahrung und / oder Reflexion gewonnene Meinung dar und sind nicht als Fakten zu verstehen. Meinungen sind persönliche Ansichten und benötigen keine Belege. In Deutschland gilt nach Artikel 5 des Grundgesetzes Meinungsfreiheit. Meine Beiträge stellen keine Rechtsberatung dar, hierzu bin ich nicht befugt.

  • 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.

    Meine Beiträge stellen - sofern nicht ausdrücklich anders gekennzeichnet - ausschließlich meine subjektive und aus Erfahrung und / oder Reflexion gewonnene Meinung dar und sind nicht als Fakten zu verstehen. Meinungen sind persönliche Ansichten und benötigen keine Belege. In Deutschland gilt nach Artikel 5 des Grundgesetzes Meinungsfreiheit. Meine Beiträge stellen keine Rechtsberatung dar, hierzu bin ich nicht befugt.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!