Dodanie zwijania/rozwijania kategorii

wersja skryptu MyBB: 1.6.9
adres forum: www.nawlasnyuzytek.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam, jak dodać zwijanie kategori, mam grafiki, ale nie wiem jak to wdrążyć do szablonu

forumbit_depth1_cat

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tthead tborder">
<thead>
<tr>
<td class="thead" colspan="4">
<div><strong>{$forum['name']}</strong></div>
</td>
</tr>
</thead>
</table>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
{$sub_forums}
</tbody>
</table>
<br />

Do : forum_depht1_cat spróbuj wgrać to :

<div class="expcolimage">
<img src="Tutaj_Link_Do_Pliku_Graficznego" id="cat_1_img" class="expander" alt="[-]" title="[-]" style="cursor: pointer;">
</div>

ale mam 2 grafiki, jedna z "+' druga z "-"

Spróbuj tak:

<div class="expcolimage" title="{$expaltext}"><img src="{$theme['imgdir']}/{$expcolimage}" class="expander" id="cat_{$forum['fid']}_img" alt="{$expaltext}" /></div>

Podeślij te 2 ikonki sprawdzę coś.

Dorman, to jest ok, a mogłbyś podać jeszcze css do expcolimage i expander? Bo domyślam się że ten kod od siebie wziąłeś

Wziąłem ale lekko zmodyfikowałem, aby u Ciebie on działał .

a mogłbyś podać jeszcze css do expcolimage i expander?

O co ci chodzi? Aby po nakierowaniu na thead pokazywało się obrazek do jego zwinięcia/rozwinięcia?

chodzi mi o style do expcolimage i expander w global.css

<div class="expcolimage" title="{$expaltext}"><img src="{$theme['imgdir']}/{$expcolimage}" class="expander"id="cat_{$forum['fid']}_img" alt="{$expaltext}" /></div>

expcolimage:

.expcolimage {
    float: right;
    width: auto;
    vertical-align: middle;
    margin-top: 3px;
}

expander:
tej klasy nie mam w CSS.

A jeżeli chcesz, aby po nacisnięciu na thead pokazywał się button zwinięcia to wgraj ten kod do CSS.

.thead:hover .expcolimage img {
opacity: 1;
}

.thead .expcolimage img {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.42, 0, 0.58, 1) 0;
}

Okej, ale powiedz mi jak zmniejszyć thead, bo po wgraniu powiekszył mi się, i nie mogę sobie znim poradzić...

Może usuń te kody w sekcji thead:

margin-bottom: 60px;
padding-bottom: 5px;

I spróbuj zamienić swój szablon forumbit_depth1_cat na:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tthead tborder">
<thead>
<tr>
<td class="thead" colspan="4">
<div class="expcolimage" title="{$expaltext}"><img src="{$theme['imgdir']}/{$expcolimage}" class="expander" id="cat_{$forum['fid']}_img" alt="{$expaltext}" /></div>
<div><strong>{$forum['name']}</strong></div>
</td>
</tr>
</thead>
</table>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
{$sub_forums}
</tbody>
</table>
<br />

Zadziałała zamiana szablonu.

ale mam tak I nie wiem jak wycentrować tekst w pionie, bo gdy dodam padding-top to mi się powiększa cała belka.

.thead {
    background: -moz-linear-gradient(top,  #869692 0%, #52747f 99%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#869692), color-stop(100%,#52747f)); 
        color: #fff;
    height: 24px;
    border-top: 0;
    padding-left: 15px;
    
} 


Zamiast klasy padding-top spróbuj dać np:

top:10px;
position:relative;

A jak nie zadziała to zamiast:

height: 24px;

Zamień na:

line-height: 24px;

W theadzie.

Już sobie poradziłem