Skocz do zawartości
Urlop / Vacation Czytaj dalej... ×
  • Zarejestruj się
Zaloguj się, aby obserwować  
Spanner

[Artykuł/Tutorial] Zaokrąglona belka kategorii

Polecane posty

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

Bądź aktywny! Zaloguj się lub utwórz konto

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

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

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

×

Ważne informacje

W celu świadczenie usług przez nasz Serwis na najwyższym poziomie, w ramach Serwisu wykorzystujemy pliki Cookies (tzw. ciasteczka). Korzystając ze stron Serwisu IPSBEYOND.PL bez zmiany ustawień przeglądarki będą one zapisane w pamięci urządzenia. Jeżeli nie dokonacie Państwo zmiany ustawień przeglądarki internetowej to wyrażacie zgodę na zapisywanie plików Cookies.