Style etwas nur auf der Startseite

Ich bin relativ neu in WordPress, aber ich bin sicher, dass es eine Möglichkeit gibt, das zu tun, was ich gerne machen würde.

Ich habe einen Container in meiner Vorlage, und auf der Startseite möchte ich etwas anderes Padding für dieses Element angeben.

Mein aktuelles CSS lautet wie folgt:

#main_content .container { position: relative; padding: 120px 0; } 

Ich möchte die Polsterung auf 80px bringen, wenn ich auf der Startseite bin, ansonsten behalte es so.

Ist das etwas, was ich in der Vorlage tun müsste, oder gibt es ausgefallene “WordPress only” CSS Tricks, von denen ich momentan nichts weiß?

In meiner begrenzten Erfahrung sollte ich in der Lage sein, anzugeben, ob die Seite is_home oder ähnlich ist, und ein benutzerdefiniertes Stylesheet in der Datei header.php für die Homepage auswählen. Vermutlich mit !important nach meiner Padding-Änderung für das CSS.

Kann ich eine Richtung bekommen? Die Ergebnisse, die ich durch die Suche finde, sind nicht besonders, was ich versuche zu tun.

Solutions Collecting From Web of "Style etwas nur auf der Startseite"

WordPress body_class($class) ist eine nette dynamische Möglichkeit, Stile, js für bestimmte Körperinhalte zu laden. Wenn Ihr Theme keine Body-class unterstützt, fügen Sie diese einfach hinzu:

  • Öffnen Sie die header.php (oder die Vorlage, die das -Tag enthält)
  • Bearbeiten Sie das -Tag und machen Sie es zu > > – Sie sind fertig! 🙂

Jetzt, wenn du da bist:

  • Startseite, Ihr Body-Tag wird
  • Front Page , Ihr Body-Tag wird
  • single.php ( single.php ), Ihr Body-Tag wird
  • Auf der Seitendetailseite ( page.php ) page.php Ihr body-Tag

Du bist jetzt frei. Stil wie du willst. Für das externe Stylesheet und für die Homepage wird Ihr Stil sein (@saifur wurde bereits erwähnt):

 body.home #main_content .container { position: relative; padding: 120px 0; } 

Internes CSS

Für internes CSS gibt es in WordPress einen bedingten Checker namens is_home() und einen anderen is_front_page() . Mit diesen beiden können Sie überprüfen, ob “Sie” auf der Startseite oder auf der Startseite sind, und dann Ihren internen CSS-Code laden:

 < ?php if( is_home() || is_front_page() ) : ?>  < ?php endif; ?> 

Ähnlich is_single() , is_page() , is_category() , is_archive() , is_day() , … usw.

Überprüfen Sie die class des Body-Tags. Es gibt eine class namens home für die Startseite. Ich hoffe, das folgende CSS wird dir helfen.

 .home #main_content .container { position: relative; padding: 120px 0; }