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.
Inhalte dieser Seite
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.
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.
Im Schnitt wird diese Unterseite von ca. 20-30 Menschen pro Tag aufgerufen. Somit hilft dieser Beitrag täglich Menschen. Wir von Contentbär haben allerdings bereits seit mehr als 12 Monaten keinen Link mehr auf diesen Beitrag erhalten. Sei doch so nett und verlinke unsere Webseite auf deiner Webseite / Uni / Schule. Das würde uns viel bedeuten und auch helfen!! 🙂
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.
