O szablonach, ich projektowaniu i moich z tym zmaganiach...

CSS: kategorie i stronicowanie

Poza wpisami, i czasami tytułem, w szerokiej szpalcie na stronie głównej znajdują się też oczywiście:

  • kategorie, jeżeli są dodawane do wpisów,
  • etykieta wybranej kategorii jeżeli zamiast wszystkich przegląda się tylko wpisy z wybranej kategorii
  • i stronicowanie jeżeli bloga ma więcej notek niż mieści się na stronie (na stronie można wyświetlać od 1 do 25 notek).

Kontener z kategoriami i kanałem RSS

Znaczników jest znacznie więcej, poniższy obrazek doskonale to zilustruje ale te które tu wymieniam są wystarczające do pełnego opisu elementu. Bloksowy stary kod szablonów zbudowany jest z tabel więc związanych z nimi znaczników jest całkiem sporo na całym blogu.

#BlogKategorieBox
- cały kontener z kategoriami i RSSem, jest to element który wyświetla się w bloku
#BlogKategorie
- kontener tylko z listą wszystkich kategorii (już bez rss), element blokowy (używa się go w szczególności do opisu wyglądu słowa Kategorie: i pionowych kresek oddzielających poszczególne kategorie ale dotyczy także wybranej kategorii i linków do wszystkich kategorii)
#BlogKategorie span
- kombinator opisujący wygląd wybranej kategorii, element liniowy (zazwyczaj na stronie głównej jest to słowo Wszystkie, chyba że zostanie wybrana inna kategoria)
#BlogKategorieBox span - alternatywa dla powyższego, odwołuje się do tego samego elementu
#BlogKategorie a
- kombinator opisujący tylko linki kategorii
#BlogKategorieBox a
- kombinator opisujący linki zarówno części z kategoriami jak i części z RSS
#BlogRss
- kontener tylko z rss, element blokowy
#BlogRss a
- kombinator opisujący tylko link do rss

zobacz przykładowy kod w formie tekstowej
albo zajrzyj do źródła własnego bloksa

BlogKategorieBox

Etykieta wybranej kategorii

Wyświetla się tylko jeżeli zostanie wybrana jedna z kategorii. Umiejscowiona jest pod lista kategorii a nad wpisami.

#BlogKategorieWybranaTytul
- sam kontener zawierający etykietę tytułową wybranej kategorii
#BlogKategorieWybranaTytul h3
- kombinator etykiety wybranej kategorii ujętej w znacznik śródtytułu (co oznacza że przeglądarka zwiększa jej rozmiar, grubość i margines)

BlogKategorieWybranaTytul

Kontener ze stronicowaniem

Stronicowanie, jak wiele rzeczy na bloksie, ułożone jest dzięki tabeli. Tabela ta ma tylko trzy komórki więc bez szaleństw.

#BlogStronicowanieBox
- cały boks ze stronicowaniem, zarówno linki następne/poprzednie jak i numery stron, element blokowy
#BlogStronicowanieBox table
- tabele z całą zawartością stronicowania czyli to samo co wyżej tylko ujęte już w znacznik tabeli
.BlogStronicowaniePoprzednie
 - klasa opisująca element zawierający odnośnik do poprzedniej stronie; istnieje także na pierwszej stronie (choć bez treści); klasa przypisana komórce tabeli
td.BlogStronicowaniePoprzednie - alternatywna wersja zapisu, ta sama zawartość
.BlogStronicowaniePoprzednie a
- kombinator opisujący odnośnik do poprzedniej strony, nie wyświetla się na pierwszej stronie
.BlogStronicowanieStrony
- klasa komórki zawierającej wszystkie wyświetlane numery stron (i wielokropki też); używa się jej głównie do opisu wyglądu elementów nie będących linkami w stronicowaniu (czyli numeru wybranej strony i przecinków)
td.BlogStronicowanieStrony - alternatywna wersja zapisu, ta sama zawartość
.BlogStronicowanieStrony a
- kombinator opisujący pojedynczy link stronicowania (w postaci liczby bądź wielokropka), nie obejmuje przecinków, element liniowy
.BlogStronicowanieNastepne
 - klasa opisująca element zawierający odnośnik do następnej strony; istnieje także na ostatniej stronie (choć bez treści); klasa przypisana komórce tabeli
td.BlogStronicowanieNastepne - alternatywna wersja zapisu, ta sama zawartość
.BlogStronicowanieNastepne a
- kombinator opisujący link do następnej strony, nie wyświetla się na ostatniej stronie

zobacz przykładowy kod w formie tekstowej
albo zajrzyj do źródła własnego bloksa

BlogStronicowanieBox

Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...