Zaloguj się, aby obserwować  
Obserwujący 0
Spanner

[Artykuł/Tutorial] Zaokrąglona belka kategorii

1 post w tym temacie

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

Utwórz konto

Zarejestruj nowe konto, to bardzo łatwy proces!


Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!


Zaloguj się
Zaloguj się, aby obserwować  
Obserwujący 0

  • Kto przegląda   0 użytkowników

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