webentwicklung-frage-antwort-db.com.de

Kopfzeilenstil auf der Startseite und den verbleibenden Seiten unterschiedlich

Wäre es ziemlich einfach, verschiedene Site-Header- und Menüstile hinzuzufügen und sie bestimmten Seiten zuzuweisen? Ich verstehe sehr gut, wie CSS und PHP funktionieren, und habe es geschafft, das Thema anzupassen, aber das übersteigt meine Möglichkeiten. Könnte jemand sagen, welchen Code ich wo hinzufügen soll, damit ich Header und Hauptmenü bekomme:

  1. on HOME - weißer Seitentitel, Beschreibung und Menü auf schwarzem Hintergrund,
  2. auf anderen Seiten - schwarzer Seitentitel, Beschreibung und Menü auf weißem Hintergrund?
1
el Huzar

Es gibt mehrere Möglichkeiten, dies zu erreichen. Sie können eine eindeutige Seitenvorlage erstellen , um ein Stylesheet nur für die Homepage, oder verwenden Sie eine eindeutige Klasse auf der Homepage.

Dies ist wahrscheinlich das einfachste.

Wenn Sie Ihre Homepage mit dem Browser überprüfen (drücken Sie F12) und sich das Body-Tag ansehen, werden Sie feststellen, dass WordPress eine .home-Klasse hinzufügt. Hiermit können Sie verschiedene Stile anwenden, die sich nur auf die Startseite auswirken.

Hier sind einige Beispiele, die auf Ihren Wünschen basieren.

.home .site-branding {
    background-color: #000;
}

.home .site-title a, 
.home .site-description {
    color: #fff;
}

Ich würde empfehlen, alle anderen Seiten so zu gestalten, wie Sie es möchten, und dann die .home-Klasse zu verwenden, um Dinge auf der Homepage zu ändern, wie im obigen Beispiel. Sie können jedoch auch das Gegenteil tun und Seiten als Ziel festlegen, auf denen die .home-Klasse nicht vorhanden ist.

Zum Beispiel...

body:not(.home) .site-branding {
    background-color: #fff;
} 

Hinweis : Sehen Sie sich die Body-Klasse auf verschiedenen Seiten an, WP fügt eine eindeutige Klasse für Seiten, Posts, Vorlagen usw. hinzu, um solche Dinge zu erstellen einfach.

1
RiddleMeThis