• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
Logo

CITROWEB Webdesign

Erste Wahl für Ihren Onlineauftritt

  • Home
  • Leistungen
    • Webdesign, Webentwicklung und Beratung
    • Online-Shops mit WooCommerce
    • Technische Unterstützung für WooCommerce-Shops
    • Suchmaschinenmarketing
      • SEO: Ihr Webauftritt erhält mehr relevante Besucher
      • SEA: Suchmaschinenwerbung für Ihren Webauftritt
    • Webhosting
  • Blog
  • Kontakt aufnehmen
Home » Blog » Unterstützung für Retina @2x version bei Header-Image-Logo im Genesis Framework

Unterstützung für Retina @2x version bei Header-Image-Logo im Genesis Framework

23. August 2022

Genesis nutzt das WordPress-Feature um ein Logo im Header zu setzen, anstatt des Titels und der Beschreibung. Allerdings wird die Bildgröße beim Logo auf die tatsächlichen Pixel festgelegt.

Um die doppelte Pixeldichte bei Retina (iPhone) zu unterstützen muss das Logobild die doppelte Pixelgröße haben. Über die CSS-Property background-size wird dann die normale width und height des Logos festgelegt.

Um das im Genesis-Framework umzusetzen gehst Du wie folgt vor:

  1. Standardfunktionalität überschreiben mit
add_theme_support( 'custom-header', array(
	'header_image' => '',
	'header-selector' => '.site-title a',
	'header-text' => false,
	'height' => 150,
	'width' => 500,
) );

Das lässt sich entweder über die functions.php (nur bei eigenem Theme welches man selbst weiterentwickelt!) oder z.B. über das Plugin My Custom Functions erweitern.

2. height und width aus dem Beispiel oben muss durch die zweifache Größe des eigentlichen Logos ersetzt werden. Also in diesem Beispiel hat das Logo die Abmessungen 250×75.

3. Im eigenen CSS ergänzen:

/* replace width and height with actual size, it means half the size you used above in theme support for custom-header */
.header-image .site-title > a {
    background-size: <width>px <height>px;
}

Danke an Anything graphic (https://anythinggraphic.net/override-header-image-logo-genesis-wordpress-retina-2x-version/)

Kategorie: Genesis-Framework, Mobile, WordPress

Haupt-Sidebar

  • How to remove dashicons in WordPress frontend?
  • How do I create a website (homepage) with ChatGPT?
  • Can I create a website (homepage) with ChatGPT?
  • iOS restrictions re: bringing up the keyboard on programmatic focus
  • iOS restrictions re: bringing up the keyboard on programmatic focus
  • Remove user listing from WP-JSON
  • Benutzerauflistung aus WP-JSON entfernen
  • What does „Video is not the main content of the page“ mean?
  • Was hat es mit „Das Video ist nicht der Hauptinhalt der Seite“ auf sich?
  • Remove WordPress logo from toolbar
  • Efficient onboarding simplified: LearnSuite – the cloud application for digital onboarding
  • Wir stellen vor: LearnSuite – Die Cloudanwendung für digitales Onboarding
  • Howto: How do I create a website (homepage) with ChatGPT?
  • Howto: Wie erstelle ich mit ChatGPT eine Website (Homepage)?
  • Can I create a website (homepage) with ChatGPT?
  • Kann ich mit ChatGPT eine Website (Homepage) erstellen?
  • Set noindex nofollow via .htaccess HTTP header
  • Über .htaccess X-Robots-Tag noindex nofollow setzen
  • How to remove WordPress Dashicons in frontend?
  • Wie lassen sich Dashicons im WordPress-Frontend entfernen?
  • DSGVO (3)
  • GDPR (3)
  • Genesis Framework (10)
  • Genesis-Framework (9)
  • Google Search Console (4)
  • Google Search Console (4)
  • Linux (3)
  • Linux (3)
  • mobile (3)
  • Mobile (3)
  • Network (1)
  • Netzwerk (1)
  • SEO (5)
  • SEO (5)
  • Trends (3)
  • Trends (4)
  • Uncategorized (3)
  • Web development (1)
  • Web hosting (1)
  • Webentwicklung (1)
  • Webhosting (1)
  • WooCommerce (9)
  • WooCommerce (9)
  • WordPress (23)
  • WordPress (24)

Footer

Logo




© 2026 CITROWEB
  • Datenschutz
  • Impressum