Zaokrąglona belka kategorii

Tutorial ten pokazuje, jak osiągnąć zaokrąglone belki kategorii takie jak na screenach poniżej:

Skin default:

Skin Pro:

Aby osiągnąć taki efekt potrzebne będą Ci odpowiednie pliki. Plik tile_cat.gif już masz, gdyż to jest plik odpowiedzialny za standardową belkę. Potrzebujesz jeszcze plików zaokrągleń. Poniżej zamieszczam takie pliki zarówno do skina domyślnego, jak i skina PRO. Zapisz pliki odpowiednio lewy jako cat_left.gif, natomiast prawy jako cat_right.gif.

Skin Pro:

Skin domyślny:

Teraz zabierzemy się za odpowiednie przygotowania:

Wejdź do ACP -> Look & Feel -> dany skin -> CSS Advanced

Wklej poniższy kod:

/* 

* Zaokrąglone krawędzie by SpannerDEV.pl 

*

* http://www.SpannerDEV.pl

*/

.left{

padding:0;

margin:0;

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

height:31px;

}

.right{

padding:0;

margin:0;

background: url(<#IMG_DIR#>/KATALOG/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#>/KATALOG/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;

}

Zamień KATALOG na nazwę katalogu swojego skina.

Zapisz zmiany.

Teraz zajmiemy się samym skinem. Przejdź do: ACP -> Look & Feel -> dany skin -> Edit Template HTML -> Board Index i wybierz CatHeader_Expanded

Zamień całość na:

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> 

Zapisz zmiany.

Następnie przejdź do: ACP -> Look & Feel -> dany skin -> Edit Template HTML -> Board Index -> end_this_cat

Zamień całą zawartość na:

<tr>

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

</tr>

</table>

</div>

</div>

<br /> 

Następnie przejdź do: ACP -> Look & Feel -> dany skin -> Edit Template HTML -> Board Index -> subheader

Znajdź:

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

Zamień wszystko, co jest poniżej na:

<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>

Zapisz zmiany. Od teraz powinieneś się cieszyć takim wyglądem jak przedstawiłem na początku artykułu.

Artykuł został napisany wyłącznie dla SpannerDEV.pl. Zabrania się jego kopiowania, powielania nawet w zmienionej formie bez zgody autora.