Startseite ohne Menü

  • Betroffene Version
    WoltLab Suite 3.1

    Ich würde gerne eine Startseite ohne Menü und Footer erstellen. Einfach mit einer Grafik und einen kurzen Hinweistext bzw. Verlinkung zur Registrierung.

    Wie ist dies umsetzbar?

  • Unter anderem mit CSS und einigen anderen Anpassungen.

    Aber das lässt sich so adhoc einem "Laien" der CSS nicht so beherrscht immer schlecht erklären. Aber grob gesagt wäre das der Weg. ;)

  • Ich kann nur von mir aus sprechen. Ich sehe so was gerne live und teste dann herum.

    Im Grunde genommen also müsste man sich mal den "So-sieht-es-aktuell" - Zustand anschauen, um dann die weitere Vorgehensweise (welcher CSS Code, welche Anpassung muss gemacht werden) zu beschreiben. :)

  • Unter anderem mit CSS und einigen anderen Anpassungen.

    Was für andere Anpassungen denn? Er muss nur eine Seite mit dem Hinweis und der Grafik erstellen, die als Startseite festlegen und via CSS mit display:none alle ungewollten Teile ausblenden. Für die entsprechenden Klassen einfach mal mit dem Dev Tool des Browsers arbeiten, das ist wirklich kein Hexenwerk.

  • Wie wäre es mit einlesen? Du wirst das sicher noch öfter brauchen und die Grundlagen sind wirklich sehr einfach.

    Ansonsten kannst du natürlich auch warten, irgendwer wird dir das hier vielleicht noch vorkauen.

  • Beste Ausrede. Alleine die 2 CSS Themen heute hier zu erstellen hat länger gedauert als mal eben nachzulesen wie man mit CSS arbeitet. Du musst eigentlich lediglich die Selector (z.B. Klassen) verstehen, die benötigten CSS Anweisungen kannste auch alle googlen.

    Sorry, aber Leute die nicht mal ein Minimum an Eigeninitiative haben gehen mir auf den Senkel. Dann bezahl halt Jemanden der das für dich macht, wenn du keinen Bock hast.

    Naja, trotzdem viel Glück dass das Jemand für dich macht.

  • Sagt jemand, der sich damit auskennt.

    Ich kann weder was mit Selector noch Klassen etwas anfangen. Und ich möchte mich auch nicht damit befassen. Ansonsten könnte ich mir diese Software auch sparen und alles selber programmieren.

  • Im Grunde genommen läuft es doch ohnehin auf das eine hinaus. Du müsstest jemanden beauftragen.

    Hast du dir (wenn du zeitlich eingeschränkt bist) nicht mal überlegt administrative Unterstützung zu holen? Das macht doch mehr Sinn, als ständig hier auf antworten zu warten, die teilweise sowieso unterschiedliche Reaktionen noch hervor rufen.

  • Die meisten Dinge kann man ja inzwischen alleine mit der Software regeln. Das war ja vor Jahren auch noch nicht möglich. Früher habe ich die sogenannten "Hacks" gemeistert.

    Es ist ja nicht dringend notwendig, wäre nur eine schöne zusätzliche Aktion für meine Seite.

  • Ich kann weder was mit Selector noch Klassen etwas anfangen.

    Da würde Google ja helfen ;) Wie schon gesagt wurde: CSS ist absolut kein Hexenwerk. Die Grundlagen versteht man wirklich sehr schnell.

    Und ich möchte mich auch nicht damit befassen. Ansonsten könnte ich mir diese Software auch sparen und alles selber programmieren.

    Du sagst doch aber auch nicht, dass du dich nicht mit den Einstellungen im ACP befassen willst. Wenn man etwas anpassen möchte, muss man sich über kurz oder lang einfach damit beschäftigen. Und wer etwas am Design anpassen möchte, der kommt an CSS nicht vorbei.

    Ich würde gerne eine Startseite ohne Menü und Footer erstellen.

    Beim Footer könnte man einfach die Boxen und / oder Menüs, welche im Footer angezeigt werden, im ACP so einstellen, dass die auf der jeweiligen Seite nicht angezeigt werden. Also da wäre nicht zwingend CSS nötig. Aber da es hier jetzt mal um CSS geht, machen wir es mal via CSS.

    Wie schon gesagt wurde, muss man die Elemente einfach nur via CSS ausblenden. Ich versuche mal es dir ein bisschen Schrittweise zu zeigen. Wenn man sich vorher zumindest grob die Grundlagen von CSS anschauen würde, wäre es natürlich hilfreich. Denn ein komplettes Tutorial wird das jetzt natürlich nicht.

    Das komplizierteste an deinem Vorhaben ist vermutlich, dass du etwas nicht allgemein überall ausblenden willst, sondern nur auf einer einzigen Seite. Dafür kannst du z.B. mit dem data-page-identifier der jeweiligen Seite arbeiten. Den kannst du dir via Rechtsklick -> Untersuchen selbst heraussuchen. Zu finden ist er immer im <body> Element ganz oben im Quelltext.

    Bei selbst erstellten CMS Seiten ist es übrigens immer data-page-identifier="com.woltlab.wcf.generic123". 123 ist die ID der jeweiligen Seite.

    Damit man die Dinge dann geziielt auf dieser Seite ausblendet, umschließt man das CSS, welches man zum Ausblenden nutzt, mit folgendem Code. Natürlich mit dem passenden data-page-identifier:

    CSS
    body[data-page-identifier="com.woltlab.wbb.UnreadThreadList"] {
    
    }

    Alles innerhalb der geschweiften Klammern greift nur auf dieser einen Seite.

    Die Elemente, die du ausblenden möchtest, kannst du dir auch via Rechtsklick (auf das gewünschte Element) -> Untersuchen heraussuchen. Einfach die Maus etwas über den Quelltext fahren lassen, ggf. Zeilen aufklappen, etc blabla. Es wird immer optisch hervorgehoben, welcher Bereich der Website zu welcher Zeile des Codes gehört. Wenn man die passende Zeile gefunden hat, muss man sich nur die Klassen, IDs oder sonstwas heraussuchen.

    Hier mal als Beispiel für das Menü und den Footer:

    Die Klassen wären in diesen Fällen z.B. class="pageHeaderPanel" und class="boxesFooter", wie man jeweils in der blau markierten Zeile vom Quelltext sehen kann. Da man im CSS vor Klassen einen Punkt setzt (und vor IDs ein #), wären die Klassen im CSS also .pageHeaderPanel und .boxesFooter. Mit denen kannst du dann arbeiten, um die beiden Bereiche anzusprechen und auszublenden.

    Wie genau man Elemente mit CSS ausblendet, findet man problemlos bei Google. Spoiler: display: none.

    Wenn man die beiden gefundenen Klassen nutzt, sieht das dann z.B. so aus:

    CSS
    .pageHeaderPanel {
        display: none;
    }
    
    .boxesFooter {
        display: none;
    }

    Wenn man beide Elemente ausgeblendet hat, dann sitzt der Header allerdings noch ein Stückchen zu tief. Aber auch da muss man nur Rechtsklick -> Untersuchen machen und mit der Maus etwas über den Quelltext fahren. Auf folgendem Bild sieht man sehr schön in gelb hervorgehoben, wo der Platz freigehalten wird, an dem normalerweise das pageHeaderPanel mit Menü & Co sitzen würde, welches man ja aber ausgeblendet hat.

    Ein Blick in die Spalte ganz rechts zum CSS und man sieht, dass dort ein padding-top: 50px vorhanden ist. Diese Anweisung ist für den Platzhalter verantwortlich. Es wird um 50 Pixel nach unten verschoben. Das ersetzt man einfach mit padding-top: 0 und schon ist der Freiraum weg und der Header sitzt ganz oben.

    Also:

    CSS
    .pageHeaderContainer {
        padding-top: 0;
    }

    Wenn man jetzt alle Parts zusammensetzt, sieht das CSS insgesamt z.B. so aus:

    Und das Ergebnis wäre statt...

    ... dann das hier:

    pageHeaderPanel (Menü) und Footer wären weg.


    Ich hoffe einfach mal, dass du einigermaßen folgen konntest und dass dir das vielleicht in Zukunft mal hilft, wenn du wieder mal CSS brauchst.

    Edit:

    Ich habe das Bild und den Code mal so abgeändert, dass das Copyright nicht ausgeblendet wird. Zuerst hatte ich stumpf den ganzen Footer inklusive Copyright ausgeblendet. Aber da muss ja niemand auf dumme Ideen kommen ^^

    5 Mal editiert, zuletzt von ReeN (6. Oktober 2019 um 17:01) aus folgendem Grund: Rechtschreibfehler korrigiert

  • Jetzt muss ich aber doch noch mal nachfragen.

    Und zwar habe ich zwar auf der PC Ansicht das Headerlogo ausblenden können, im mobilen Stil wird es oben aber noch angezeigt.

    Wie kann ich dies ausblenden?

    Weiter würde ich gerne die erweiterte Konservation auf der Startseite oben rechts ausblenden lassen. Dies klappte nach einigen Versuchen mit

    Zitat

    .extendedConversations {

    display: none;

    }

    oder anderen Variationen leider nicht.

  • Weiter würde ich gerne die erweiterte Konservation auf der Startseite oben rechts ausblenden lassen. Dies klappte nach einigen Versuchen mit

    oder anderen Variationen leider nicht.

    #extendedConversations anstelle von .extendedConversations, da es eine ID und keine Klasse ist. Du musst aber auch bedenken, dass du die dazugehörigen Fenster mit ausblendest, wenn du eine Nachricht erhalten solltest, sofern diese auf der betroffenen Seite nicht angezeigt werden sollen.

  • Ja, soll nur auf dieser Seite nicht angezeigt werden.

    Zitat

    Und zwar habe ich zwar auf der PC Ansicht das Headerlogo ausblenden können, im mobilen Stil wird es oben aber noch angezeigt.

    Wie kann ich dies ausblenden?

    Hier bräuchte ich noch Unterstützung.

  • Ich bin gerade nur am Handy online und kann selbst nicht nachschauen, aber du kannst ja mal den Browser schmaler ziehen, bis die mobile Ansicht kommt und dann wieder Rechtsklick auf das Logo -> Untersuchen. Vielleicht hilft das ja schon weiter.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!