Skocz do zawartości
Zaloguj się, aby obserwować  
Spanner

[Artykuł/Tutorial] Zaokrąglona belka kategorii

Polecane posty

Spanner    4219

Tytuł: Zaokrąglona belka kategorii

Opis:

Kategoria: Artykuły IP.Board

Data dodania: 01.03.08, 00:19

Autor: Spanner

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

Skin default:

1442npt.gif

Skin Pro:

m7f8ti.gif

Aby wykonać 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:

2148rag.gifamcaw5.gif

Skin domyślny:

2zokjzn.gifofna61.gif

Teraz zabierzemy się za odpowiednie przygotowania

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

/* 
* Zaokrąglone krawędzie by IPSBeyond.pl
*
* http://www.IPSBeyond.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;
}[/code] Zamień [b]KATALOG[/b] na nazwę katalogu swojego skina. Zapisz Ustawienia. Teraz zajmiemy się samym skinem. Przejdź do: [i]ACP -> Look & Feel -> dany skin -> Edit Template HTML -> Board Index i wybierz CatHeader_Expanded[/i] Zamień całość na: [b]IPB 2.1.x[/b]
[code]<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="java script: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="java script: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="java script: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="java script: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>[/code] [b] W obydwóch przypadkach po skopiowaniu u siebie kodu zamień java script na napis javascript ponieważ IPB przy wyświetlaniu standardowo rozdziela ten wyraz.[/b] Zapisz ustawienia. Następnie przejdź do: [i]ACP -> Look & Feel -> dany skin -> Edit Template HTML -> Board Index -> end_this_cat[/i] Zamień całą zawartość na:
[code]<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="java script: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="java script: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>[/code]

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

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

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Chcesz dodać odpowiedź ? Zaloguj się lub zarejestruj nowe konto.

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.

×