style kate mac

Blog o stylowaniu bloksowych szablonów, tych na nowym kodzie. Szablony udostępnione bez ograniczeń i za darmo, porady, instrukcje i trochę lania wody z innej beczki. Zapraszam.

Wpis

wtorek, 22 listopada 2011

05 Klasyczny, granatowy

Postanowiłam zmienić kolor klasycznego na bardziej atramentowy ale wyszedł indygo. I dobrze bo taki modny kolor fajnie pasuje do bardzo tradycyjnego wzoru tego szablonu. Pisałam poprzednio, że powodem jest klasyczny. To jak najbardziej prawda. Taki klasyczny szablon jest chyba na każdej platformie blogowej, widziałam chyba kilka na bloggerze i wordpress.com, stary bloksowy kod ma szablon klasyczny a dla kodu new_age nowego klasyka popełniłam ja czerpiąc podstawy z każdego dostępnego mi źródła (w tym wspomniane wyżej szablony klasyczne z różnych platform).

05 szablon klasyczny, granatowy

05 szablon klasyczny, granatowy,
na nowym kodzie, dla blogów na blox.pl. -600px- 

Stosunkowo szeroki szablon, zmieszczą się w nim ilustracje szerokości 600px i będą miały rameczkę. W szablonie można w łatwy sposób umieścić poziome górne menu z dowolną zawartością. Miejsce jest przygotowane tak aby szablon wyglądał dobrze zarówno z menu jak i bez niego.

Szablon ma bliźniacze projekty: brązowy i oliwkowy. Korzystając z dokładnych instrukcji dla subtelnego można bez problemu zmienić położenie wąskiej szpalty (lewostronny) albo można też skorzystać z gotowca umieszczonego w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Można też sobie wymienić tło.

Tą wersję szablonu klasycznego robiłam dwa razy, pierwsza była raczej czerwona. Za bardzo jednak przypominała oryginalny bloksowy klasyczny i nic nowego nie wnosiła więc skasowałam ją. Zamiast tego zrobiłam granatową kolorystykę, barwa bardzo piśmiennicza.

Adres szablonu: http://style05katemac.blox.pl

fragmenty szablon 05 klasyczny

Uwagi o szablonie
szerokość szablonu 900px
szerokość głównej szpalty 610px
szerokość bocznej szpalty 190px
kolor tła jasne z gradientem (#f8f0d1)
kolor tekstu czarny (#000)
kolor linków granatowy (#110055)
pozostałe kolory fioletowy (#3B0055), jasny brąz (#76675A)
krój użyty w notce Georgia
wielkość tekstu notki wartość względna: medium (ok. 16px)
interlinia w notce wartość względna: 1.4em
maksymalna wielość elementów graficznych w notce 600px
css-owe ramki przy grafikach tak
border: 1px solid #dac6a4;
padding:4px;
background:#f8f0d1;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, lewa ramka
nagłówki w notce (h1, h2, h3, h4, h5, h6) h3 - większy rozmiar (1.4em); odstęp górny i dolny, kursywa
wyróżnienie akapitów odstęp po 10px od góry i dołu
baza bloksowa nowy kod: new_template7nowy kod, szablon new_template7
skrypty użytkowników, wklejki Ostatnie komentarze,

dodatkowe klasy i identyfikatory

#menu-top - górne menu (długość 870px)

.kont - kontener z treścią w bocznej szpalcie
h2 - etykieta tytułowa boksów w bocznej szpalcie

Klasyczny jest typem wertykalnym. Jest bardziej podzielony w pionie (boczne tło, szpalty) a część tytułowa jest mniej wyraźnie oddzielona od części z treścią. Głównym ozdobnikiem jest tapetka w tle.

Wzorek w body jest staroświecki i liściasty, nadaje mu to bardziej zdobny charakter i w największym stopniu decyduje o klimacie. W połączeniu z fioletowo-granatowym odcieniem niebieskiego daje to jednak bardziej współczesny styl. Wystarczy jednak wymienić wzorek aby nawet diametralnie zmienić szablon. Proponuję oczywiście alternatywy w bardzo różnym klimacie. Aby wymienić wzorek wystarczy własny nazwać tak samo jak ten na blogu (k5_bg.jpg) i dodając go do zasobów zaznaczyć opcję nadpisz. Albo zmienić adres wywoływania pliku tła w kodzie css szablonu. Wzorek tła przypisany jest zaraz w body.

oryginalny wzorek szary regularny drobny jednolity jaskrawy rękodzielnicze paski rachityczne kwiaty

wizualizacjaMożna też bardzo łatwo zmienić stronność szablonu. Jak umieścić wąską szpaltę po lewej pisałam w przypadku szablonów subtelnych. Dokładnie ta sama instrukcja zadziała równie idealnie więc samodzielnych odsyłam do niej. W razie jakiś wątpliwości proszę pytać tutaj albo w komentarzach pod notką o zmianie stronności w subtelnych. Układ jest mniej więcej taki sam jak w subtelnych (float:left; zmieniamy na float:right;). Odstępy tutaj też są symetryczne i jedyna różnica polega na kreseczce pomiędzy szpaltami. To jest border-right i wystarczy go zmienić na border-left aby była po lewej stronie głównej szpalty.

Dla zniecierpliwionych mam wersję gotową do użycia. Aby z niej skorzystać należy:

  1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. new_template7upewnić się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmienić szablon na ten właśnie)
  3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem: lewostronny klasyczny granatowy

wizualizacjaKlasyczny może być też szablonem jednokolumnowym. Zmiana także jest niemal dokładnie taka sama jak w przypadku szablonów subtelnych więc samodzielnym wystarczy instrukcja z subtelnego. Kreseczkę rameczki można zmienić na dolną border-bottom. Najważniejsze jednak jest policzyć szerokość elementów do dolnej bocznej szpalty. Całość tym razem mieści 840px.

Cztery kolumny: 840px/4=210px
200px szerokość (width:200px;)
10px prawe dopełnienie (padding:0 10px 0 0;)

Trzy kolumny: 840px/3=280px
270px szerokość (width:270px;)
10px prawe dopełnienie (padding:0 10px 0 0;)

Można też sobie oczywiście poustawiać elementy treści pobocznych tak jak to opisywałam w przypadku subtelnego: można ukryć archiwum, przenieść szukacza, poszerzyć tagi, zakładki albo miejsce na dodatki.

Dla mniej samodzielnych przygotowałam gotowca. Jest to kod dla szablonu jednokolumnowego z poprzesuwanymi niektórymi elementami z szpalty bocznej: zmieniłam wygląd archiwum, przeniosłam szukacza, poszerzyłam miejsce na tagi, zakładki i dodatki. Aby skorzystać z gotowego kodu należy:

  1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. new_template7upewnić się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmienić szablon na ten właśnie)
  3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem: jednokolumnowy klasyczny granatowy

Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami do innych notek:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
wtorek, 22 listopada 2011 11:16

Opcje


Trackback

Komentarze

Dodaj komentarz

  • karolinarydzinska napisał(a) komentarz datowany na 2012/01/19 15:16:32:

    Skorzystałam z tego szablonu. Dziękuję i pozdrawiam

  • karolinarydzinska napisał(a) komentarz datowany na 2012/01/23 19:11:20:

    Wysłałam Ci jeszcze maila z zapytaniem o możliwości dodania zdjęcia, jeśli możesz to odpisz :)

Dodaj komentarz

Wyszukiwarka

Kanał informacyjny

Related Posts Plugin

Opcje Bloxa