Edycja "trow"

Dzień dobry,
Chciałbym zrobić coś podobnego jak tutaj: https://webboard.pl/thread-63310.html tylko, że z sekcją "trow".

Spersonalizowałem sobie kategorie, teraz chciałbym zrobić dokładnie to samo z tym: 


Mój adres forum - jeśli potrzebny http://ourworlds.pl.

Powiedzmy, że moim celem jest dodanie np 5-10 takich działów jak ten oznaczony czerwonym kółkiem, i chciałbym móc każdy spersonalizować na swój sposób. Obecnie wszystkie są podpięte pod trow2  i nie za bardzo mam pomysł jak to zmienić, by każdy powiedzmy miał swoje ID... jak z kategoriami.

Generalnie można to wykonać na podstawie tego poradnika: Różne kolory/obrazki kategorii.

Tylko w tym kodzie:

.belka1 .thead {
background: green;
} 


zamiast .thead używasz .trow1 lub .trow2, w zależności od tego, którą klasę wykorzystuje dany dział.

---

Jeżeli chcesz stylować pojedyncze działy, to w forumbit_depth2_cat i w forumbit_depth2_forum dodajesz do <tr> class="trow_{$forum['fid']}" (nazwa klasy tutaj nie ma znaczenia, ważne jest {$forum['fid']}). Później w CSS dopisujesz np.:

/* trow1 lub trow2 w zależności od tego, jaką klasę wykorzystuje dany dział */
.trow_iddziału .trow1 {
background: green;
} 


Wrzuciłem to do szablonów.

forumbit_depth2_cat
<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}" class="linia_{$forum['fid']}" ></span></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

forumbit_depth2_forum
<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}" class="linia_{$forum['fid']}" ></span></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

I do CSSa taki przykład.

.linia4 .trow1 {
background: green;
}

Nic się jednak nie zmienia.

Nie zmienia bo dodajesz i stylujesz inną klasę. Stylujesz linia4, a dodajesz linia_{$forum['fid']}.

Bo to jest ID, tak samo zrobiłem z .thead i działało.
https://webboard.pl/thread-63310-post-26...#pid267495
Tak jak w instrukcji.

Jeżeli chcesz stylować pojedyncze działy, to w forumbit_depth2_cat i w forumbit_depth2_forum dodajesz do <tr> class="trow_{$forum['fid']}" (nazwa klasy tutaj nie ma znaczenia, ważne jest {$forum['fid']}). Później w CSS dopisujesz np.:

/* trow1 lub trow2 w zależności od tego, jaką klasę wykorzystuje dany dział */
.trow_iddziału .trow1 {
background: green;
} 


Wykonaj tylko to, bo na podstawie tamtego poradnika nie da się stylować pojedynczych działów.

Bo to jest ID, tak samo zrobiłem z .thead i działało.
https://webboard.pl/thread-63310-post-26...#pid267495
Tak jak w instrukcji.

Nie zrozumiałeś. Zwróć uwagę na znak _

Zaczynam się gubić i powoli nic nie rozumieć...

.linia_4 .trow1 {
background: green;
}

To mam wrzucić? tzn dodać _?

Zastąp po prostu swój selektor na ten: .linia_4 i usuń cache.

Swoją drogą raczej lepiej będzie ci dodać tę klasę w szablonie do tr, a nie do td. Zależy jaki efekt chcesz osiągnąć.

Uff udało się, ale natrafiłem na kolejny problem.

<tr class="linia_{$forum['fid']}">
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"  ></span></td>
<td class="when_{$forum['fid']}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="opis">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

 Dodałem sobie <td class="when_{$forum['fid']}"> i teraz wszystko w miarę można edytować, jak sądzicie są lepsze metody?



Mam kolejny problem, jak zrobić delikatny "przedział" między tymi elementami? Są strasznie zbite... Padding powoduje tyle, że obrazki się rozjezdzają na boki.

Może margin-bottom do odpowiedniej klasy ?

Próbowałem to dodać do całego "tr" ale nie wyszło... nic nie zmienia się.

Jest to tabelka, zatem margin tutaj nie zadziała. Padding nam powiększy zawartość komórki. Zatem jest to ok, jesli nie mamy tła. W tym przypadku najlepsze będzie zastosowanie odstępu między wierszami. Nadaj tabeli (tag table) border-spacing:

border-collapse:separate; /* Trzeba rozdzielić */
border-spacing: 0 8px;

Co do tego czy są lepsze rozwiązania. Myślałem, że chcesz to na cały wiersz. Ale zrobiłeś to dobrze.

Gdy dam to do tablea to rozjezdza mi się również belka powyżej oraz belka z napisem dział, wątków, postów itp itd.
Zaznaczyłem na białko na zdjęciu.

Nie wiem czy nie trzeba pokombinować czegoś z klasą tr=linia ale wtedy mam to ręcznie wszystko stylizować w css? każdą belkę tr?

Link do forum: http://ourworlds.pl/Forum/