Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Edycja "trow"

Założony przez  Finarfin.

23.06.2018, 11:32
#1
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: 
[Obrazek: 23.PNG?width=1442&height=275]

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.
23.06.2018, 12:02 (Ten post był ostatnio modyfikowany: 23.06.2018, 12:17 przez Axwell.)
#2
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;
} 

[Obrazek: 5zdFfU1.png]
26.06.2018, 19:16
#3
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.
26.06.2018, 19:21
#4
Nie zmienia bo dodajesz i stylujesz inną klasę. Stylujesz linia4, a dodajesz linia_{$forum['fid']}.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
26.06.2018, 19:34 (Ten post był ostatnio modyfikowany: 26.06.2018, 19:35 przez Finarfin.)
#5
[Obrazek: 2.PNG]

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.
26.06.2018, 19:58
#6
(23.06.2018, 12:02)Axwell napisał(a): 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;
} 

[Obrazek: 5zdFfU1.png]

Wykonaj tylko to, bo na podstawie tamtego poradnika nie da się stylować pojedynczych działów.
26.06.2018, 20:21
#7
(26.06.2018, 19:34)Finarfin napisał(a): [Obrazek: 2.PNG]

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 _
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
27.06.2018, 21:13
#8
Zaczynam się gubić i powoli nic nie rozumieć... :(

.linia_4 .trow1 {
background: green;
}
To mam wrzucić? tzn dodać _?
27.06.2018, 22:23 (Ten post był ostatnio modyfikowany: 27.06.2018, 22:25 przez Divir.)
#9
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ąć.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
29.06.2018, 01:45 (Ten post był ostatnio modyfikowany: 29.06.2018, 03:43 przez Finarfin.)
#10
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?

[Obrazek: fa976b8f469e6fb5.png]

Mam kolejny problem, jak zrobić delikatny "przedział" między tymi elementami? Są strasznie zbite... Padding powoduje tyle, że obrazki się rozjezdzają na boki.
29.06.2018, 08:57
#11
Może margin-bottom do odpowiedniej klasy ?
Akcja "Dziękuję za pomoc"
Kasujesz link - nie licz na wsparcie
29.06.2018, 16:50
#12
Próbowałem to dodać do całego "tr" ale nie wyszło... nic nie zmienia się.
29.06.2018, 21:19
#13
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.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
29.04.2020, 19:07 (Ten post był ostatnio modyfikowany: 29.04.2020, 19:42 przez Finarfin.)
#14
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/



Użytkownicy przeglądający ten wątek:

1 gości