Jump to content
Spanner

Zaokrąglona belka kategorii

Recommended Posts

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]

  • Like 1

Share this post


Link to post
Share on other sites

Witam kolego a przypadkiem podczas edycji nie zostawiłeś komendy center lub jej nie zamknąłeś bo to na to wygląda :D

PS> może też taką komendę dałeś <div class="center">

a najlepiej to pokaż jaki masz kod tam gdzie to doklejałeś szybciej ci pomogę :P

Share this post


Link to post
Share on other sites

pokazywać to raczej nie ma czego bowiem jasno było napisane

Zamień całą zawartość na:

tak też zrobiłem jednak do czasu gdy tej zawartości nie zmieniam justowanie jest poprawne tylko wtedy dziwne anomalia odbywają się na głównej forum.


18608971031ns.gif

Share this post


Link to post
Share on other sites

hmm a wiesz co może tam jakieś w skinie brakuje przed tą zawartością co miałeś zmieni.ć dopisz może

</div>
lub na
</center>

==edit==

bo po prostu masz inaczej to zrobione niż w standardowych stylach

Share this post


Link to post
Share on other sites

tzn. tak może krok po kroku opiszę całą sytuację...

jak wcześniej wspomniałem skorzystałem z faq http://www.spannerdev.pl/Artykul/017-Zaokr...-kategorii.html

część pierwsza poszła gładko...CSS Advanced

po dodaniu wpisu HTML wszystko również było ładnie pojawiły się zaokrąglenia tyle że minimalizacja kategorii forum nie trybi jak powinna, mianowicie po zamknięciu powiedzmy 2 kategorii minimalizują się również wszystkie niżej od niej analogicznie gdy zamykam 4,5 czy też 10 minimalizuje się nie jedna lecz cała reszta zamieszczona pod nią....minimalizuje 1 i zamyka sie/minimalizuje całe forum....sprawa wraca do normy po dodaniu ostatniego kodu w end_this_cat kategorie minimalizują się poprawnie natomiast sytuacja wymyka się spod kontroli zgodnie z tym co na fotce w powyższym poście..

szukałem jakiś wpisów center etc. ale nic

bo po prostu masz inaczej to zrobione niż w standardowych stylach

rozwiń proszę?

Edited by Spanner

18608971031ns.gif

Share this post


Link to post
Share on other sites

więc tak podaj mi adres forum zobaczę to na żywo jak wygląda nie na fotce i jak coś może jak możeesz zapodasz mi styl i w stylu bym popatrzył i szybciej to znalazł jak nie to będziemy tak szukać

Share this post


Link to post
Share on other sites

forum.strefapc.pl

musisz się zarejestrować bowiem defaultowo widoczny jest skin niebieski, po rejestracji zmień na czarny


18608971031ns.gif

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

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