Benutzerdefiniertes CSS & Ausblenden von Teilen der Website über CSS

Ziemlich häufige Anfragen betreffen das Ausblenden bestimmter Teile auf der Website, die auf der Admin-Seite keine eigene Ein-/Aus-Schaltfläche haben. Da es nicht möglich ist, für jedes Detail im Frontend Theme-Administratorschaltflächen zu haben, können Sie unerwünschte Teile einfach mit CSS ausblenden, wenn Sie nicht mit der Bearbeitung von HTML-Codes vertraut sind, um den Teil überhaupt zu entfernen.

Suchen Sie das zu entfernende Teil

Mithilfe von Browser-Entwicklertools können Sie genau den Teil finden, den Sie entfernen möchten.
Nehmen wir an, Sie möchten den Teil mit dem Datum und dem Autor unter dem Blog-Beitrag entfernen, indem Sie mit der rechten Maustaste auf diesen Teil „Inspect Element“ klicken und die Browser-Entwicklertools öffnen:

Öffnen Sie die Entwicklertools

Wenn Sie den Mauszeiger über Ihren Quellcode bewegen, können Sie den hervorgehobenen Abschnitt auf der Seite sehen, der auf eine Zeile Quellcode unter Ihrem Mauszeiger verweist:

Element in der Quelle finden

Auf diese Weise können Sie Abschnitte finden, die Sie ausblenden möchten – beispielsweise anhand der Screenshots oben, wenn es sich um einen Abschnitt mit Datum und Autor handelt, oder nur um einen Abschnitt mit Datum oder nur um einen Abschnitt mit dem Autor.

Schreiben Sie CSS, um den ausgewählten Abschnitt auszublenden

Wenn Sie einen Teil ausgewählt haben, den Sie ausblenden möchten, verwenden Sie das ID- oder CLASS-Attribut des ausgewählten HTML-Tags in Ihren eigenen CSS-Stilen oder verwenden Sie genau den CSS-Selektor, den das Theme für dieses Tag verwendet. Den CSS-Selektor für das ausgewählte Tag, das vom Theme verwendet wird, finden Sie auf der rechten Seite der Browser-Entwicklertools.
Wenn Sie beispielsweise beschlossen haben, den gesamten Teil mit Datum und Autor zu entfernen, lautet der vom Thema verwendete Selektor: .elm-posts-main .item .item-info

CSS-Selektoren für Tag

Der CSS-Stil zum Ausblenden des HTML-Tags an der Seite ist „display: none;“, den Sie auch verwenden können !wichtig Anweisung, um ein weiteres Überschreiben des CSS-Stils mit einem anderen CSS zu verhindern.

Der endgültige CSS-Stil zum Ausblenden von Teilen mit Datum und Autor lautet also:

.elm-posts-main .item .item-info { display: none !important; }

Fügen Sie benutzerdefinierten CSS-Code zum Customizer hinzu

Sie können den benutzerdefinierten CSS-Code hinzufügen Aussehen > Anpassen > Zusätzliches CSS

Nach der Veröffentlichung können Sie es auf Ihrer Website überprüfen:

apply_css_style