Welcome to BuddyDress

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.