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

Glossy, osobliwie elastyczny trzyszpaltowiec

Chyba muszę się poważnie zabrać za notki o szablonach trzyszpaltowych. Z tego co wiem wszystkie działają tak jak trzeba. Nie jest też raczej problemem to, że używałam bardzo różnych metod na tworzenie trzeciej kolumny - zawsze starałam się choćby wspomnieć jak to jest zrobione. To co w pierwszej kolejności chcę zrobić z trzyszpaltowcami o ujednolicić identyfikatory i klasy jakimi je opisuję. I tyle tytułem wstępu zupełnie nie na temat. Pora na szablon.


08 szablon Glossy, czerwony

Szablon 08 Glossy, czerwony,
na starym kodzie, dla blogów na blox.pl. -500px- -540px-


Szablon jest z jednej strony oszczędny wyglądowo a z drugiej stylizowany odrobinę na web 2.0 ze szczególnym uwzględnieniem glossy. Miałam wiele wątpliwości tworząc ten szablon, chciałam aby wyglądem przypominał to co było modne pięć lat temu a jednocześnie nadawał się do użycia aktualnie. Myślałam, że to odrobinę aktualności zapewni poszerzenie szablonu ale akurat jego drobność była chyba najbardziej uniwersalnym atutem więc pozbywając się jej musiałam wymyślić coś nowego na zastępstwo.

Adres szablonu: http://08szablonkatemac.blox.pl

fragmenty szablon 08 Glossy

Uwagi o szablonie 08 Glossy, czerwony
szerokość szablonu 990px (318px/740px/990px/1150px)
szerokość części na notkę 550px (318px/500px/550px/550px)
szerokość pobocznej szpalty 160px (-/160px/160px/200px)
dodatkowa trzecia kolumna
(zależna od szerokości bloga)
200px (-/160px/200px/200px)
kolor tła białe (#fff) a w body czarne (#111)
kolor tekstu ciemny (#333)
kolor linków niebieski (#cc0000)
pozostałe kolory czarny (#000), jasnoszary (#ccc)
krój użyty w notce Segoe UI (Geneva, Verdana)
wielkość tekstu notki 12px (16px)
interlinia w notce wartość względna: 1.4em
maksymalna wielość elementów graficznych w notce 540px/500px
css-owe ramki przy grafikach tak
 background:#eee;
 border:#ccc 1px dotted;
 padding:4px;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie i kursywa
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
h3 - odstęp, powiększenie, kursywa
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Bbialy Białystary kod: 0Bbialy Biały
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 550px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

#Trzecia - opcjonalna trzecia kolumna, ustawiona dzięki pływaniu

ikonkowe menu:
#mTwit ikonka z logo Twittera
#mFejs ikonka z logo Facebooka
#mMail ikonka z symbolem koperty

O tym jak się głowiłam nad różnymi elementami napisałam w dwóch oddzielnych, raczej chaotycznych notkach. Jak kogoś ciekawi powstawanie tego szablonu to zapraszam, nie jest to jednak instrukcja jak zrobić taki szablon.

Proszę zwrócić uwagę na jego szerokość i układ elementów a następnie 'przywrócić w dół'. To jest właśnie specjalność tego szablonu. Zrobiłam go na wzór pierwotnych Glossy bo ten sam efekt można już uzyskać dzięki cechom z CSS3. Początkowo chciałam zachować ten szablon jako relikt stylu w wyglądzie stron jaki nosił nazwę web 2.0 - zmieniłam jednak zdanie. Relikty są osobliwe i gdy można już im nadać określenie retro to staja się nawet modne ale zanim to się stanie to są po prostu przestarzałe. Chciałam tutaj tego uniknąć dlatego to nie jest szablon jaki zrobiłabym w 2008 roku. 

I tak narodził się pomysł na zmienną szerokość bloga (która byłą zupełnie poza moim zasięgiem w 2008). Pomysł ciekawy, nawet nie trudny do zrealizowania tylko nieco bardziej pracochłonny bo wymagający przynajmniej częściowo zaprojektowania jakby kilku oddzielnych szablonów. W zależności od szerokości oka przeglądarki poszczególne elementy szablonu będą układać się w określonych miejscach.

  • do 320px - to raczej eksperyment bo blox dysponuje już opcją mobilną ale aby trochę pobawić się zrobiłam i dla takich wymiarów
    • wąska, trzecia (#Trzecia) i opcje bloksa nie wyświetlają się
    • wyszukiwarka jest nad tytułem a dodatkowe górne menu (#menuTop) na dole
  • od 768px - czyli dla starych rozdzielczości 800x600 i dla opcji portretowej 768x1024
    • szablon jest dwukolumnowy
    • wąska i trzecia wyświetlają się jedna pod drugą i mają 160px
    • większe niż 500px ilustracje w notce będą z niej nieco wystawać, ilustracje pozbawione są cssowych ramek
  • od 996px - opcja dla około 20% użytkowników polskiego internetu, który szerokość ekranu mają ustawioną pomiędzy 1024 a 1280
    • szablon jest trzykolumnowy, szpalty z treścią poboczną ustawione są dzięki pływaniu (jeżeli jest wystarczająco dużo miejsca dla trzeciej to wpłynie ona pomiędzy wąską a szeroką)
    • wąska dalej ma 160px
    • trzecia (#Trzecia) może zawierać elementy szersze, nawet do 200px
    • w notce jest przewidziane miejsce na ilustracje szerokości 540px
  • od 1280px - czyli maksymalna opcja, którą widzieć będą niemal wszyscy
    • szablon jest trzykolumnowy, szpalty z treścią poboczną ustawione są pływaniem
    • wąska zostaje poszerzona do 200px
    • trzecia (#Trzecia) dalej może zawierać elementy do 200px
    • w notce dalej jest miejsce na ilustracje o szerokości 540px; data wpisu i nazwa kategorii są wysunięte na lewo

Co zrobić aby pojawiła się trzecia kolumna

Konieczne jest spełnienie kilku warunków. Oczywiście w określonej sytuacji, w zależności od zawartości pola na kod HTML trzecia kolumna może się utworzyć sama. Zapewne będzie tak jeżeli w polu na kod wstawisz tylko sam zwykły tekst, bez żadnych znaczników. Rzadko się to jednak zdarza aby ktoś wstawiał sam goły tekst. Dlatego proponuję ubrać wszystkie elementy, które pojawić się mają w trzeciej kolumnie w div o identyfikatorze Trzecia. To powinno wystarczyć.

przykład kodu dla trzeciej kolumny

pływanieDrugi warunek to kolejność. Kod trzeciej szpalty powinien być wstawiony na początku pola na kod HTML. Działa to w ten sposób, że bloksowa wąska szpalta płynie na lewo i jeżeli następny element się zmieści to może wpłynąć po pomiędzy wąską a szeroką. Następnym elementem jest zaś wszystko co jest w polu na kod HTML, w takiej kolejności w jakiej jest to wpisane.

jak zrobić boksJeżeli chcesz uporządkować nieco treść w polu na dodatki proponuję użyć klas .boks i .tyt. Boks to będzie pojedynczy kontener, przykładowo cała lista ze spisem treści czy element zawierający zastrzeżenie typu copyright. Tyt natomiast to klasa, którą w szablonach na starym kodzie przypisuję etykietom tytułującym takie kontenery. W przypadku szablonu 08 pojedyncze pudełeczko boks zapewnia odstęp od sąsiednich elementów. Klasa dla tytułu powiększa nieco tekst, dodaje mu kursywę i jasne podkreślenie.

W skrócie dodawanie dodatkowych boksów opisane jest na stronie: Jak dodać dodatkowe boksy w bocznej szpalcie.

Chcesz skopiować przykładowy kod umożliwiający pojawienie się trzeciej kolumny? Zachęcam do skopiowania treści z pliku tekstowego i uzupełnienia go o własne informacje. Zmieniając pamiętaj tylko, że każdy otwarty znacznik musi posiadać zamknięcie. Polecam też mały pomocnik dla tworzenia dodatkowego kodu. W przykładowym kodzie umieściłam trzy kontenery aby można było porównać ich zawartość i sposób jej stworzenia.


środa, 16 maja 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
trabaya
2012/05/22 19:01:10
Witam, czy jest możliwość uzyskania Twojej pomocy przy zmianie szablonu? Jeśli tak, to czy mogę prosić o Twój adres e-mail? Napisałabym o co mi chodzi :-). Nie znam się na tym w ogóle i nawet z prostych instrukcji coś tam mi zawsze nie wyjdzie... Z góry dziękuję i pozdrawiam!
-
kate_mac
2012/08/21 18:25:20
@trabaya
Mój adres email do kontaktu jest na blogu. Polecam zajrzeć na stronę o blogu. Pytasz się o moją pomoc - z mojej strony nie ma przeszkód ale jeżeli oczekujesz, że Cię wyręczę to ja oczekuję za taką pracę wynagrodzenia. Pomoc natomiast jest za free.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...