{"id":90906,"date":"2021-08-31T12:42:23","date_gmt":"2021-08-31T12:42:23","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=90906"},"modified":"2023-12-12T09:19:50","modified_gmt":"2023-12-12T08:19:50","slug":"hide-parts-of-website-via-css","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/de\/teile-der-website-uber-css-ausblenden\/","title":{"rendered":"Benutzerdefiniertes CSS & Ausblenden von Teilen der Website \u00fcber CSS"},"content":{"rendered":"

Ziemlich h\u00e4ufige Anfragen betreffen das Ausblenden bestimmter Teile auf der Website, die auf der Admin-Seite keine eigene Ein-\/Aus-Schaltfl\u00e4che haben. Da es nicht m\u00f6glich ist, f\u00fcr jedes Detail im Frontend Theme-Administratorschaltfl\u00e4chen zu haben, k\u00f6nnen Sie unerw\u00fcnschte Teile einfach mit CSS ausblenden, wenn Sie nicht mit der Bearbeitung von HTML-Codes vertraut sind, um den Teil \u00fcberhaupt zu entfernen.<\/p>\n\n\n\n

<\/span>Suchen Sie das zu entfernende Teil<\/span><\/h2>\n\n\n\n

Mithilfe von Browser-Entwicklertools k\u00f6nnen Sie genau den Teil finden, den Sie entfernen m\u00f6chten.
Nehmen wir an, Sie m\u00f6chten den Teil mit dem Datum und dem Autor unter dem Blog-Beitrag entfernen, indem Sie mit der rechten Maustaste auf diesen Teil \u201eInspect Element\u201c klicken und die Browser-Entwicklertools \u00f6ffnen:<\/p>\n\n\n\n

\"\u00d6ffnen<\/a><\/figure>\n\n\n\n

Wenn Sie den Mauszeiger \u00fcber Ihren Quellcode bewegen, k\u00f6nnen Sie den hervorgehobenen Abschnitt auf der Seite sehen, der auf eine Zeile Quellcode unter Ihrem Mauszeiger verweist:<\/p>\n\n\n\n

\"Element<\/a><\/figure>\n\n\n\n

Auf diese Weise k\u00f6nnen Sie Abschnitte finden, die Sie ausblenden m\u00f6chten \u2013 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.<\/p>\n\n\n\n

<\/span>Schreiben Sie CSS, um den ausgew\u00e4hlten Abschnitt auszublenden<\/span><\/h2>\n\n\n\n

Wenn Sie einen Teil ausgew\u00e4hlt haben, den Sie ausblenden m\u00f6chten, verwenden Sie das ID- oder CLASS-Attribut des ausgew\u00e4hlten HTML-Tags in Ihren eigenen CSS-Stilen oder verwenden Sie genau den CSS-Selektor, den das Theme f\u00fcr dieses Tag verwendet. Den CSS-Selektor f\u00fcr das ausgew\u00e4hlte 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<\/code><\/p>\n\n\n\n

\"CSS-Selektoren<\/a><\/figure>\n\n\n\n

Der CSS-Stil zum Ausblenden des HTML-Tags an der Seite ist \u201edisplay: none;\u201c, den Sie auch verwenden k\u00f6nnen !wichtig<\/strong> Anweisung, um ein weiteres \u00dcberschreiben des CSS-Stils mit einem anderen CSS zu verhindern.<\/p>\n\n\n\n

Der endg\u00fcltige CSS-Stil zum Ausblenden von Teilen mit Datum und Autor lautet also:<\/p>\n\n\n\n

.elm-posts-main .item .item-info { display: none !important; }<\/pre>\n\n\n\n
<\/span>F\u00fcgen Sie benutzerdefinierten CSS-Code zum Customizer hinzu<\/span><\/h2>\n\n\n\n
Sie k\u00f6nnen den benutzerdefinierten CSS-Code hinzuf\u00fcgen Aussehen > Anpassen > Zus\u00e4tzliches CSS<\/strong><\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Nach der Ver\u00f6ffentlichung k\u00f6nnen Sie es auf Ihrer Website \u00fcberpr\u00fcfen:<\/p>\n\n\n\n
\"apply_css_style\"<\/a><\/figure>\n
\n
\n
Inhalts\u00fcbersicht<\/p>\n<\/span><\/div>\n