Genesis Custom Header – position override?

[PittsburghChris]

In a Genesis child theme, I can enable support for adding Custom Header images by adding this to my functions file:

add_theme_support( 'genesis-custom-header', array( 'width' => 1250, 'height' => 500 ) );

Then I can go into the Dashboard --> Appearance --> Header and upload an image. Genesis takes this image and adds it as a "background" to the .site-header class of the "header" HTML element.

However, in the Genesis core files:

genesis/lib/structure/header.php

the styling for .site-header is as follows:

//* Header image CSS, if exists
	if ( $header_image )
		$output .= sprintf( '%s { background: url(%s) no-repeat !important; }', $header_selector, esc_url( $header_image ) );

The !important declaration is preventing me from adding any additional styles to the .site-header's background. Specifically, I am trying to position the image in the center. I would like to have the code read:

.site-header {background:url(path/wp-content/uploads/2014/09/banner.jpg) no-repeat top center;}

I cannot find a way to override the !important declaration in order to position the element. I even tried to use a custom function redeclaring the $output, but it did not work since I guess the child theme loads before the Genesis header.php file.

I want to use the custom header support because I would like to provide the end-user with an option of adding their own image (using the dashboard) but I would like the image centered, not aligned to the left margin.

I suppose I will need to create a header widget and use something like the "Image Widget" plugin to get around this, but it seems like I should be able to get this done simply by using what is already built into the system.

Can anyone shed any light on this for me and help me understand? What am I missing? Thank you!

[Brad Dalton]

Change the width to match your header image.

---

Get Help – Book Consultation.

[Author]

Posts