[TUT]2.x.x Header Skinning Guide

[Lease]

This guide will show you how to make alterations to your forum's header. We will look at changing the logo, resizing the header to make it fit your logo and altering the default gradient blue header background. The screenshots in this guide have been taken using IPB 2.2 in which the visual apperence of the Admin CP differs slightly from previous versions but the steps and layout of the Admin CP are exactly the same. The tutorial applies to any version of the IPB 2 series.

Contents

1. Changing the default logo
   1. Uploading your logo
   2. Resizing the header to fit your logo
   3. Centering the logo
2. Changing the gradient blue background
   1. Plain colour backgrounds
   2. Gradient backgrounds
3. Resources

1. Changing the default logo

1.1 Uploading your logo

Invision Power Board (IPB) 2 has a useful tool which allows you to upload a logo without having to use an FTP client to transfer files to the server your IPB is installed on. Make sure you have saved your logo in JPEG, GIF or PNG format. Bitmap (BMP) can be used but the file sizes are very large and any image editor these days will almost certainly be able to save in at least one of the three previous formats. Login to your Admin CP and click through the following links:

Admin CP -> Look & Feel -> Skins & Templates -> Easy Logo Changer

There are three possible options on this screen. The first, Apply to which skin set? allows you to alter the logo in one of your skin sets. IPB allows you to have more than one style or 'skin' for your forum. The default skin is called IPB Default Skin and this is automatically selected for us in the dropdown.

If your logo is already uploaded and you wanted to specify it's location then you could enter the address to the URL in the URL to new logo text input. It is more likely that you want to upload your new logo so the last option is the one we will use, OR upload a new logo.

Click the Choose button, find your logo and open it. This will insert the file into the text field. Press the Complete Edit button to upload your logo. Once the confirmation screen has been shown, go to your forum homepage to see the new logo. If it looks too big or too small, it probably will, read the next section.

1.2 Resizing the header to fit your logo

Your new logo might look out of place because the size of the background is wrong for the new logo.

To make the background the same height as the logo, you first need to find the height of the logo. In your browser, right click on your new logo and click on Properties, Image Properties or an option similar to those. Exact wording depends on your browser. This will open some sort of properties panel, you need to find the height of your image. In Internet Explorer you will see something like this:

Where dimensions are listed as ZZZ x YYY, the number in place of the Y value is the height of the image. In the screenshot above, the height of the logo is 124 pixels high. Remember this figure, you will use it in a minute. Go to back to your Admin CP and navigate through these links:

Admin CP -> Look & Feel -> The default view for this tab is the skin manager -> Click the button to the right of IPB Default Skin -> Edit Stylesheet (CSS Advanced Mode)

In the text area, find the following text. A hanfy trick is to use your browser's find function to locate it. Press Ctrl + F (or Edit -> Find) and type #logostrip into the search box. Press find and most browsers will take you straight to that section:

#logostrip{ 
    background: #3860BB url(style_images/1/tile_back.gif);
    border: 1px solid #FFF;
    height: 68px;
    margin: 0;
    padding: 0;
}

Edit the height value of 68 and change it to the value you found before. In my example, I change it to 124:

#logostrip{ 
    background: #3860BB url(style_images/1/tile_back.gif);
    border: 1px solid #FFF;
    height: 124px;
    margin: 0;
    padding: 0;
}

The header will now look a little unsightly because the gradient background image has been doubled up as it's smaller than the height of the logo. If you want to change this, skip to section 2.

1.3 Centering the logo

A centred logo can look good once you've created a background to match your logo (see section 2). Here's how to do it.

Click through the following links to loads the CSS editor again:

Admin CP -> Look & Feel -> The default view for this tab is the skin manager -> Click the button to the right of IPB Default Skin -> Edit Stylesheet (CSS Advanced Mode)

Find the #logostrip section as before:

#logostrip{ 
    background: #3860BB url(style_images/1/tile_back.gif);
    border: 1px solid #FFF;
    height: 68px;
    margin: 0;
    padding: 0;
}

This time you need to add a property. Add a line break after padding: 0; and insert text-align: center; so the finished edit looks something like this:

#logostrip{ 
    background: #3860BB url(style_images/1/tile_back.gif);
    border: 1px solid #FFF;
    height: 68px;
    margin: 0;
    padding: 0;
    text-align: center;
}

Save your changes by pressing Save Stylesheet and go to your board homepage to view the changes.

2. Changing the gradient blue background

2.1 Plain colour backgrounds

If you want a flat colour backgound, this section is for you. If you want a background image (a gradient for example), skip ahead to section 2.2.

You need to decided on a colour for your background, and you need the hexadecimal value for your colour. This sounds complicated but any half decent image editor will have the ability to display a colour's hexadecimal value. If you don't have an image editor, you might find this colour chart useful. It shows the hexidecimal values of the colours. In Photoshop I've chosen a red colour that matches my logo, and the hexidecimal value shown is #883325. Make a note of this value.

Open the CSS editor just as in section 1.2.

Admin CP -> Look & Feel -> The default view for this tab is the skin manager -> Click the button to the right of IPB Default Skin -> Edit Stylesheet (CSS Advanced Mode)

Again, just as in 1.2, find the CSS section for #logostrip:

#logostrip{ 
    background: #3860BB url(style_images/1/tile_back.gif);
    border: 1px solid #FFF;
    height: 124px;
    margin: 0;
    padding: 0;
}

Now we have to make two edits. After background: change the hexidecimal value to that of your chosen colour, and delete the text url(style_images/1/tile_back.gif) so your CSS entry now looks something like this:

#logostrip{ 
    background: #883325;
    border: 1px solid #FFF;
    height: 124px;
    margin: 0;
    padding: 0;
}

It is very important that you have a semi-colon after the hexidecimal value or your changes will not display correctly. Once you've checked it over save your changes by pressing Save Stylesheet and go to your board homepage to view the changes. I think you'll agree things are looking pretty smart now:

2.2 Gradient backgrounds

Gradient backgrounds are slightly more complex. My new logo has a gradient background and I want the graident to continue across the board header like the degfault blue background. The background is actually a 1 pixel wide sample of the gradient with the height the same as that of the logo. The 1px sample is then tiled by the browser across the header. The first thing you need to do then, is take a one pixel sample in your image editor:


Save this 1 pixel wide image as newlogotile.gif (it can also be a JPEG or PNG as discussed earlier). There is no way to upload a header background through your Admin CP, so instead you must use an FTP client. I'm going to assume you know how to use an FTP client, if not there are plenty of guides around (infact I might write one later). Navigate to the folder where IPB is installed (it will have conf_global.php and index.php amongst other things in it). Drill down to /style_images/1/ and upload your new background into this folder.

When the upload has finished you need to edit the CSS again. Open the CSS editor just as in section 1.2.

Admin CP -> Look & Feel -> The default view for this tab is the skin manager -> Click the button to the right of IPB Default Skin -> Edit Stylesheet (CSS Advanced Mode)

Again, just as in 1.2, find the CSS section for #logostrip:

#logostrip{ 
    background: #3860BB url(style_images/1/tile_back.gif);
    border: 1px solid #FFF;
    height: 124px;
    margin: 0;
    padding: 0;
}

In the line which starts with background you need to change the name of the file in the url() section your new background image. It's easier to simply show you how it should look, so here you are:

Note: In versions prior to 2.2, 'styles_images/1' will be '<#IMG_DIR#>.' Don't change it to the newer path, just alter the filename.

#logostrip{ 
    background: #3860BB url(style_images/1/newlogotile.gif);
    border: 1px solid #FFF;
    height: 124px;
    margin: 0;
    padding: 0;
}

Once you've checked it over, save your changes by pressing Save Stylesheet and go to your board homepage to view the changes. Now you can view your finished header in your browser!

Lease Reviewed by Lease on 8th Jan 2008. [TUT]2.x.x Header Skinning Guide This guide will show you how to make alterations to your forum's header. We will look at changing the logo, resizing the header to make it fit your logo and altering the default gradient blue header background. The screenshots in this guide have been taken using IPB 2.2 in which the visual apperence of the Admin CP differs slightly from previous versions but the steps and layout of the Admin CP are exactly the same. The tutorial applies to any version of the IPB 2 series. Contents Changing Rating: 5