Logo Bereich Twenty Sixteen verändern - Bilddatei per CSS verklinkbar?

angus-old

Hallo zusammen,

ich würde gerne das Logo auf meiner neuen Seite vergrößern. Dafür habe ich auch schon die nötigen CSS Anpassungen vorgenommen:

CSS

.custom-logo-link img {  
   position: absolute;
   top: 0px !important;
   left: 0px !important;
   height: 135px !important;
   max-height: 135px !important;
   width: 450px !important;
   z-index: 4;
}




.navigation-top {
   z-index: 2;
}

Alles anzeigen

Mein Problem besteht jetzt darin, dass ich gerne die Verlinkung des Logos ebenfalls mittels CSS ermöglichen möchte.
Leider weiß ich nicht, wo genau ich den scr="LINK" hier einbringen kann.
Wenn ich über den Customizer das Logo auswähle, öffnet sich immer der Dialog "Bild Zuschneiden" (den ich nicht überspringen kann) - und
das Bild wird dann immer auf eine Breite von 240px zugeschnitten. Somit bringt mir die oben aufgeführte CSS Änderung leider nichts :neutral:

Welche Lösungsmöglichkeiten habe ich jetzt?

Weitere Infos: WP 4.8.1, Child Theme mit Child Theme Configurator angelegt, Simple CSS installiert, Seite: http://noisecon.de/wordpress/

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Das wird nicht gehen - mit CSS kannst du nur Hintergrundbilder 'verlinken'. Ein HTML Element einfügen (wie das Logo) kannst du auch nur mit dem <img ...> Tag.
Ich würde dir auch abraten, dieses Logo mit position: absolute; zu positionieren, denn damit ist das Bild aus dem Textfluss raus und wird dir bei bei kleineren Displays (zB Handy) gnadenlos den Rest des Headers abdecken.
Ich könnte mir aber eine Lösung vorstellen, indem du das Bild ... ohne die Funktion des Customizers zu nutzen ... in den Header einfügst. Wie sieht denn deine header.php aus?

angus-old

Vielen Dank schon einmal für die Hinweise.

Die Header.php hab ich nicht geändert. Wenn ich ein Child Theme mittels dem Child Theme Configurator angelegt habe, wo finde ich dann die PHP Datei?
Leider habe ich mit php nicht so viel Erfahrung. Lediglich in CSS habe ich mich etwas eingearbeitet....

Sailor56

Da ich weder dein Theme, noch den von dir verwendeten Child Theme Configurator kenne, muss ich jetzt einfach einige Vermutungen anstellen.
Auf jeden Fall solltest du eine header.php im Themen Ordner des Originals (parent) finden und auch vielleicht, je nachdem wie dieser Configurator arbeitet auch im Themen Ordner des Child Themes finden.
Einfacher vielleicht, wenn du mal im Dashboard unter Design / Editor schaust, ob in der Auflistung auf der rechten Seite irgendwas von 'header.php' zu finden ist?

angus-old

Hallo - ich habe jetzt die header.php Datei (man kann über das besagte Plugin einfach Dateien für das Childtheme automatisch anlegen lassen;)
Hier der Code:

PHP

<?php/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */




?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>
	<?php wp_head(); ?>
</head>




<body <?php body_class(); ?>>
<div id="page" class="site">
	<div class="site-inner">
		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a>




		<header id="masthead" class="site-header" role="banner">
			<div class="site-header-main">
				<div class="site-branding">
					<?php twentysixteen_the_custom_logo(); ?>




					<?php if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
					<?php endif;




					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif; ?>
				</div><!-- .site-branding -->




				<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
					<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>




					<div id="site-header-menu" class="site-header-menu">
						<?php if ( has_nav_menu( 'primary' ) ) : ?>
							<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'primary',
										'menu_class'     => 'primary-menu',
									 ) );
								?>
							</nav><!-- .main-navigation -->
						<?php endif; ?>




						<?php if ( has_nav_menu( 'social' ) ) : ?>
							<nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'social',
										'menu_class'     => 'social-links-menu',
										'depth'          => 1,
										'link_before'    => '<span class="screen-reader-text">',
										'link_after'     => '</span>',
									) );
								?>
							</nav><!-- .social-navigation -->
						<?php endif; ?>
					</div><!-- .site-header-menu -->
				<?php endif; ?>
			</div><!-- .site-header-main -->




			<?php if ( get_header_image() ) : ?>
				<?php
					/**
					 * Filter the default twentysixteen custom header sizes attribute.
					 *
					 * @since Twenty Sixteen 1.0
					 *
					 * @param string $custom_header_sizes sizes attribute
					 * for Custom Header. Default '(max-width: 709px) 85vw,
					 * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.
					 */
					$custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
				?>
				<div class="header-image">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
						<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
					</a>
				</div><!-- .header-image -->
			<?php endif; // End header image check. ?>
		</header><!-- .site-header -->




		<div id="content" class="site-content">

Alles anzeigen

angus-old

Hallo,

leider wurde nicht mehr geantwortet :(
Ich habe mittlerweile eine Teillösung selbst gefunden:
Nachdem ich ein bestimmtes Logo über den Customizer ausgewählt und zugeschnitten habe (danach passen die Formate des Originals Logo nicht mehr) habe
ich einfach über den FTP Zugang das zugeschnitte Logo durch das originale Logo ersetzt. Im CSS Code musste ich aber noch ein min-width angeben. Jetzt passt die Logo Größe soweit.
Etwas umständlich aber in Ordnung.

Hier der CSS Code (falls es jmd. interessiert):

CSS

.custom-logo-link img { 
  
   top: 0px !important;
   left: 0px !important;
   height: 142px !important;
   max-height: 150px !important;
   width: 400px !important;
   max-width: 450px !important;
   z-index: 4;
}

Jetzt hätte ich noch folgende Anfrage. Kann man für die Mobile Sichtweise eine zweite Logo Datei verwenden oder zumindest die Größe des bestehenden automatisch verringern lassen,
sodass ich bei kleinen Bildschrimen auch den kleineren Bereich gut ausnutzen kann. Bei der jetztigen Variante passt das Logo gut auf PC/Laptop Bildschirmen und auch auf Tablets,
aber in der mobilen Version ist das Logo zu groß und wird nur zur hälfte im Sichtbaren Bereich angezeigt.

Sailor56

Lösche die 'height' und 'max-height' Angaben und setze für 'max-width' einen Wert von 100%.
Die Höhe des Bildes wird vom Browser 'automatisch' eingestellt und bleibt proportional zu der vorgegebenen Breite.
Wenn der Anzeigebereich kleiner als 400px wird, dann greift die 'max-width' Angabe und macht das Bild bei 100% immer so breit, wie eben Platz ist.

angus-old

Vielen Dank Sailor56 für deine Antwort.
Du hast mich auf die richtige Spur gebracht - Aber ich muss bei max-width anscheinend einen fixen Wert eingeben (450px) und bei width 100%. Bei
deiner Variante ist der Bereich wieder auf die voreingestellten 220px geschrumpft, die er dann eben zu 100% ausfüllt. Vermutlich liegt das daran, dass in der
header.php noch der voreingestellte Wert nicht geändert ist von twenty-sixteen.

Mit diesem Code passt er es auf kleinere Geräte an und ist bei Vollbildschirmen eben 450px breit (so wie ich es wollte;)

CSS

.custom-logo-link img {  
   top: 0px !important;
   left: 0px !important;
   width: 100% !important;
   max-width: 450px !important;
   z-index: 4;
}

Sailor56

:).. wenn es klappt, ist das super. Welchen Browser nutzt du? InternetExplorer? Hatte das kurz mit dem FireFox getestet, kann durchaus sein, dass es da zwischen den Browsern einen Unterschied gibt!

angus-old

Es funktioniert mit Firefox, Safari und Chrome - sowohl mit der jeweiligen Desktopversion, als auch mit der Mobilen Version der Browser...
Internet Explorer habe ich noch nicht getestet...

angus-old

Kleiner Nachtrag noch:
Für alle, die das Plugin Jetpack nutzen. Aktiviert man hier die Cache Funktion für schnelles Bilderladen, dann wird automatisch das Logo auf die noch
im Theme vorgefertigte 240px Breite reduziert - und das Logo trotz der Einstellungen im CSS dann auf diese Größe gebracht. Möchte man
also diese Schnelladefunktion von Jetpack nutzen, dann funtktioniert der hier gewählte Ansatz nicht.

Rein aus Interesse - wie müsste ich die Header.php ändern, so dass die Breite von 240px erhöht wird (das dürfte evt. für andere Forumsmitglieder
auch interessant sein)...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Logo Bereich Twenty Sixteen verändern - Bilddatei per CSS verklinkbar?

Jetzt mitmachen!

Benutzer online in diesem Thema