Jump to content
Sign in to follow this  
Spanner

[Artykuł/Tutorial] Zaokrąglona belka kategorii

Recommended Posts

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]

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

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.