Zum Inhalt springen

WordPress: Wie man die Größe des Logos im Theme Twenty Seventeen ändert

Seid meinem Umzug zu einem neuen Provider, nutze ich auch der original WordPress-Theme Twenty Seventeen und bin damit sehr zufrieden, da mir das Minimalistische und Übersichtliche des Layout sehr gut gefällt. 

Allerdings hat mich gestört, dass das Logo, welches man in den Header einbauen kann, sehr klein angezeigt wird. 
Mit folgenden Code-Schnippsel könnt ihr die Größe des Logos vergrößern, oder – wenn ihr wollt – auch anpassen:

@media screen and (min-width: 48em) {
	.custom-logo-link img {
		max-width: 700px;
	}
}

.custom-logo-link img {
    /* display: inline-block; */
    max-height: 160px;
    /* width: auto; */
}
  • Die 700 Pixel max-width ist das doppelte von den standardmässigen 300px. Um die Logogröße zu halbieren, tragt dort 150px ein.
  • Die 160px max-height ist die Verdoppeltung der 80px, die per default eingetragen sind. Möchtet ihr wieder die Hälfte des Originalzustands haben, so müsst ihr dir 40px eintragen.
  • Obigen Code fügt ihr am einfachsten im WordPress-Backend unter „Design“ > „Customizer“ > „Zusätzliches CSS“ ein.

Der Original-Post, den ich mit diesen hilfreichen Infos gefunden habe, findet ihr unter:
How To Change The Logo Size (Increase & Decrease) In Twenty Seventeen
Originally published at Bharat Karavadra.

11 Gedanken zu „WordPress: Wie man die Größe des Logos im Theme Twenty Seventeen ändert“

  1. Heyho Markus,

    super, genau das habe ich gesucht.

    Wenn ich das nun ins Child-Theme einfügen will zur Sicherheit, in welche Datei des Child-Themes muss das dann rein? …

    DANKE!

    Viele Grüße,
    Kerstin

    1. Hallo Kerstin,
      freut mich, wenn ich dir helfen konnte. 🙂
      Das mit dem Child-Theme kann ich dir leider nicht beantworten.
      Um ehrlich zu sein, hab ich bislang noch nicht so richtig kapiert, für was diese Child-Themes gut sein sollen.
      Bislang bin ich auf meinen Blogs/Webseiten immer mit einem Haupt-Theme ausgekommen und wüsste gerade nicht, welchen Vorteil mit solche Unter-Themes bringen würden. Aber vielleicht kannst du mir ja dafür einen guten Anwendungsfall nennen. 😉
      Servus Markus

  2. Hi Markus,
    mit einem Update des Themes ist es wahrscheinlich, dass die selbst vorgenommenen Änderungen überschrieben werden. Daher Child. Wo fügst du den o.g. Schnipsel denn genau ein? Die selbe Datei ist es dann auch im Child.
    Viele Grüße,
    Kerstin

  3. Hi Markus,
    Ich hab die Änderungen im Backend eingetragen und in der Desktop Version klappt alles wunderbar. Gibt es auch eine Möglichkeit das Logo in der mobilen Version vergrößert anzuzeigen? Da hat es nämlich bei mir nach wie vor die kleine Größe.

    Liebe Grüße Kimmy

    1. Hallo Kimmy,
      das weiß ich jetzt nicht auswendig, aber ich kann dir mal so eine grundsätzliche Vorgehensweise vorschlagen.
      Die ganzen Größen werden ja über CSS Code definiert. Du müsstest jetzt nur rausfinden, wie die CSS Klasse heißt, die bei der „mobilen Ansicht“ verwendet wird und dann könntest du für diese Klasse (ähnlich wie bei der Desktop-Ansicht) einen angepassten CSS Code unter „Customizer“ – „CSS bearbeiten“ einfügen.
      Dazu würde ich so vorgehen:
      – z.B. für den Firefox-Browser mir ein Plugin suchen, welches erlaubt den Browser-Agent umzustellen und dort einstellen, dass du die Ansicht von einem Handy haben möchtest. Dann solltest du auch auf deinem Desktop die „mobile Ansicht“ deiner Webseite sehen.
      – Dann dort mit der rechten Maustaste das Kontextmenü aufrufen und „Inspect Element“ aufrufen.
      – dann das Element aufrufen (das kleine Logo) und man bekommt den CSS Code angezeigt, der jetzt dafür verwendet wird.
      – und diesen könnte man anpassen und dann bei „CSS bearbeiten“ einfügen. (Alles was da eingefügt wird, „überschreibt“ ja die „Grundwerte“ und bleibt auch nach einem Theme-Update bestehen.
      So würde ich mal vorgehen. 😉
      Servus Markus

  4. Guten Morgen, ich habe genau das Theme, jedoch verändert sich das Logo nicht, wenn ich das CSS reinkopiere. Was mache ich falsch? Möchte das Logo sehr gerne vergrößern…
    Vielen Dank und viele Grüße
    Stevan

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.