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

Wpisy z tagiem: trzecia samoistna

wtorek, 05 marca 2013

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:

sobota, 30 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Typography wcześniej nie istniał, na jego miejscu był City Under Heat. Bardzo fajny, jeden z moich ulubionych ale także jeden z najmniej popularnych. W podobnym klimacie jak dawny City są Kultivating czy New Tech Earth więc bez problemu można do któregoś z nich wstawić sobie nagłówek City Under Heat.


top 10 - Typography

Szablon top 10 - Typography, elastyczny,
na starym kodzie, dla blogów na blox.pl. -500px- 


Jest to kolejny szablon o zmiennej szerokości, reagującej na dostępną szerokość ekranu. Początkowo były to tylko dwie wersje: pierwsza dla starych przeglądarek i małych ekranów i druga gdy miejsca jest dość aby pojawiła się trzecia kolumna. W ostatniej chwili zdecydowałam się dodać jeszcze jedną wersję aby poluzować jeszcze bardziej szablon. Wszystko tutaj jest bardzo kontrastowe, czarno-białe i jak zwykle nieco inaczej będzie wyglądało na docelowym blogu.

niedziela, 08 listopada 2009

Pomysł na ten szablon miałam od bardzo dawna. To aktualnie jest mój ulubiony koncept i zastanawiałam się nawet czy nie zrobić sobie szablonu w tym stylu na główny blog z szablonami. Nie zrobiłam tylko dlatego, że byłoby to za dużo zachodu... wszystkie rzeczy na nowo układać sobie. Teraz nie zrobię bo mam już nowy pomysł i choć wymaga układania to nie spieszy mi się z jego wdrożeniem więc na wszystko znajdzie się czas.

Szablon ornament pojawi się w wielu wersjach (no bo skoro jest już moim ulubionym to pobawię się nim trochę). Niebieski i różowy idą na początek ponieważ powstały pod adresami istniejących już szablonów.

13 szablon po i przed 16 szablon po i przed

13 był kiedyś ładnym, dość szerokim żółto-niebieskim szablonem. Mogłabym go uznać za udany wyrób gdyby nie dziwny błąd w IE - do tej pory nie wiem dlaczego tak się działo ale szablon wyłączyłam z użytku bardzo dawno temu więc nikomu go brakować nie powinno.
Tworząc nowy projekt postanowiłam zachować niektóre charakterystyczne cechy szablonu i wykorzystać je w połączeniu z nowymi pomysłami. Z poprzedniego szablonu zachowałam żółto-niebieską kolorystykę ale zmieniłam jasność, teraz jest to szablon ciemny. Zachowałam też czcionkę: Georgię. To bardzo wygodny krój szeryfowy o dużych oczkach i wyraźnych literach.

Z innych rzeczy zostawiłam wygląd wąskiej szpalty, oczywiście uwzględniając poważne zmiany związane z nowym pomysłem.

13 szablon ornament - niebieski
13 szablon ornament - niebieski

16 szablon zdecydowanie należał do najmniej lubianych przeze mnie. Był ciemny, ciężki i mimo zastosowania tylko odcieni jasnego różu i magenty szablon był pstrokaty. W zasadzie poza jasno-różowym i magentą nic nie zostało ze starego szablonu. I dobrze. Nowy jest bliźniaczym szablonem niebieskiego. Drugą różnicą obok kolorów jest czcionka, chciałam aby obok szeryfowego niebieskiego pojawił się bezszeryfowy różowy. Wybrałam krój "Lucida Sans Unicode" ale nie dla każdego będzie on widoczny.

16 szablon ornament - różowy
16 szablon ornament - różowy

Uwagi:

  • drzewoGłównym wyróżnikiem tych szablonów będzie rachityczne drzewo.
  • Miejsca na kategorie jest sporo, tytuł też nie musi być maleńki. Jeżeli jednak przyjdzie Ci do głowy zmienić grafikę w tle tytułu pamiętaj uwzględnić miejsce na kategorie.
  • zdjęcia umieszczane notce nie powinny być większe niż 500px w szerokości, choć wydaje mi się, że nieco mniejsze nawet lepiej by tu wyglądały
  • szablon jest zrobiony z myślą o FotoForum choć później pomysł przetwarzałam kilka razy: oba są dostosowane do całkiem sporej liczby skryptów
  • TrzeciaSzpalta zrobi się w zasadzie sama choć polecałabym ją ubrać w diva o identyfikatorze Trzecia
    <div id="Trzecia">Tutaj cały kod html wklejony w bocznej szpalcie</div>
    różnica będzie widoczna w odstępie od dolnej krawędzi niebieskiego pola tytułowego; moim zamierzeniem było aby trzecia kolumna zaczynała się niżej niż druga ale i bez tego będzie wyglądać dobrze
  • To o czym koniecznie trzeba pamiętać to to, że dodatki dodawane na blogu z tym szablonem muszą być wąskie: 150px. Tylko tyle jest tam miejsca.
  • ten szablon całkiem przyzwoicie nadaje się do wyświetlania reklam; wąska szpalta jest przesunięta więc wszystko co wyświetla się zazwyczaj pod nią będzie teraz obok
Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...