Wie kann ich die WoltLab Homepage emulieren?

Edda1000 · August 27, 2020 at 8:27 AM

Quote from Layz

Müsste so funktionieren, habe es allerdings nicht getestet:

Code
body[data-page-id="XX"] { // XX steht für die Seiten-ID

.contentHeader {
display: none;
}
}

Display More

Das hat mir sehr bei der Lösung geholfen. Richtig ist es:

Code

body[data-page-id="XX"] { // XX steht für die Seiten-ID
.contentHeaderTitle {
    display: none;
    }
}

Edda1000 · August 27, 2020 at 10:27 PM

Mal eine ganz andere Frage. Wenn ich mir die Startseite von Woltlab betrachte, ist gibt es da am Ende unter "Eine Community für Sie" drei Spalten.

Neuigkeiten, Neue Plugins und Foren-Diskussionen.

Wie bekomme ich diese Boxen hin. Aber inhaltlich mit "Artikel", "Kalender" und "Foren". Also bei Artikel sollen die ersten fünf neu eingestellten Artikel in der Übersicht erscheinen. Bei Kalender die ersten fünf neu erstellten Kalendereinträge und bei Foren die ersten fünf neu erstellten Beiträge.

Edda1000 · August 29, 2020 at 9:08 AM

Das mit den Spalten habe ich erst einmal verworfen und ich habe hier im Forum einige schöne Lösungen dazu gefunden.

Aber mal eine andere Frage.

Ich habe das Ganze über die Anleitung von BlackGothic umgesetzt.

RE: Wie kann ich die WoltLab Homepage emulieren?

Nun ist es so, das in der Tabletansicht die horizontale Ansicht sehr schön aussieht. Kippe ich das Tablet vertikal, wechselt das Ganze in die mobile Ansicht. Das Hintergrundbild wird da korrekt über das komplette Display angezeigt. Allerdings ist zwischen dem Inhaltsende und dem unteren Bildschirmrand viel zu viel Leerraum.

Gibt es da Möglichkeiten das zu verringern? Also entweder, dass sich die Inhalte der ersten beiden Boxen zentriert der Mitte des Displays aus darstellen, oder dass in dieser Ansicht das Hintergrundbild in der Höhe weniger wird, auch wenn dadurch das Bild nicht mehr über die komplette Fläche des Bildschirms dargestellt wird?

Schöner würde ich die Lösung der Zentrierung der Inhalte der ersten beiden Boxen, ausgehend von der Mitte des Bildschirms (Displays) finden.

Hier mal die horizontale Ansicht:

und hier die vertikale Ansicht:

Edda1000 · September 2, 2020 at 11:22 AM

Das Problem mit der vertikalen Ansicht habe ich für meine Ansprüche gelöst.

Ich habe jetzt auch wie auf der Woltlab Startseite im unteren Bereich drei Boxen nebeneinander.

1. Box: Letzte Aktivitäten

2. Box: Letzte Beiträge

3. Box: Box mit eigenem Inhalt

Mir geht es jetzt darum mal eine der Boxen so umzugestalten, dass als Ergebnis die Ausgabe der dritten Box der Woltlab Startseite erscheint. Natürlich inhaltlich mit den Daten meines Forums. Wenn ich das richtig sehe besteht diese Box „ Foren-Diskussionen“ inhaltlich aus einer abgesteckten Version der Box „Letzte Beiträge“. Wie kriege ich so etwas hin?

Syntafin · September 2, 2020 at 2:50 PM

Falls gewünscht, gebe ich dir den SCSS Code von meinem alten Forum:
https://double-spoiler.de/

(ich weiß leider nicht wie viel zu sehen ist, da Wartungsmodus aktiv)

Edda1000 · September 2, 2020 at 2:58 PM

Öhmmmm, sorry, aber was soll ich da sehen?

Syntafin · September 2, 2020 at 3:02 PM

Quote from Edda1000

Öhmmmm, sorry, aber was soll ich da sehen?

Nun gut... wäre es geklärt xD Wartungsmodus hats kaputt gemacht. Anbei Screenshot:

Edda1000 · September 2, 2020 at 3:08 PM

OK, aber das Problem mit der vertikalen Ansicht auf einem Tablet habe ich ja gelöst. Ich glaube auf dieses Posting antwortest Du. Also ich meine dieses Posting von mir:

Mein Posting!

Aber ich bin ja schon einen Schritt weiter.

In dem darauf folgenden Posting hatte ich dann geschrieben, dass ich für das Ansichtsproblem eine Lösung gefunden habe und ich nun unten bei den drei nebeneinander liegenden Boxen Hilfe brauche.

Offene Frage von mir!

DER DUKE · September 6, 2020 at 7:27 AM

Quote from pehbeh
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
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;
        }
    }
}
Display More
Zusätzlich habe ich den Bereich mit dem Logo entfernt.

Das war es auch schon. Ergebnis:

Moin,

ich hab das unter Stilunabhängiges CSS und SCSS eingetragen,ist das soweit richtig,weil es wird mir bisher noch nichts angezeigt.

CSS

body[data-page-id="46"] {
    // Box-Styling mit Hintergrund über die gesamte Breite
    .boxesHero {
        background-image: url('https://www.holzbau-gindhart.de/');
        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;
        }
    }
}

Display More

Aze · September 6, 2020 at 8:31 AM

Quote from DER DUKE

background-image: url('https://www.holzbau-gindhart.de/');

Wenn der Image Pfad nicht korrekt gesetzt wird, ist es kein Wunder

DER DUKE · September 6, 2020 at 8:40 AM

Code

background-image: url('http://motorsport-kirchdorf.com/images/inspireBlue/Ruder.jpeg/');

was ist da falsch.

Edda1000 · September 6, 2020 at 9:14 AM

Nur nee Vermutung. Lass mal den Schrägstrich hinter .jpeg weg. Ein Versuch ist es Wert.

DER DUKE · September 6, 2020 at 9:33 AM

Quote from Edda1000

Nur nee Vermutung. Lass mal den Schrägstrich hinter .jpeg weg. Ein Versuch ist es Wert.

Ich danke euch,aber egal was ich bisher versucht habe,nichts davon wird angezeigt.
Irgendwo ist steckt der Wurm.......

CSS

body[data-page-id="46"] {
    // Box-Styling mit Hintergrund über die gesamte Breite
    .boxesHero {
        background-image:url('http://motorsport-kirchdorf.com/images/inspireBlue/Ruder.jpeg');
        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;
        }
    [data-page-id="46"] #main {
    display: none;
    /* oder */
    padding: 0;
    }    
.pageHeaderContainer {
    background: url('http://motorsport-kirchdorf.com/images/inspireBlue/Sportheader.PNG') center center/cover;
}
    }
    }

Display More

Hitman · September 6, 2020 at 9:43 AM

Die Fehlermeldung sagt es doch schon

Nimm mal am Ende eine spitze Klammer weg.

DER DUKE · September 6, 2020 at 9:54 AM

Quote from Hitman

Die Fehlermeldung sagt es doch schon
Nimm mal am Ende eine spitze Klammer weg.

Code

        background-image:url'http://motorsport-kirchdorf.com/images/inspireBlue/Ruder.jpeg';

meinst du das so.!!!

Black Rider · September 6, 2020 at 10:03 AM

Nein, es ging um die } ganz am Ende des Codes in Zeile 36 deines Codes oben.

Hitman · September 6, 2020 at 10:04 AM

Quote from DER DUKE

meinst du das so.!!!

Das meinte ich jetzt nicht. Ich bin von diesem Beitrag ausgegangen.

Hitman · September 6, 2020 at 10:11 AM

Dir ist bewusst das du wechselnde HG-Bilder im Header hast, da du von dieser Seite [data-page-id="46"] (Dashboard) sprichst.

Obwohl der Slider ja überall angezeigt wird.

DER DUKE · September 6, 2020 at 10:14 AM

Quote from Black Rider

Nein, es ging um die } ganz am Ende des Codes in Zeile 36 deines Codes oben.

Hallo Black Rider,

jetzt sieht das so aus bei mir,ich denke ich habe bestimmt was falsch gemacht mit dieser Box Sache.

Wäre echt Super wenn einer sich das mal ansehen könnte.

Danke

CSS

body[data-page-id="46"] {
    // Box-Styling mit Hintergrund über die gesamte Breite
    .boxesHero {
        background-image:url('http://motorsport-kirchdorf.com/images/Ruder.jpeg');
        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;
        }
    [data-page-id="46"] #main {
    display: none;
    /* oder */
    padding: 0;
    }
        }
    }

Display More

DER DUKE · September 6, 2020 at 10:25 AM

Quote from Hitman

Dir ist bewusst das du wechselnde HG-Bilder im Header hast, da du von dieser Seite [data-page-id="46"] (Dashboard) sprichst.
Obwohl der Slider ja überall angezeigt wird.

Emmm,das ist ein Neues Stile was ich für das Neue Forum installiert habe.
Ich wollte eigentlich nur ein Vollbild auf der Startseite haben,ist das so nicht möglich.

Participate now!