Rounded Category Header

This tutorial shows how to achieve rounded category header the same like show screens below:

Skin default:

Skin Pro:

To achieve this effect you need files. File tile_cat.gif you have because this image is used in standard category header. You only need images to round. Bellow I attach these files to default skin and pro skin. Save left file as cat_left.gif and right file as cat_right.gif.

Skin Pro:

Default skin:

Now we can prepare CSS

Go to ACP -> Look & Feel -> skin -> CSS Advanced

Paste below code:

/* 

* Zaokrąglone krawędzie by SpannerDEV.pl 

*

* http://www.SpannerDEV.pl

*/

.left{

padding:0;

margin:0;

background: url(<#IMG_DIR#>/CATALOG/cat_left.gif) 0 0 no-repeat;

height:31px;

}

.right{

padding:0;

margin:0;

background: url(<#IMG_DIR#>/CATALOG/cat_right.gif) 100% 0 no-repeat;

height:31px;

}

.main_text{

color: #FFF;

font-size: 12px;

font-weight: bold;

margin: 0px;

padding:8px;

background:transparent;

border:0;

}

.maintitle_3{

background: url(<#IMG_DIR#>/CATALOG/tile_cat.gif);

color: #FFF;

font-size: 12px;

font-weight: bold;

margin: 0px;

}

.maintitle_3 p.expand,

.maintitle_3 p.goto{

float: right;

width: auto !important;

}

.maintitle_3 a:link,

.maintitle_3 a:visited{

background: transparent;

color: #FFF;

text-decoration: none;

}

.maintitle_3 a:hover,

.maintitle_3 a:active{

background: transparent;

color: #F1F1F1;

}

.maintitle_3 p{

margin:0;

padding:0;

background:transparent;

border:0;

}

.maintitle_3 td {

color: #FFF;

font-size: 12px;

font-weight: bold;

}

Replace CATALOG to skin catalog name.

Save changes.

Go to: ACP -> Look & Feel -> skin -> Edit Template HTML -> Board Index and choose CatHeader_Expanded

Replace all to:

IPB 2.1.x

<div style="border:0;display:{$data['div_fc']}" id="fc_{$data['id']}">

<div class="maintitlecollapse_3">

<div class="left"><div class="right"><div class='main_text'>
<p class="expand"><a href="javascript:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>

<p><{CAT_IMG}>&nbsp;
<a href="{ipb.script_url}showforum={$data['id']}">{$data['name']}</a></p>

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

</div>

<div class="borderwrap" style="border:0;display:{$data['div_fo']}" id="fo_{$data['id']}">

<div class="maintitle_3"><div class="left"><div class="right"><div class='main_text'><p class="expand"><a href="javascript:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></p>

<p><{CAT_IMG}>&nbsp;
<a href="{ipb.script_url}showforum={$data['id']}">{$data['name']}</a></p>

</div></div></div></div><div class='borderwrap'>

<table class='ipbtable' cellspacing="1">

<tr>
<th colspan="2" width="66%">{ipb.lang['cat_name']}</th>

<th align="center" width="7%">{ipb.lang['topics']}</th>

<th align="center" width="7%">{ipb.lang['replies']}</th>

<th width="35%">{ipb.lang['last_post_info']}</th>

</tr> 

IPB 2.2.x i 2.3.x

<div style="border:0;padding:0;display:{$data['div_fc']}" id="fc_{$data['id']}">

<div class='maintitle_3'><div class='left'><div class='right'><div class='main_text'>

<p class="expand"><a href="javascript:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>

<p><{CAT_IMG}>&nbsp;
<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a></p>

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

<div class='borderwrap' style='border-top:0;'><div class='catend'> </div></div>

</div>

<div class="borderwrap" style="border:0;padding:0;display:{$data['div_fo']}" id="fo_{$data['id']}">

<div class='maintitle_3'><div class='left'><div class='right'><div class='main_text'>

<p class="expand"><a href="javascript:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></p>

<p><{CAT_IMG}>&nbsp;

<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a></p>

</div></div></div></div><div class='borderwrap'>

<table class='ipbtable' cellspacing="1">

<tr>

<th colspan="2" width="66%">{$this->ipsclass->lang['cat_name']}</th>

<th style='text-align:center' width="7%">{$this->ipsclass->lang['topics']}</th>

<th style='text-align:center' width="7%">{$this->ipsclass->lang['replies']}</th>

<th width="35%">{$this->ipsclass->lang['last_post_info']}</th>

</tr> 

Save changes.

Go to: ACP -> Look & Feel -> skin -> Edit Template HTML -> Board Index -> end_this_cat

Replace all to:

<tr>

<td class="catend" colspan="5"></td>

</tr>

</table>

</div>

</div>

<br /> 

Go to: ACP -> Look & Feel -> dany skin -> Edit Template HTML -> Board Index -> subheader

Find:

<script type="text/javascript" src="jscripts/ipb_forum.js"></script> 

Replace all below this code:

<div style="display:{$data['div_fc']}" id="fc_{$data['id']}">

<div class='maintitle_3'><div class='left'><div class='right'><div class='main_text'>

<p class="expand"><a href="javascript:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>

<p><{CAT_IMG}>&nbsp;<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']} {$this->ipsclass->lang['sub_forum_title']}</a></p>

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

<div class='borderwrap' style='border-top:0;'>

<div class='catend'> </div></div></div>

<div class="borderwrap" style="display:{$data['div_fo']}" id="fo_{$data['id']}">

<div class='maintitle_3'><div class='left'><div class='right'><div class='main_text'>

<p class="expand"><a href="javascript:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></p>

<p><{CAT_IMG}>&nbsp;<a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']} {$this->ipsclass->lang['sub_forum_title']}</a></p>

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

<div class='borderwrap'>

<table class='ipbtable' cellspacing="1">

<tr>

<th colspan="2" width="66%">{$this->ipsclass->lang['cat_name']}</th>

<th align="center" width="7%">{$this->ipsclass->lang['topics']}</th>

<th align="center" width="7%">{$this->ipsclass->lang['replies']}</th>

<th width="35%">{$this->ipsclass->lang['last_post_info']}</th>

</tr>

Save changes.

Article was written only for SpannerDEV.pl. It is prohibited to its reproduction, duplication, even in altered form without permission.