All StudioPress child themes are different yet many use the same functions and CSS code. The only difference in many of the themes when it relates to header images and site title area’s are the values.
When it comes to adding a logo or header image, you may need to modify the code to get it looking perfect.
In this tutorial, i’ll show you which code needs to be changed so your logo image and header right widget displays your images perfectly.
We’ll go from this simple text header:
To this:
The new logo size for this demo will be 420 width by 165px height replacing the default which was 320 x 65.
I’ll be using the new Eleven40 Pro theme for this tutorial as the previous version required a fair amount of code editing if you wanted to add your own logo or change the header image sizes.
The new version makes the job so much easier in line with with many other themes StudioPress have released.
There’s 6 small code blocks which need to be modified in your child themes files.
5 of these code blocks are CSS in your style.css file and the other is PHP in your functions.php file.
If you go to Appearance > Header in your WordPress dashboard, you’ll see these values for the custom header: 320 x 65 pixels.
To change these values, you’ll need to open your child themes functions.php file using a text editor like Notepad++.
Line 37 & 38 in your functions file:
Change the width and height values in this code from these:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 320,
'height' => 65,
'header-selector' => '.site-header .title-area',
'header-text' => false
) );To these values:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 420,
'height' => 165,
'header-selector' => '.site-header .title-area',
'header-text' => false
) );If you don’t and simply upload your 420 x 165 image, this is what you’ll get:
Your image will be cropped and not display the full size in your header.
Once you add an image to your header right widget using the maximum size of 800px for the width, this is what it will look like:
To fix this, you’ll also need to modify the values in your style.css file.
On line 872, change the height from 65px to 165px like this:
.site-header {
background: url(images/texture.png);
min-height: 65px;
position: fixed;
width: 100%;
z-index: 999;
}To this:
.site-header {
background: url(images/texture.png);
min-height: 165px;
position: fixed;
width: 100%;
z-index: 999;
}At this point, you could also change the background image for the header or remove it Fro the code and change it to a color like white.
Note: Do not remove the texture image from your images file as its used for styling other elements of your site
Here’s what your header image for your logo looks like now with an image in the header right widget area which is 800px width by default.
To fix this, change the values on line 887 for the width of the title area from this:
.title-area {
float: left;
width: 320px;
}To this:
.title-area {
float: left;
width: 420px;
}Now this won’t fix the problem completely until you reduce the width of the header right widget by 100px.
On line 957, change the width from this:
.site-header .widget-area {
color: #fff;
float: right;
text-align: right;
width: 800px;
}To this:
.site-header .widget-area {
color: #fff;
float: right;
text-align: right;
width: 700px;
}Now that doesn’t fix the problem completely either because the height for the header image in the site title is still using the old values and therefore cut off.
To fix this, go to line 945 and change the height value from this:
.header-image .site-title a {
float: left;
min-height: 65px;
width: 100%;
}To this:
.header-image .site-title a {
float: left;
min-height: 165px;
width: 100%;
}Now the full height of your new logo image will display inline with the new width for your header right widget image.
You could also now change the image in the header right widget so its the same height as your logo.
Bring Logo & Header Right Widget Image Inline
Once you add a new image size to your header right widget, you’ll find its not flush with the top of your logo:
To fix this, simply add some CSS for a margin to the block of code on line 940.
.header-image .title-area {
margin-top: 12px;
margin-top: 1.2rem;
}This is now what your header looks like which can be styled further without much effort.
Change Header Background Color
In the above 2 screenshots, i’ve changed the headers background.
To do this, simply remove the image url from line 871 and add a color instead to remove the black background and make it white.
.site-header {
background: white;
min-height: 165px;
position: fixed;
width: 100%;
z-index: 999;
}Don’t forget, once you change the header background color to white, your text color will need to change from white to a dark color otherwise it will be invisible.
Try adding something like this at the end of your style sheet:
.site-header .widget-area .genesis-nav-menu a {
color: #333;
}That’s it for today’s tutorial about how to change the images sizes for your logo in the site title area and your header right widget.
The method used in this post can be applied to many of the StudioPress themes.
Leave a Reply
You must be logged in to post a comment.