HTML Elemente mit CSS ausblenden

Habt ihr euch schon immer gewundert, fßr was das Custom CSS im WordPress-Customizer eigentlich gut ist? In diesem Tutorial von Contentbär erkläre ich euch, wie ihr beispielsweise ein Logo Element mit CSS im Custom CSS von WordPress ausblendet.

Wie findet man einen CSS-Selektor von HTML Elementen?

Einen CSS Selektor oder eine CSS-ID, CSS-Klasse findest du Ăźber die Entwicklertools im Browser. In der aktuellen Firefox Version funktioniert dies so:

Rechtsklick -> Untersuchen(Q)

Anschließend findest du alles über den Inspektor. Im folgenden Screenshot ist die Logo-CSS-Klasse gelb markiert.

CSS Klasse finden mit den Entwicklertools vom Browser

Das gefundene Element ausblenden

Solltest du das HTML-Element und die dazugehĂśrige Klasse Ăźber die Entwicklertools gefunden haben, kannst du diese nun bearbeiten. Du kannst auf der rechten Seite des Inspektors bereits mit den Werten experimentieren und schauen, wie sich das Ganze auf deine Seite auswirkt.

CSS Code um das Logo auszublenden

Wir sehen, dass die Klasse “site-logo” die Attribute fĂźr das Logo beinhalten. Mit folgendem CSS-Code blenden wir das Logo aus:

.site-logo {
display:none;
}

Tutorial: HTML-Elemente mit CSS ausblenden in WordPress

Bei jedem WordPress-Theme findet man einen Custom-CSS Part, ßber den man eigenes CSS verwenden kann um das Theme anzupassen. Im folgenden Youtube-Video erkläre ich euch, wie ihr CSS nutzt um Elemente eurer WordPress Seite auszublenden.

Was kann man mit CSS machen?

Mit einer CSS-Klasse oder ID, definierst du Formatierung und die Anpassung eines HTML-Elements. So kannst du beispielsweise bei einer h2-Überschrift benutzerdefinierte Formatierungen bestimmen.

/*custom CSS Beispiel */
#customh2 {
font-size: 22px;
background-color:blue;
}
<h2 id="customh2">Dies ist meine Custom Überschrift</h2>

Im Beispiel siehst du, wie du deine h2-Überschrift mit der ID “customh2” ausstattest, um ihr dann Attribute wie font-size und background-color zu geben.

Keine Lust, CSS Ăźber Tutorials zu lernen?

Das Contentbär-Team hilft dir gerne bei individuellen CSS-Anpassungen, unsere Abteilung fßr Softwareentwicklung ist der richtige Ansprechpartner dafßr.

Schreibe einen Kommentar

Cookie Plugin von Real Cookie Banner