O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Układy, czyli bloksowe kody źródłowe blogów

Czasami zdarza się, że pobrany szablon nie wygląda tak jak powinien. Powodem tych nieścisłości z reguły jest niewłaściwy html. Na Blox.pl wygląd swojego bloga opisujesz korzystając z CSS co nie zmienia faktu, że posiada on również html, który decyduje o tym co będziesz opisywać w CSS. O ile rozwiązaniem problemu za złym skopiowaniem się szablonu jest najczęściej ponowne kliknięcie w znaczek Ładny Blox? Skopiuj mój CSS o tyle warto wiedzieć z czym związany jest taki błąd. Taka wiedza przyda się gdy samemu zechcesz pozmieniać coś w wyglądzie swojego bloga.

wybierz szablon

Bloksowe szablony dzielą się na te na starym kodzie i te na nowym (new_age). W ramach jednego rodzaju kodu szablony będą jakoś wyglądały bez względu na to na jakiej wersji kodu zostają nałożone. Próba nałożenia szablonu napisanego dla nowego kodu na stary skończy się jednak wyglądem bliskim przeglądarkowego. Tym razem zależność HTML-CSS porównam do ciała i ubrań. HTML to ciało a CSS ubranie, szablonem można coś tam poprawić ale podstawowy kształt nadaje HTML (kształt niekoniecznie w znaczeniu układu bo nowy kod nie decyduje o układzie w takim samym stopniu jak stary ale wracając do porównania do ciała to czy są ręce i nogi to już sprawa HTML). Przy czym nowy i stary kod to zupełnie różne dwa typy ciał, jak słoń i żyrafa albo wąż i wiewiórka.

Na tym blogu zajmuję się głównie starym kodem i wszelkie opisy zmian dotyczą właśnie jego więc i ta notka zawierać będzie tylko podział starych szablonów podstawowych. Po informacje o nowym kodzie zapraszam na stylowy blog.

Jeżeli zaś nie masz ochoty zagłębiać się w tą notkę i wystarczy ci tabelka podsumowująca to i taką sporządziłam.

Zakładając bloga, w kroku trzecim wybieramy szablon i akceptujemy regulamin. Szablony są tam ładnie nazwane i te nazwy najczęściej stosuję. Kiedyś widoczne były także w edycji bloga ale po zmianie wyglądu edycji gdzieś te nazw zniknęły. Pozostają jednak nazwy kodów css więc jakaś forma identyfikacji jest dostępna. Oczywiście przede wszystkim najłatwiej rozpoznać szablon po wyglądzie. Aby wszystko ułatwić sporządziłam skrótowa stronę gdzie można odszukać szablon zarówno o wyglądzie jak i po nazwie.

wybierz szablon - nazwy szablonów

Wszystkie powyższe szablony używają starego kodu. Poszczególne elementy nazwane są w ten sam sposób więc można podkładać kod jednego szablonu na inny HTML z tej grupy. Nie wszystkie elementy ułożone są w tym samym miejscu i tej samej kolejności, stąd też różnice w wyglądzie. Wybierając szablon podstawowy należy zwrócić uwagę na trzy cechy: stronność, zagnieżdżenie tytułu i dodatkowe puste elementy. Pierwsze dwie cechy bardzo łatwo dostrzec choć nie zawsze jest to oczywiste bo wgląd szablonu może nieco ukryć układ. Dodatkowe puste elementy mogą się przydać jeżeli planujesz bardziej skomplikowany wygląd ale poza tym są zupełnie zbędne.

Po pierwsze wąska szpalta

Przyjrzyj się czy wąska szpalta (kolumna z archiwum, ostatnimi notkami, zakładkami i tagami) jest umieszczona na prawo od wpisów czy na lewo od nich? Ze względu na sposób ładowania się strony polecam prawostronne szablony, czyli te z treścią główna po lewej a szpaltą boczną po prawej. Przy takim układzie pierwsza ładuje się treść bloga a dopiero potem jego dodatki.

  • lewostronne – z wąską szpaltą po lewej stronie:
    • Biały (0Bbialy)
    • Blogowy (0Dtheme)
    • Zielony (0Ftheme)
    • Theme A (default)
    • Theme B (1themeB)
    • Theme D (1themeD)
    • Theme E (1themeE)
    • Theme H (1themeH)
    • Rin (2themeC)
  • prawostronne – z wąską szpaltą po prawej stronie:
    • Niebieski
    • Klasyczny
    • Spokojny (0Etheme)
    • Theme C (1themeC)
    • Theme F (1themeF)
    • Theme G (1themeG)
    • Theme I (1themeI)
    • Almost Spring (2themeA)
    • Kubrick (2themeB)
    • Connections (2themeD)

Po drugie tytuł bloga

Tutaj rzecz jest nieco bardziej skomplikowana. Umieszczenie tytułu mniej rzuca się w oczy i czasami trzeba zerknąć do html aby rozpoznać który to model. Nieznacznie przeważają te z tytułem na szerokości całego bloga. Na szczególną uwagę zasługuje Zielony - jako jedyny ma tytuł bloga umieszczony w wąskiej szpalcie.

  • nad całym blogiem, dokładnie rzecz ujmując zarówno nad wąską jak i szeroką szpaltą czyli zagnieżdżony bezpośrednio w głównym kontenerze:
    • Biały (0Bbialy)
    • Blogowy (0Dtheme)
    • Spokojny (0Etheme)
    • Theme A (default)
    • Theme B (1themeB)
    • Theme C (1themeC)
    • Theme D (1themeD)
    • Almost Spring (2themeA)
    • Kubrick (2themeB)
    • Rin (2themeC)
    • Connections (2themeD)
  • w jednej ze szpalt, czyli zagnieżdżony jeszcze bardziej
    • w szerokiej szpalcie:
      • Niebieski
      • Klasyczny
      • Theme E (1themeE)
      • Theme F (1themeF)
      • Theme G (1themeG)
      • Theme H (1themeH)
      • Theme I (1themeI)
    • w wąskiej szpalcie
      • Zielony (0Ftheme)

Po trzecie NadTytul i Stopka

Ta część jest już zupełną tajemnicą, bez zerknięcia do źródła strony trudno domyślić się czy Stopka istnieje, czy można linkować NadTytuł itd. Te dwa elementy blokowe są zupełnie puste (nie zawierają treści) i praktycznie nie są do niczego potrzebne.

  • posiadające Stopkę i NadTytul:
    • Biały (0Bbialy)
    • Blogowy (0Dtheme)
    • Spokojny (0Etheme)
    • Zielony (0Ftheme)
    • Theme B (1themeB)
    • Theme D (1themeD)
    • Theme E (1themeE)
    • Theme H (1themeH)
    • Almost Spring (2themeA)
    • Kubrick (2themeB)
    • Rin (2themeC)
    • Connections (2themeD)
  • bez elementów Stopka i NadTytul:
    • Niebieski
    • Klasyczny
    • Theme A (default)
    • Theme C (1themeC)
    • Theme F (1themeF)
    • Theme G (1themeG)
    • Theme I (1themeI)

I to tyle jeżeli chodzi o bloksowe układy. Jeżeli masz ochotę zmienić szablon i twoim problemem jest układ to jedynym sensownym sposobem na zmianę będzie HTML. Jeżeli planujesz zrobić swój własny szablon na starym kodzie to zaczynając od zera najpierw musisz wybrać układ. Jeżeli zaś pobierasz udostępniony szablon i coś poszło nie tak jak trzeba to może przed pobraniem ustaw ten sam bazowy szablon. O różnych rzeczach związanych z arkuszem szablonu, z kopiowaniem i wprowadzaniem zmian zapraszam na stronę Szablon: kopiowanie, zmiany, tworzenie... gdzie w wielkim skrócie odpowiadam na najczęstsze pytania. Tam też są umieszczone linki do notek na podobne tematy. 

piątek, 05 października 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Zmiana szablonu podstawowego z szablony katemac
Ostatnio sporo o szablonach podstawowych piszę. Dla tych których temat nie interesuje mam dobrą i złą wiadomość. Dzisiejsza notka nie jest ostatnią ale następna dotycząca bloksowych szablonów podstawowych na starym kodzie będzie nie dla początkujących ... »
Wysłany 2012/03/20 21:30:44
Komentarze
marcel.pajda
2008/01/31 05:10:25
Wielkie dzięki!

A ja naiwny myślałem, że położenie wąskiej szpalty da się ustalić przez modyfikację CSSa.

Pozdrawiam.
-
kate_mac
2008/01/31 09:52:10
@marcel.pajda
nie naiwny tylko niewiedzący :)
i żeby było jeszcze weselej to powiem Ci, że są układy w których wąska szpalta zaczyna się zaraz obok tytułu i są takie w których pojawia się dopiero pod tytułem (i to zarówno w wersji prawej jak i lewej)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...