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, 29 listopada 2011

06 Klasyczny, oliwkowy

Najbardziej klasyczny z klasycznych. Wyblakła oliwkowa zieleń wygląda bardzo naturalnie i antycznie. W wielu miejscach w szablonie użyłam wersalików. To oczywiście nie pierwszy raz ale chyba po raz pierwszy w tak wielu miejscach. Podobnie jest z ilością światła między literami. Poszerzyłam odstępy znacznie co chyba najbardziej podkreśla antyczny charakter. W takim połączeniu traci się nieco na czytelności więc nie polecałabym w przypadku żadnych dłuższych tekstów (długi opis to ryzykowna rzecz). Krótkie frazy pisane wersalikami mogą zyskać nawet na rozświetleniu. To taki starszy sposób podkreślania istotności (zamiast kursywy, pogrubienia czy podkreślenia).

06 klasyczny, oliwkowy

06 szablon klasyczny, oliwkowy,
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. Najłatwiej ze wszystkiego wymienić tło, można na własne ale i ja przygotowałam alternatywy.

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

fragmenty szablon 06 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 oliwkowozielony (#5b5031)
pozostałe kolory oliwkowozielony (#5f5835), jasny brązowy (#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 wzorek w tle.

Wzorek w tle jest staroświecki i liściasty, jest też bardzo ozdobny ale w stonowanej oliwkowej kolorystyce jest bardzo klasyczny, skromny i elegancki. Wystarczy jednak wymienić wzorek aby nawet diametralnie zmienić szablon. Proponuję oczywiście alternatywy w bardzo różnym klimacie można też dodać własny. Aby wymienić wzorek wystarczy własny nazwać tak samo jak ten na blogu (k6_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 oliwkowy

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 oliwkowy

Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
wtorek, 29 listopada 2011 15:30

Opcje


Trackback

Komentarze

Dodaj komentarz

  • madamfanaberia napisał(a) komentarz datowany na 2011/11/30 16:55:46:

    Jest mi niezmiernie miło poinformować Cię, że Twój blog został nominowany do konkursu na "najładniejszy design blogów Bloxa'. Po szczegóły zapraszam na Co kryje Blox?
    pozdrawiam

  • pinezka01 napisał(a) komentarz datowany na 2012/01/24 12:06:48:

    rewelacyjny blog!- skorzystam z jednego z Twoich szablonów a w dodatku go sobie zmodyfikuję dzięki Twoim wskazówkom:) jak zrobię jedno i drugie to dam znać oczywiście!

Dodaj komentarz

Wyszukiwarka

Kanał informacyjny

Related Posts Plugin

Opcje Bloxa