Some themes like Eleven40 by StudioPress include a custom header image which is built into the theme (hard coded).
It includes images for the header as well as CSS code so its not that easy to change by replacing the header image with a another image the same size.
When you add your text title its displayed inside the header image which is something you may want to change.
If you want to add your own custom header image, using any width or height, this tutorial is for you.
This is what the header will look like after it is removed:
We’ll even go one step further and remove the black background from the header wrap area so your header is totally white.
Remove CSS Code for Header
Open up your child themes style.css file and search for the CSS code in the header section of the file.
Remove all the code which looks like this:
/* Header
------------------------------------------------------------ */
#title {
background: url(images/logo-texture.png);
border-top: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: inline-block;
font-family: 'Oswald', arial, serif;
font-size: 30px;
line-height: 1;
min-height: 33px;
margin: 0;
padding: 18px 25px 17px;
position: relative;
text-shadow: 0 1px #96430d;
}
#title:before {
background: url(images/logo-vert-left.png) repeat-y;
content: "";
display: block;
height: 66px;
left: 0px;
position: absolute;
top: 0px;
width: 7px;
}
#title:after {
background: url(images/logo-vert-right.png) repeat-y;
content: "";
display: block;
height: 66px;
position: absolute;
right: 0px;
top: 0px;
width: 7px;
}Now that you have removed the default header, you may want to add your own custom header.
You can do this several ways. Here’s 2 of them:
- Add support for a custom header using PHP code
- Add a custom header image using CSS code.
Add Custom Header Using CSS Code
Simply upload your header image, grab the full url and insert it into this code below before you paste it at the end of your child themes style.css file.
Change the values for the width and height based on your own needs.
#header {
max-width: 1140px;
margin: 0 auto;
width: 100%;
height: 200px;
background: url("replace-wth-full-image-url") no-repeat scroll 0 0 transparent;
}Remove Header Background Image
You can also remove the black background image from the header wrap by modifying this code also.
Inspect the background element using Firebug and copy the code to your child themes style.css file.
Or find the code in your child themes style.css file under the Wrap section and change it.
You can add the new rule at the end of the file with the new declaration.
/* Wrap
------------------------------------------------------------ */
#wrap {
background: url(images/bg.png) repeat-x;
}Change the code to something like this if you want a totally white background:
/* Wrap
------------------------------------------------------------ */
#wrap {
background: #fff;
}You could change the background image if you wanted but make sure not to completely remove this code or will will cause problems with other elements on your site.
Remove Header Completely
You can remove your header image entirely from your site or on specific pages only.
The only problem with using this method is that you also remove the header right widget area and other elements which you may be better off keeping.
Displaying Different Header Images & Sizes On Specific Pages
1. You can add a custom header image on your home page and use another on the rest of your site even its its a different height or
2. You can display custom header images on your category archive pages which are different to the rest of your website.
Now that you’ve got this far, you should be fairly familiar with the CSS code which is used to display and style your header images so you can add or style your custom header images without any major problems.
Leave a Reply
You must be logged in to post a comment.