Custom header tutorial: Adding an image and changing the size
Many themes have the in-built ability to upload your own custom header. In this tutorial we are going to go through how to add your own, customise the header to make it taller and change your text colour. For this tutorial we are using the Default BuddyPress 1.2 theme.
Tutorial video:
You can download or view online the video here and also check out our tutorial video album here.
Tutorial:
Adding a custom header
1. Upload the image
Go to Appearance and then Custom Header. Once you are there you will notice it says ‘Images of exactly 1250 x 125 pixels will be used as-is’. If you have a larger image you will have to crop it to pick the area you are going to use or it will repeat if smaller. Lets select browse and then your image and then the Upload button.
2. Crop the image
Now you will be face with a screen that if you’re image is larger than that size is for cropping the image. Select the area you want for your image then save the image.
3. Voila a header
Then you can refresh the front and you’re custom header is now done.
4. Change the text colour
If you want to change your text colour you simply go back to the Custom header screen and you will notice several buttons under the header. Here you can hide the text to not have a header text, select a text colour, use the original colour and save changes. Clicking select a text colour brings up a colour picker where you can select the colour then save the changes. If you want to do further customisation of the header text you will need to enter the CSS files.
Changing the header size
Lets expand the concept a little now. One of the key areas you may want to do is to change the height of your header.
1. Edit functions.php
In functions.php you want to go to line 150:
define( 'HEADER_IMAGE_HEIGHT', 125 );
In this demonstration we’re changing it to be 300 pixels in height:
define( 'HEADER_IMAGE_HEIGHT', 300 );
Remember to save your file once you’ve done the change.
2. Edit default.css
Under _inc/css/ we’re going to open up default.css and find line 67:
#header {
position: relative;
color: #fff;
background: url( ../images/default_header.jpg);
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
margin-bottom: 20px;
height: 100px;
padding-top: 25px;
}
We now want to pay attention to line 76:
height: 100px;
We are going to have our new header as 300 pixels in height and if you notice we have a line of:
padding-top: 25px;
So, what we want to do is take 25px from 300px to get 275px and then line 76 becomes:
height: 275px;
Save your file and then we can move onto uploading a new image.
3. Upload your new header image
Now we want to check that the new height is showing under the Custom Header section if it is we then want to go into the browse section and get a new file to upload. We then want to crop and save this image. Hitting refresh you will see on the front we now have a new header image set up with a new size. You will probably want to adjust other things in the header once you change the size but this is the basic set up for changing the header size.
Tip: Remove custom headers in your child theme
If you want to remove the ability to have custom headers in your child theme you simply add the following line in functions.php for your child or parent theme:
define( 'BP_DTHEME_DISABLE_CUSTOM_HEADER', true );
Tip: Want to have a repeating image?
To get a repeating image just upload an image that is not the full size and it should repeat – depending on the theme you may have to adjust the css or functions.php call for css relating to the custom header.
Custom headers are a great way to personalise your theme
There you have it, you can now upload a custom header image and even change the size of the header for the image. There are some great resources you may want to check out when looking for header images here are just a few:
- Stripe generator
- Creatr web 2.0 background
- Free images.co.uk
- Istock Photo – not free but inexpensive vector images and photographs
- stock.xchng free images
- Bg Patterns: pattern generator
- Kollermedia.at range of backgrounds
- Web design ledger: 100 seamless patterns
We hope you enjoyed this tutorial. If you wish to see anything as a tutorial on buddydress just comment below or you can ask via the contact form.
Your tutorial is missing just a minor detail, if you make the header bigger you also need to adapt the margin of the navigation moving it back to the bottom of the banner.
look for #nav in the default.css and edit the margin.
My header is 225 high, and I edited my nav like this:
#nav {
margin: 155px 20px 0px 0px;
list-style: none outside none;
padding: 0px;
float: left;
}
Originally its margin 40px 20px 0 px 0px; and float: right;
But for my design this fitted better.
Hope this will help others :)
[...] the information here with code and [...]
Great tutorial!
I have a situation though…
I removed the text that appears there, and i want the header to become my new link and to act as a “home button”. How can i do that?
Thank you for this tutorial. It’s important to be able to tweak and customize the appearance of your WordPress blog so you can connect with readers in a fun and emotional way -turning them into loyal readers who will keep coming back!
hi,
I am really having a hard time finding this functions.php file. I also want to change the background to an image and change the word ‘Groups’ to ‘Unas’. Can you help?
@Mark: The bp-colours are just child themes so you can use the default theme just like in the tutorial. As child themes just copy the functions.php contents and then make your changes as per the tutorial and any css place in the child’s css and everything should be set.
How do you edit the header size in the bp colours theme you released.? I can’t find the files you’re suggesting.
Thanks
[...] in the customisation series over at BuddyDress was released today and takes you through how to ‘add a custom header image and resize the header’ of the Default BuddyPress 1.2 [...]