In this tutorial, i’ll show you how to fix any problems you may experience with the Outreach themes header image.
If you find the default header image in this theme becomes cut-off, this tutorial will help you fix the problem.
Note: This solution relates to the old Outreach theme running XHTML markup and not the new Outreach Pro theme running HTML 5 markup.
You can see in the image above there’s a grey area on the far right.
What you can do to fix this is simply change the CSS code for the header on Line 184 from repeat-y to repeat-x.
Here’s the code you should copy and paste at the end of your child themes style.css file before making the changes:
#header {
background: #090909 url(images/header.png) center repeat-x;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}Now clear your browser cache and reload the page. The problem remains.
All you need to do now is remove the PHP code from your child themes functions.php which adds support for a custom header.
Here’s the code which needs to be removed.
/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
'width' => 1060,
'height' => 120
) );Now refresh your page and you’ll find the problem has been solved.
But wait! The site title text has gone and i can’t display the sites description either.
To fix this, simply go to Genesis > Theme Settings > Header and select to show text from the small dropdown menu in this section of the settings. These settings do not display if the above PHP code for adding a Custom Header remained in the file, but it does now after we’ve removed that code.
So the site title now displays using the text you’ve added in the General Settings but the site description doesn’t even though you have added it also.
To fix this simply remove the code from Line 212 in your child themes style.css file. Here it is:
#description {
display: none;
}Another option is to remove that code and paste it at the end of your file changing the display: none; decalration to color: white; like this:
#description {
color: white;
}Here’s what it looks like now:
But what about changing the header image to another? You can do this simply by removing the default header.png file in your child themes image folder and replacing it with another exactly the same size. Make sure you use the same file name and file extension.
This is what you get:
The header is centered but you can see the background color on the left and right side of the image. This won’t be the case if you have changes the repeat-y to repeat-x as mentioned earlier:
How about using a different sized header? You can do this also by uploading it to your images folder as well. In this example, the new header is 1200px width by 250px height and here’s what it looks like:
The width is perfect but its cut off and only displaying 120px height rather than the true size which is 250px.
To fix this simple change the height value in your child themes style.css file from 120px to 250px on Line 226.
.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 250px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;
}There’s no need to change the height value on Line 186 even though it remains at 120px.
Here’s the new header displaying 250px in height:
You’ll also find the header right widget works regardless of the header height.
But how about adding a logo which is only partially the width of the header? You can also upload your logo image to the images folder and this is what you get:
This result also assumes you’ve changed the repeat-x back to repeat-y in the CSS code on Line 184 otherwise you partial width image will repeat across the entire width of your header.
How about moving the logo image to the left rather than the center and also changing the background color?
To move the logo to the left simply change the value on Line 184 from centre to left:
#header {
background: #090909 url(images/header.png) left repeat-y;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}And here is what you get:
You can also change the code on Line 185 from margin: 0 auto; to margin-left: 145px; which will bring your logo in line with your nav menu. On top of this, the same code controls the background color for partial width images which is set as #090909 by default which you can also change.
If you add margin-left to the logo in the above code, you will also need to change the values for the header right widget as well if using it.
If you’ve recently installed the Outreach theme, i hope this helped solving any header problems.
Leave a Reply
You must be logged in to post a comment.