[resources.invisionpower.com - pliki] Skinning > 3 IMG Catagory Header Using DIV's IPB3.0

[DawPi]

Tutorial by Tom Christian of Skinground.com

This was created for RC1. I will update it if needed as more versions of IPB are released!

If you find any problems with this tutorial please post in the thread on Skinground http://www.skinground.com/community/index.php?showtopic=349

This tutorial will be showing how to transform the IP.Board 3.0's catagory headers into 3 seperate images. This gives designers the oppertunity to experiment with much more advanced & stylish headers, rather than one simple image repeating on itself. Some examples of some of the things that can be created using this technique can be seen below:

We will be using four simple DIVs, some new CSS classes and a few original CSS tweaks to complete this objective. There maybe easier ways of doing this but this is the easiest way I've found since using IPB3. I'm presuming that you have already created your three images. However for the sake of the tutorial - I've supplied the 3 images which I've used.

(Right Click and save these to your desktop. Then upload to your skin path.

cat_left.gif

cat_bg.gif

cat_right.gif

Stage 1 - Adding the CSS

Navigate to - IPB3 ACP > Look & Feel > Skin DropDown arrow > Manage Templates & CSS > CSS Tab > ipb_styles.css

Add the Following Anywhere to the CSS document. I added mine after the chunk of RESET css codes.

.cat_left{

padding:0;

margin:0;

background: url({style_images_url}/cat_left.gif) 0 0 no-repeat;

height:46px;

}

.cat_right{

padding:0;

margin:0;

background: url({style_images_url}/cat_right.gif) 100% 0 no-repeat;

height:46px;

}

.cat_bg {

background: url({style_images_url}/cat_bg.gif);

margin: 0px;

height: 46px;

}

body .cat_bg a {

color: #fff;

font-family: tahoma, arial;

font-size: 14px;

padding-left: 10px;

}

.cat_text{

margin: 0px;

padding:9px;

background:transparent;

border:0;

}

You must ensure that your own images have the same names and image extension path as the ones stated in the CSS. You must also ensure that the height is set correctly. The paddings and font colours / sizes are just for show here so you must play around with them in order to fit your own template.

Stage 2 - Adding the DIVs to the Template

Navigate to - IPB3 ACP > Look & Feel > Skin DropDown arrow > Manage Templates & CSS > Board Index > boardIndexTemplate

Scroll down until you find:

<!-- CATS AND FORUMS -->

Scroll down a few more lines. Exactly on Line 39 which has

<div class='category_block block_wrap'>

Below this, Add:

<div class="cat_bg"><div class="cat_left"><div class="cat_right"><div class="cat_text">

This stage is extremely important. If not done correctly then you will damage the layout. On line 41, It starts off as:

<h3 id='category_{$_data['cat_data']['id']}' class='maintitle'>

We need to remove class='maintitle'

The start of that line should now look like

<h3 id='category_{$_data['cat_data']['id']}'>

Now for the final part of the template edits. On the same line (41) scroll to the very far right. You should see:

</a></h3>

Add next to this:

</div></div></div></div>

Stage 3 - Final Tweaks

We've now pratically finished, however you may notice that there is still an odd bar that stretches across the catagory header when you expand / collapse. To fix this, you must

Navigate to - IPB3 ACP > Look &amp;amp; Feel > Skin DropDown arrow > Manage Templates &amp;amp; CSS > CSS Tab > ipb_styles.css

You may want to copy &amp;amp; paste this into notepad in order to use the search function, then copy &amp;amp; paste it back into IPB once you've made the edit. This saves a bit of time .

Search for:

.category_block h3.collapsed {

It is roughly 3/4 the way down the style sheet.

The entire class looks like:

.category_block h3.collapsed {

border-bottom: 8px solid #b6c7db;

}

We want to remove the border so the final result should look like

.category_block h3.collapsed {

border-bottom: 0px solid #b6c7db;

}

Stage 4 - Admire.

You've now successfully added a 3 Image catagory header to your skin! This was tested in Firefox 3, IE7, Safari, Opera, Chrome. It should work in most browsers

My end result looks like this -

Thanks for reading,

Tom Christian

Skinground.com &amp;amp; Transversestyles.com Wyświetl pełny artykuł