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

Zmieniamy stronność na przykładzie szablonu Times 41 indygo

Stronność szablonu to mocno niejednoznaczna sprawa. W przypadku starego kodu zawsze polecam prawostronne. To nie tyle kwestia wizualnego układu co praktycznych rozwiązań. Na blogu najważniejsza jest treść i to ona powinna ładować się w pierwszej kolejności (w przypadku nowego kodu stronność nie ma znaczenia bo treść zawsze ładuje się tam pierwsza).


41 szablon Times w kolorze indygo zmieniony na prawostronny

Szablon 41 - Times indygo, ze zmienioną stronnością
na starym kodzie, dla blogów na blox.pl. -550px-


Generalnie stronność to kwesta wyboru ale w przypadku starego kodu bardzo ważnym czynnikiem będzie jednak kolejność ładowania się strony i dlatego dzisiaj jeden z moich szablonów lewostronnych zamienię w prawostronny.

Szybka instrukcja dla każdego szablonu.

1. Kopiujemy do schowka kod CSS szablonu, który będziemy zmieniać.

2. Sprawdzamy na jakim szablonie podstawowym zrobiony jest szablon, który zmieniamy i wybieramy jego przeciwieństwo pod względem stronności.

3. Wracamy do edycji CSS i zastępujemy kod znajdujący się w arkuszu tym który chwile temu skopiowaliśmy. Klikamy zapisz i sprawdzamy na oko jakie problemy się pojawiły. Jeżeli szablon jest prosty i nadaje się do łatwej zmiany stronności i wybraliśmy właściwy szablon podstawowy to do zmiany zostały bardzo nieliczne elementy.

4. Poprawiamy odstępy między szpaltami zmieniając odpowiednio wielkość bocznych marginesów (margin) i dopełnień (padding) przy elementach #BlogSzerokaSzpalta, #BlogWazkaSzpalta, #SkomentujWazkaSzpalta.

Gotowe

Ta sama instrukcja zmieni szablon lewostronny na prawostronny jak i prawostronny na lewostronny. Wystarczy tylko odpowiednio podmieniać marginesy i bazowe kody.

Na koniec notki zwyczajowo udostępniam gotowiec. Polecam

Stronność każdego szablonu można zmienić i to w obie strony. Teoretycznie może to być banalnie proste, wystarczy że większość elementów zostanie odpowiednio zaprojektowana. To sprawia jednakże, że niektóre szaleństwa i oryginalne wyglądowo rozwiązania nie zostaną zastosowane. Łatwość zmiany albo mocno pokombinowany wygląd. Zazwyczaj decyduję się na to pierwsze nie chcąc ograniczać użytkowników moich szablonów.

Stronność to relacja prawej strony do lewej. Blogi nie są symetryczne i zresztą nie powinny być, w naszej kulturze czytamy od lewej do prawej czyli w pewnym sensie lewa strona zawsze będzie ważniejsza. Z drugiej strony menu nawigacyjne umieszczone po lewej będzie bardzo dużą zaletą.

Jeżeli mamy wiele rzeczy w wąskiej kolumnie, dużo różnych dodatków, widgetów, wklejek, skryptów a wąska kolumna w szablonie na starym kodzie będzie po lewej to najpierw będą musiały się załadować wszystkie te dodatki a dopiero potem właściwa treść czyli notki. Jeżeli popełnisz jakiś błąd dodając kod html dodatków to przy układzie lewostronnym będzie on wpływał na wszystkie następujące po nim elementy czyli także notki. W najgorszym razie brakujący znacznik w kodzie dodatku spowoduje nie wyświetlenie się wpisów. To są chyba najistotniejsze wad lewostronności.

Za lewostronnymi natomiast przemawia przyzwyczajenie. Mam wrażenie, że różnego rodzaju portale i strony przyzwyczaiły nas do podstawowej nawigacji umieszczonej na lewo od wpisu więc jej tam oczekujemy.

Szablon: typ A Times New Roman

Do dzisiejszej zmiany stronności wybrałam szablon Times New Roman w kolorze indygo. Nie był popularny więc przy ostatnich poprawkach nieco go zmieniłam. Teraz, aby zareklamować jego odnowioną wersję, zdecydowałam się na jego przykładzie pokazać co i jak trzeba zrobić aby zmienić stronność. Górne i dolne tło, zarówno jednolite jak i wzorzyste zrobione jest grafikami. Jego ułożenie w poziomie nie przeszkadza w zmianie.

Początkowo także tło treści było stworzone m.in. dzięki grafice. Bloksowa wąska szpalta to tylko ta część od archiwum do tagów. Pozostałe elementy mają inne nazwy albo nie mają ich wcale. Chcąc dodać tam inne tło trzeba to zrobić element wcześniej a następnie wrócić do oryginalnego koloru w szerokiej szpalcie. Można też po prostu dla całego bloga dodać w tle grafikę powtarzalną w pionie o odpowiednio zmienionych kolorach po lewej i prawej stronie. Grafika jest o tyle niewygodna, że utrudnia wszelkie zmiany w szerokości (poszerzenie, dodawanie trzeciej kolumny, zmianę stronności).

Dlatego poprawiając szablony postanowiłam na nowo opisać ich tło. Wizualnie pod tym względem nic się nie zmieniło ale jeżeli ktoś kiedykolwiek wcześniej próbował coś pozmieniać w tym szablonie to zauważy, że w nowej wersji zmiany są łatwiejsze do edycji.

Jeżeli szablon Times New Roman kopiowałeś już bardzo dawno, jeszcze zanim dodałam obok jednolitego tła wzorki to zanim zaczniesz zmieniać stronność (czy poszerzać albo też dodawać trzecią kolumnę) lepiej ponownie skopiuj szablon. W nowej wersji jest wygodniejszy.

1. Kopiujemy do schowka kod CSS szablonu, który będziemy zmieniać.

Przede wszystkim istotne jest aby szablon zachował swój charakterystyczny wygląd a zmienił jedynie stronność. Dlatego zmiany zacząć należy od skopiowania oryginalnego kodu css zmienianego szablonu. W tym celu należy przejść do edycji arkusza CSS:

Edycja bloga -> WYGLĄD -> EDYCJA CSS -> Edytor CSS

Zaznaczyć cały kod (Ctrl+A) i skopiować go (Ctrl+C). Dla bezpieczeństwa proponuję wkleić go (Ctr+V) sobie do notatnika aby nieopatrznie nie stracić go.

skopiuj kod szablonu

Oczywiście zawsze oryginalny kod szablonu można skopiować bezpośrednio z bloga z szablonem. Wystarczy otworzyć źródło strony (Ctrl+U) i odnaleźć adres zewnętrznego arkusza stylów.

UWAGA
Jeżeli zmieniasz stronność świeżo skopiowanego szablonu to właściwy kod CSS może nie być od razu dostępny. Dlatego po skopiowaniu szablonu należy się wylogować i zalogować na nowo a dopiero następnie przejść do edycji arkusza i skopiować kod. Niemal wszystkie moje szablony zaczynają się od metryczki gdzie podaję nazwę szablonu a także często nazwę szablonu podstawowego.

2. Sprawdzamy na jakim szablonie podstawowym zrobiony jest szablon, który zmieniamy i wybieramy jego przeciwieństwo pod względem stronności.

Ja zazwyczaj lewostronne robię na bloksowym Białym a prawostronne na Spokojnym. Są one swoimi lustrzanymi odbiciami i je wykorzystałam w serii Times New Roman. Jeżeli jednak zmieniasz inny szablon to zacznij od sprawdzenia jaki szablon podstawowy jest wybrany.

Wybrałeś ten szablon

Niestety w edycji bloga szablony nie są podpisane. Pozostaje Ci po wyglądzie ocenić jak nazywa się wybrany szablon. Dla ułatwienia przygotowałam dwie notki o układach. W jednej z nich umieściłam ilustrację będącą sumą szablonów na starym kodzie tam szablony są podpisane bo zrzut pochodzi ze strony zakładania nowego blogu.

Możesz też zajrzeć do źródła strony i na podstawie adresu dowiedzieć się co to za szablon. W drugiej wspomnianej notce umieściłam wszystkie możliwe nazwy szablonów na starym kodzie więc można łatwo sprawdzić czy domyśliłeś się właściwej nazwy.

Następnie należy dobrać odpowiedni szablon podstawowy o przeciwnej stronności. W drugiej wspomnianej notce jest także odpowiednia tabela ułatwiająca dokonanie wyboru.

tabela szablonó podstawowych

Przeciwieństwem Białego, na bazie którego zrobiłam zmieniany szablon Times będą więc: Spokojny, Almost Spring, Kubrick i Connections. Każdy z nich sprawdzi się równie dobrze. W edycji szablonów podstawowych zmieniamy wybrany szablon na ten o właściwej dla nas stronności.

Edycja bloga -> WYGLĄD -> SZABLONY PODSTAWOWE

3. Wracamy do edycji CSS i wklejamy z powrotem skopiowany kod.

Przechodzimy ponownie do edycji arkusza stylów. Usuwamy znajdujący się tam kod css (Ctrl+A, Delete), jest to kod szablonu podstawowego, zupełnie nam niepotrzebny. Na jego miejsce wklejamy (Ctrl+V) nasz skopiowany kod oryginalnego szablonu. Klikamy zapisz i sprawdzamy efekty. Niewątpliwie kilka rzeczy będzie niezupełnie doskonałych.

4. Poprawki

Przede wszystkim należy zwrócić uwagę na odstępy między szpaltami. Owszem zdarzają się idealnie symetryczne w swych odstępach szablony ale to raczej wyjątki od reguły bo taka symetryczność powoduje drobne problemy przy innych, częściej dokonywanych zmianach. Dodatkowo należy być ostrożnym z wszystkimi elementami pozycjonowanymi bezwzględnie. Jeżeli mają być położone w tej samej pionowej linii co wąska szpalta to mogą mieć częściowo automatyczne położenie ale nie muszą. I na koniec ogólny układ ze szczególnym uwzględnieniem tytułu bloga. Często jest on przesunięty marginesem bądź dopełnieniem aby znaleźć się we właściwym miejscu. Wszystko to należy poprawić choć nie wszystko jest niezbędne, większość tylko zalecana.

konieczne poprawki

A. Odstępy między szpaltami

Zapewne po zmianie wąska i szeroka szpalta będą zbyt blisko siebie. Aby temu zaradzić należy zmienić marginesy (margin) i dopełnienia (padding) obu elementów tak aby to co było po prawej znalazło się po lewej i na odwrót. Right oznacza oczywiście prawy a left lewy ale najczęściej zamiast rozbijać opis marginesów i dopełnień zapisuję je wspólnie dla wszystkich krawędzi. W takim przypadku kolejność jest zgodna z ruchem wskazówek zegara i zaczyna się na dwunastce czyli góra-prawy-dół-lewy.

W przypadku odstępu między szpaltami należy sprawdzić opisy przy trzech selektorach: #BlogWazkaSzpalta, #SkomentujWazkaSzpalta, #BlogSzerokaSzpalta. Najlepiej wykorzystać w tym celu wyszukiwarkę aby mieć pewność, że w dalszej części arkusza nie powtarza się opis danego selektora (szczególnie #SkomentujWazkaSzpalta chętnie umieszczana jest dość daleko w arkuszu).

dopełnienia do poprawki

W przypadku mojego szablonu Times wszystko jest odpowiednio symetrycznie za wyjątkiem dopełnienia w szerokiej szpalcie. Trzeba zamienić prawe dopełnienie z lewym. Poprawiony fragment powinien wyglądać tak:

#BlogSzerokaSzpalta {
 padding: 10px 60px 10px 10px;
}

Po wprowadzeniu zmiany klikamy zapisz i sprawdzamy efekt. Można oczywiście kontrolę przeprowadzić na koniec ale zawsze lepiej drobną pomyłkę wyłapać od razu a nie potem zachodzić w głowę gdzie to też popełniło się błąd.

B. Elementy pozycjonowane bezwzględnie

Staram się w notkach opisujących szablony określać, które elementy są przenoszone absolutnie. Taka informacja przydaje się w kilku sytuacjach związanych ze zmianami. Stety-niestety jest to mój nowy pomysł więc taką informację można znaleźć w zaledwie kilku notkach. Z całą pewność absolutnie pozycjonowane jest górne menu i udawana stopka. Jeżeli jest trzecia szpalta to często jej położenie zawdzięczane jest właśnie pozycjonowaniu absolutnemu (ale nie zawsze). Jeżeli szukacz nie jest bezpośrednio nad opcjami bloksa na dole wąskiej szpalty to również przeniesiony jest bezwzględnie. W określonych sytuacjach zdarzało mi się przenieść także w ten sposób kategorie i zakładki jeżeli miały stanowić trzecia kolumnę. I to chyba tyle, więcej absolutnych eksperymentów nie pamiętam.

W przypadku elementów pozycjonowanych absolutnie należy sprawdzić określenie położenia w poziomie czyli najczęściej left choć czasami zamiast tego right. Jeżeli jest auto to wraz z automatyczną zmianą położenia szpalt także i taki element się przeniesie.

W przypadku mojego szablonu Times wyszukiwarka przeniesiona jest bezwzględnie ale mimo to nie wymaga żadnego poprawiania bo jak widać na załączonym wyżej obrazku sama-się-przeniosła.

automatyczne pozycjonowanie bezwzględne

Jeżeli natomiast przy left (albo right) określone są konkretne wartości (najczęściej w pikselach) to takie określenie położenia trzeba poprawić. W szablonie Times bezwzględne położenie określone w poziomie w pikselach mają tylko elementy dodatkowe. Górne menu będzie więc dobrym przykładem co zrobić w sytuacji gdy przykładowo szukacz zamiast auto miał wpisane 10px.

przykład górne menu

W sytuacji gdy chcemy coś umieścić na szerokości wąskiej szpalty najwygodniejszym rozwiązaniem będzie określenie położenia jako auto i ewentualne powielenie marginesów i dopełnień z selektorów opisujących wąską szpaltę.

Jeżeli natomiast naszym docelowym miejscem jest przestrzeń która umieszczona jest w pionowej linii szerokiej szpalty to tutaj najwygodniejszym rozwiązaniem będą już dokładne piksele. W przypadku tej zmiany szablonu Timesa szeroką szpaltę umieszczamy po lewej więc bardzo łatwo będzie określić ile pikseli od lewej krawędzi mają zaczynać się nasze dodatkowe elementy.

W związku z tym że obie szpalty maja wpisane boczne dopełnienie o wartości co najmniej 10px a chcę umieścić górne menu w tej samej linii to treść zawartą w głównej szpalcie to muszę wziąć to pod uwagę i jeżeli będzie to konieczne to policzyć ile pikseli jest pomiędzy elementem który ma pozycję relative a treścią szerokiej szpalty.

pozycjonowanie bezwzględne lewe w pikselach

W przypadku tego szablonu to bardzo proste.

#menuTop {
 left:10px;
}


Jeżeli korzystasz też z udawanej stopki, która dodaje wzorek także na dole to i ten fragment musisz analogicznie poprawić. Fragment kodu po zmianach ma wyglądać tak:

#uStopka {
 left:auto;
}

C. Tytuł bloga i ogólny układ

Ogólny układ zależy od HTML szablonu podstawowego, który wybierzemy i od tego jak bardzo różnił się on będzie od tego który dotychczas był wykorzystywany w szablonie który zmieniamy. W przypadku szablonu Times nie ma wielu różnic do poprawiania. Jedyną naprawdę istotną jest położenie tytułu i opisu bloga.

Kontener tytułowy bloga zarówno w szablonie Spokojnym jak i Białym zajmuje całą szerokość bloga i umieszczony jest nad obiema szpaltami. Chcąc nad lewą wąską szpaltą wyświetlać wyszukiwarkę musiałam zrobić dla niej nieco miejsca i przesunąć tytuł i opis. Teraz szukacz jest po prawej i tytuł może wrócić tam gdzie zaczyna się jego kontener. Natomiast po prawej muszę dodać dopełnienie aby jeżeli będzie dłuższy niż szeroka szpalta nie chował się pod szukaczem tylko przechodził do kolejnego wiersza.

tytuł bloga

Czyli najprościej rzecz ujmując znów symetrycznie zmieniam boczne marginesy i dopełnienia tylko tym razem w elemencie tytułowym.

#BlogTytulBox {
 padding:0 310px 0 0;
 text-align: left;
 height:150px
}

Ciekawostka. Gdyby nie 10px wpisane jako dopełnienie osobno tytułu i opisu bloga wartości dopełnienia w kontenerze z całą treścią tytułową byłyby analogiczne jak te w górnym menu czyli 320px po stronie gdzie ma być szukacz i 10px po drugiej. Ale że rzecz opisana jest inaczej to te 10px jest odjęte później.


Jeżeli nie chce Ci się bawić w sprawdzanie, szukanie i własnoręczne zmiany to ten szablon jest już przerobiony. Aby skorzystać z gotowego kodu należy:

  1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. 0Etheme - Spokojnyzmienić szablon podstawowy na prawostronny czyli 0Etheme - Spokojny
  3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem: prawostronny szablon 41 Light, indygo (maksymalna szerokość ilustracji 550px)

Notki na podobne i powiązane tematy:

środa, 11 kwietnia 2012, szablonykatemac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
avo_lusion
2012/04/30 20:20:36
Hej:) Wysłałam do ciebie maila! Będę wdzięczna za odpowiedź:)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...