For an explanation of the code, please visit the 2.1 tutorial. It follows exactly the same process, but the template bit code is different.
Copy/paste this code to the end of your stylesheet.
/* Left and right images */.left{padding:0;margin:0;background: url(<#IMG_DIR#>/cat_left.gif) 0 0 no-repeat;height:31px;}.right{padding:0;margin:0;background: url(<#IMG_DIR#>/cat_right.gif) 100% 0 no-repeat;height:31px;}/* Main title text class */.main_text{color: #FFF;font-size: 12px;font-weight: bold;margin: 0px;padding:8px;background:transparent;border:0;}/* Our new maintitle classes */.maintitle_3,.maintitlecollapse_3{background: url(<#IMG_DIR#>/tile_cat.gif);color: #FFF;font-size: 12px;font-weight: bold;margin: 0px;}.maintitle_3 p.expand,.maintitle_3 p.goto,.maintitlecollapse_3 p.expand{float: right;width: auto !important;}.maintitle_3 a:link,.maintitle_3 a:visited,.maintitlecollapse_3 a:link,.maintitlecollapse_3 a:visited{background: transparent;color: #FFF;text-decoration: none;}.maintitle_3 a:hover,.maintitle_3 a:active,.maintitlecollapse_3 a:hover,.maintitlecollapse_3 a:active{background: transparent;color: #F1F1F1;}.maintitle_3 p,.maintitlecollapse_3 p{margin:0;padding:0;background:transparent;border:0;}.maintitle_3 td {color: #FFF;font-size: 12px;font-weight: bold;}Then, Edit Template HTML > Board Index > CatHeader_Expanded. Replace that code with the following:
<div style="border: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="java script:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>
<p><a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a></p>
</div></div></div></div>
</div>
<div 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="java script:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></p>
<p><a href="{$this->ipsclass->base_url}showforum={$data['id']}">{$data['name']}</a></p>
</div></div></div></div><div class='borderwrap'>
<table class='ipbtable' cellspacing="0">
<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>Note: Due to a bug in IPB, the word 'javascript' has automatically been changed to 'java script', notice the space inbetween the words. When you paste this code into your template bit, please change all instances of 'java script' into 'javascript'Save that, then edit Board Index > end_this_cat. Replace that code with the following
<tr> <td class="catend" colspan="5"></td> </tr> </table> </div> </div> <br />To edit the other sections of the forum, replace:
<div class='borderwrap'><div class='maintitle'>With:
<div class='maintitle_3'><div class='left'><div class='right'><div class='main_text'>Then, after the maintitle text, remove the </div> from the default, and replace it with:
</div></div></div></div><div class='borderwrap'>
TAH DAH!
