Twenty Fifteen Logo ein- und ausblenden

In der neusten Version von Twenty Fifteen ist es möglich ein eigenes Logo zu hinterlegen. Dieses wird dann auf jeder Bildschirmgröße dargestellt.

Bei der Smartphone Ansicht hat mir das nie so wirklich gefallen also musste eine Lösung her. Mit etwas CSS Code im Child Theme ist das auch schnell gemacht.

Was gilt es zu beachten?

Wichtig beim einsetzen des CSS Snippets ist es das er in der richtigen Reihenfolge geschrieben wird. Ansonsten überschreibt man das gewünschte vielleicht wieder.

Das WordPress Standard Theme von 2015 ist mobile First aufgebaut. Das bedeutet das alles zuerst auf der „Smartphone Ebene“ angepasst wurde. Dadurch haben wir eine gewisse Vorgabe für die Änderungen.

Welche „Ebenen“ oder besser vielleicht Displaygrößen gibt es denn alles?

Insgesamt ist das Theme für 8 Displaygrößen angepasst. Welche das sind und wie du dir das verstellen kannst habe ich hier einmal aufgelistet:

  • „Standard“, alles unter 620px / 38,75em Breite
  • Smartphone groß 620px @media screen and (min-width: 38.75em)
  • Tablet klein 740px @media screen and (min-width: 46.25em)
  • Tablet groß 880px @media screen and (min-width: 55em)
  • Desktop klein 955px @media screen and (min-width: 59.6875em)
  • Desktop mittel 1100px @media screen and (min-width: 68.75em)
  • Desktop groß 1240px @media screen and (min-width: 77.5em)
  • Desktop sehr groß 1403px @media screen and (min-width: 87.6875em)

In jedem dieser sogenannten Media Screens kannst du jetzt Anpassungen durchführen. Wie oben schon einmal geschrieben musst du dabei auf die Hierarchie achten. Das ist an sich ganz einfach, alles fällt, wie bei der Schwerkraft, nach unten. Genau so hier.

Das bedeutet wenn du auf dem Smartphone das Logo nicht oder vielleicht kleiner angezeigt haben möchtest schreibst du das einfach alles über die @media screen Einträge. Das bewirkt aber ebenfalls das es bis „runter“ auf den sehr großen Desktop nicht mehr angezeigt oder verkleinert wird.

Wenn du es jetzt wieder ab den großen Tablets, das wäre auch das kleine Tablet quer gehalten, angezeigt haben möchtest dann musst da die Standard Größe wieder einstellen oder wieder einblenden lassen.

Das ganze einmal dargestellt an meinem Beispiel. Ich wollte das dass Logo vom Smartphone bis zum Tablet groß nicht dargestellt wird. Das habe ich dann mit folgendem CSS Code gelöst.

.custom-logo {display: none;}

/* Tablet Large 880px */
@media screen and (min-width: 55em){
.custom-logo {display: inline;}
}

Hier noch das Vorher und Nachher Bild 😉

Twenty Fifteen Logo in der mobilen Version ausgeblendet

Hast du fragen oder war etwas wenig verständlich beschrieben? Dann schreib einen Kommentar.


Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert