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

Trzecia kolumna na blogu z szablonem 09 AMPLA

Swego czasu trzecia kolumna na bloksowym blogu była jakimś często irracjonalnym pragnieniem co drugiej osoby, która zadawała mi pytanie związane z wyglądem bloga. Najśmieszniej było gdy o trzeciej kolumnie wspominał ktoś kto w wąskiej szpalcie poza archiwum miał może ze cztery linki i jeden baner w dodatkach. Po co ta Trzecia? Za cholerę nie miałam pojęcia, zapewne przyszłościowo...


przeniesienie wąskiej szpalty do trzeciej kolumny

Szablon 09 - AMPLA zielony, z przeniesioną do trzeciej kolumny bloksową wąską szpaltą
na starym kodzie, dla blogów na blox.pl. -500px-


Z czasem zaczęłam inaczej patrzeć na takie pytania. Jest jednak kilka sposobów na zrobienie trzeciej szpalty i mówiąc szczerze dalej nie przepadam za pytaniami w stylu jak zrobić trzecią kolumnę? Wolę bardziej konkretne: jak przenieść zakładki do osobnej kolumny, jak sprawić aby dodatki wyświetlały się w trzeciej szpalcie, etc. Bo o to właśnie najczęściej chodzi więc dzisiaj wpis o najprostszej, samoistnej wręcz, symetrycznej trzeciej kolumnie. A o tym jak inaczej, ciekawiej czy po prostu praktyczniej zaaranżować układ trzykolumnowy na blogu napiszę przy innej okazji.

Do stworzenia samoistnej, symetrycznej trzeciej szpalty potrzebne będą:

  • Tylko odpowiednie stylowanie w CSS
    • poszerzenie całości przestrzeni bloga
      #BlogGlownyBox {
       padding-left:170px;
       position:relative;
      }
    • przeniesienie bloksowej treści wąskiej szpalty w inne miejsce
      #BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
       position:absolute;
       top:10px;
       left:0;
       width:160px;
      }

Na początek małe wyjaśnienie. Dzisiejsza dodatkowa kolumna powstawać będzie samoistnie czyli nie wymaga żadnej nadzwyczajnej ingerencji w polu na dodatkowy kod HTML. Kolumny stworzą symetryczny układ, gdzie w jednej z wąskich kolumn będą elementy dodatkowe (z pola na dodatki HTML) a w drugiej bloksowa treść poboczna (archiwum, zakładki, chmurka tagów, etc.). Taki podział treści i sposób ułożenia kolumn najlepiej uzyskać poprzez pozycjonowanie bezwzględne.

Jak to wszystko w rezultacie będzie wyglądać pokażę na przykładzie szablonu 09 AMPLA.

Dla kogo taka Trzecia?

Taki układ najlepiej sprawdzi się na blogach na których jest dużo dodatków ale którego autor gubi się w HTML. Wszystkie elementy z pola na kod HTML stworzą samodzielną kolumnę co zapewni dużą swobodę w dysponowaniu tą szpaltą.

Trzecia Szpalta: symetrzyczna, samoistna, z dodatkami, bezwzględna

Wadą tego rozwiązania może być długość bloksowej wąskiej szpalty (tej z zakładkami, tagami i cała resztą). Jeżeli jest w niej więcej rzeczy niż w którejkolwiek z dwóch pozostałych szpalt a tło dookoła bloga jest inne niż to bezpośrednio na blogu to ta przeniesiona wąska szpalta zacznie wystawać.

W przypadku gdy bloksowa wąska szpalta będzie krótsza niż szpalta z dodatkami polecam więc zastosować kilka sztuczek zmniejszających jej długość:

Nowa szerokość bloga

Aby dodać kolejną kolumnę trzeba przede wszystkim poszerzyć całego bloga, no bo gdzieś ta dodatkowa kolumna musi zostać umieszczona. Ostatnio lubię robić szablony o zmiennej szerokości, w takiej sytuacji nie muszę przejmować się tak bardzo ekranem na jakim szablon będzie wyświetlany. Tym razem jednak wszystko zrobimy bardziej tradycyjną metodą, łopatologicznie i po prostu.

Ze względu na wymiary ekranów uważam, że blog nie powinien być szerszy niż 995px. Mieści się wtedy w rozdzielczości 1024px. Siedząc przy dużym ekranie może ci się to wydawać niepotrzebnym ograniczeniem ale spora część urządzeń przenośnych większych niż telefon ale mniejszych niż tradycyjny laptop korzysta z takiej szerokości (tablety, netbooki). Statystyki mojego bloga pokazują, że aż 19,4% odwiedzających korzysta z ekranów mniejszych niż 1280px. Wszystko więc zależeć będzie od twoich czytelników.

Skoro szablon ma mieć układ symetryczny sprawdzamy dwie rzeczy. Po pierwsze jaką szerokość ma blog aktualnie. W przypadku szablonów na starym kodzie będzie to cecha width przy selektorze #BlogGlownyBox a jeżeli nie tam to przy #BlogBodyBox. Do całej szerokości elementu wliczamy też padding, margin i border. Teraz już wiemy ile miejsca zajmuje nasz blog i możemy odjąć tą wartość od maksymalnej szerokości. Wynik to liczba jaką możemy bez obaw dodać do naszego szablonu.

Ta liczba się nam przyda ale zaczynamy po prostu od wpisania nowej całkowitej szerokości bloga. W moim przykładowym szablonie (09 ampla zielony) jest to 940px bo 50 pikseli muszę przeznaczyć na zaplanowane wcześniej ramki i dopełnienie.

#BlogGlownyBox width:940px;

Nowy podział kolumn

#BlogBodyBoxKolejnym etapem jest sprawdzenie jakiej szerokości są istniejące na blogu dwie kolumny i sprawdzenie czy przy elemencie nadrzędnym dla kolumn a podrzędnym w stosunku do głównego kontenera nie są opisane margin, border, padding i width. Tym elementem w przypadku starego kodu zawsze będzie #BlogBodyBox.

Szeroką szpaltę zostawiamy w spokoju. Nie zmniejszamy marginesów czy dopełnień - odstępy są bardzo ważne. Jeżeli brakuje ci trochę pikseli albo uważasz, że szeroka szpalta jest za szeroka to oczywiście możesz odjąć nieco od wartości width. Nie polecam natomiast poszerzania szerokiej gdy chce się dodać trzecią kolumnę. Może się zrobić okropnie ciasno.

W moim przykładowym szablonie (09 ampla zielony) na razie mogę zostawić w spokoju zarówno #BlogBodyBox i #BlogSzerokaSzpalta. W związku z tym, że poszerzyłam blog o 190px a obecna na blogu wąska szpalta ma 200px to pojawiła się mała dysproporcja. Jeżeli jeszcze weźmiemy pod uwagę że nowa kolumna też musi mieć odpowiedni odstęp od szerokiej szpalty to dysproporcja się zwiększa. Zazwyczaj polecam asymetrię, nie jest tak krzykliwa jak symetria i pozwala lepiej skupić się na treści bloga. Dzisiaj jednak pokazuję jak zrobić symetryczny układ więc musimy policzyć boczne kolumny na nowo. Tak aby wyszły nam równej wielkości boczne szpalty.

Zaczynamy od zsumowania dostępnego dla bocznych szpalt miejsca. Dodajemy do siebie liczbę pikseli o którą zwiększyliśmy bloga i szerokość wąskiej szpalty. Odejmujemy od tego 40px na symetryczny odstęp (40px to aktualny odstęp pomiędzy wąską a szeroką, musimy zrobić z drugiej strony taki sam). Dzielimy teraz tą liczbę na pół, no bo w końcu potrzebujemy zrobić dwie kolumny.

#BlogWazkaSzpalta

Mamy już poszerzony blog i mamy nowe wielkości dla bocznych kolumn. Mamy też zaplanowany odstęp pomiędzy nową kolumną a szeroką szpaltą. Czyli wszystko jest - możemy zacząć wpisywać to do szablonu. Poza wpisaniem nowych szerokości dodamy jeszcze odstęp odsuwający szeroką od lewej krawędzi tak aby powstało miejsce na lewą kolumnę i poprzez pozycjonowanie absolutne umieścimy tam wąską szpaltę.

Ilustracja obok pokazuje poszczególne etapy zmian i może w takiej bardziej wizualne formie będzie ci łatwiej zrealizować plan dodania trzeciej kolumny.

wersja graficzna1. poszerzenie bloga

#BlogGlownyBox {
 width:940px; /* wcześniej było 750px */
}

2. zwężenie bloksowej treści wąskiej szpalty

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 width:175px; /* wcześniej było 200px */
}

3. odsunięcie szerokiej szpalty od lewej krawędzi

#BlogBodyBox {
 padding:0 0 0 175px; /* wpisałam tylko tyle ile ma przenoszona kolumna bo odstępy wpiszę gdzie indziej */
}

4. określenie względem czego będziemy pozycjonować

#BlogGlownyBox {
 position:relative; /* w moich szablonach niemal zawsze jest ale lepiej się upewnij */
}


5. ustalenie wysokości części tytułowej (nagłówka)

#BlogTytulBox {
 height:200px; /* tutaj to tylko wysokość w innym szablonie mogą też być ramki, marginesy i dopełnienia */
}

6. nowe określenie pozycji bloksowej wąskiej szpalty

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 position:absolute;
 top:200px; /* wysokość całości nagłówka */
 left:20px; /* dopełnienie głównego kontenera */
}


7. dodanie odstępu pomiędzy przeniesioną szpaltą a szeroką

#BlogSzerokaSzpalta {
 margin:0 40px 0 40px;
}

I gotowe.


Powyższe cechy dostosowałam do szablonu typu AMLPLA. Z pewnymi modyfikacjami można je wykorzystać jako bazę dla przeniesienia wąskiej szpalty w dowolnym szablonie. Najlepiej jeżeli cechy te będziesz opisywać tam gdzie już są wpisane te selektory, pozwoli ci to na bieżąco kontrolować wygląd szablonu. Jeżeli jest jo jednak jedyna zmiana jaką planujesz w szablonie i masz problem z odnalezieniem w kodzie tych wszystkich selektorów to wystarczy jak powyższe style wpiszesz na koniec arkusza.

UWAGA!!! Najlepiej będzie jeżeli wpiszesz te cechy własnoklawiszkowo, unikniesz wtedy przypadkowego skopiowania niewłaściwych znaków, które mogą zakłócić działanie kodu. Wszak nie wszystkie znaki są widoczne. Ewentualnie możesz skopiować ten fragment kodu z czystego dokumentu tekstowego.

-- kod przenoszący wąską szpaltę do trzeciej kolumny --


Notki na powiązane tematy:

wtorek, 05 marca 2013, szablonykatemac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: , 91.90.74.*
2013/07/25 15:22:16
:) Hej, skorzystałam z instrukcji i stworzyłam trzecią szpaltę, jestem w tym skrajnie zielona ale jakoś się udało....
jest tylko jeden problem - wąskie szpalty są obok siebie
Mój blog jest lewostronny i wygląda to tak:
wąska szpalta: wąska szpalta: szeroka szpalta

Czy po takim opisie, mogłabyś pomóc mi odnaleźć błąd, lub wskazać co zrobiłam źle?

od razu wielkie dzięki. pozdrawiam
-
kate_mac
2013/09/04 09:35:58
@Gość
Jak rozumiem chcesz mieć blog o układzie trzykolumnowym symetrycznym. W taki przypadku lepiej zaczynać od układu w wąską szpaltą po prawej.
Jeżeli chodzi o to co poszło nie tak to odpowiedz jest dość oczywista: skoro Twoja wąska szpalta jest po lewej to robiąc miejsce po lewej stronie bloga i przenosząc tam elementy uzyskasz układ wąska-wąska-szeroka.
W moim przykładzie szpalta z treścią poboczną jest po prawej więc robiąc miejsce po lewej uzyskuję układ symetryczny.
Jeżeli zamierzasz pozostać przy układzie HTML gdzie treść poboczna jest w lewej kolumnie to korzystając z tej instrukcji musisz robić wersję lustrzaną czyli jeżeli ja robię miejsce po lewej to Ty po prawej, etc.

W tym momencie jednak wydaje mi się, że najlepszym i najprostszym rozwiązaniem będzie jeżeli
1. skopiujesz zawartość swojego arkusza CSS do notatnika
2. przejdziesz do szablonów podstawowych (tych bloxowych) i odszukasz szablon, który ma analogiczny układ dla Twojego tylko na odwrót (na końcu wspomnianej notki jest tabela, która pomoże Ci wybrać); zapiszesz zmiany
3. wrócisz do arkusza CSS, wykasujesz wszystko co tam jest (teraz tam jest kod bloksowego szablonu) i wkleisz kod, który masz skopiowany do notatnika; zapisujesz zmiany i sprawdzasz co z tego wyszło

Powinno być ok. Zapewne przy szablonie z wąską po prawej łatwiej będzie Ci korzystać z powyższej instrukcji (ta notka). Jeżeli jednak szablon wygląda gorzej niż na początku to wróć do poprzedniej bazy i swojego kodu CSS (tego co kopiowałaś do notatnika).
Pamiętaj bay zawsze robić sobie kopię stanu aktualnego zanim zaczniesz wprowadzać zmiany. To pomoże Ci powrócić do bezpiecznej sytuacji gdy zmiany nie pójdą po Twojej myśli a jednocześnie zawsze będziesz mogła zacząć jeszcze raz.
Jeżeli nasz jakiś pytania to zostaw je tutaj w komentarzu, postaram się odpowiedzieć tylko nieco łatwiej by było gdybym mogła zobaczyć blog o którym mowa więc link w nagłówku komentarza będzie milewidziany.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...