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

04 Klasyczny, brązowo-bordowy

Szablon na nowym kodzie ale o realnie staroświeckim wyglądzie. Celowałam po części w antyk a po części w jego pochodne w postaci stylu klasycznego. Efekt jest nawet bardziej różnorodny gdy weźmie się pod uwagę od czego pochodzą kroje albo z czym kojarzą się kolory i wzory. Podstawowym powodem dla którego zrobiłam ten szablon jest bloksowy szablon o nazwie klasyczny (na starym kodzie). Na prywatnym blogu wybrałam go jako mój pierwszy szablon bo miał najbardziej papierowy wygląd chociaż mówiąc szczerze monotonność i jaskrawość bordowego bardzo mnie w nim drażniła. Dlatego mój klasyczny jest odrobinę bardziej brązowy.

04 szablon klasyczny, brązowo-bordowy

Szablon 04 klasyczny, brązowo-bordowy,
na nowym kodzie, dla blogów na blox.pl. -600px- 

Stosunkowo szeroki szablon zmieści zdjęcia szerokości nawet 600px i to z delikatną 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: granatowy i oliwkowy. Bez problemu można mu zmienić położenie wąskiej szpalty (lewostronny) korzystając z dokładnych instrukcji dla subtelnego albo skorzystać z gotowca 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. Są też alternatywne wersje tła do wymiany.

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

fragmenty szablon 04 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 bordowy (#5B211A)
pozostałe kolory 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 pionowo (boczne tło, szpalty) a część tytułowa jest mniej wyraźnie oddzielona od części z treścią.

Wzorek w tle jest staroświecki i liściasty, nadaje mu to bardziej zdobny charakter i w największym stopniu decyduje o klimacie. 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 (k4_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. 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łą 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 brązowy

wizualizacjaKlasyczny może być też szablonem jednokolumnowym. Zmiana także jest niemal dokładnie tak 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 brązowy

Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
wtorek, 15 listopada 2011 22:01

Opcje


Trackback

Komentarze

Dodaj komentarz

  • joannab_jb napisał(a) komentarz datowany na 2012/01/06 21:10:48:

    Dziękuję za wszystkie rady, porady, podpowiedzi. Za dużo zmian chciałam wprowadzić i naknociłam w kodach. Wczytałam jeszcze raz szablon i będę od początku, powoli go zmieniać. Jeszcze raz dziękuję za bardzo szybką odpowiedz.

  • stylekatemac napisał(a) komentarz datowany na 2012/01/07 00:29:16:

    @joannab_jb
    Proszę bardzo. Szybkość nie jest moją mocną stroną ;) po protu miałaś szczęście :D i trafiłaś na moment kiedy miałam ochotę poodpowiadać na komentarze

    Możesz szybko zmieniać szablon ale rób to dokładnie. Przeglądarka nie człowiek, nie domyśli się o co ci chodzi.

    Jeżeli będziesz miała pytania co do zmian to zapraszam, pomagam z chęcią. Jeżeli będziesz miała jakieś wątpliwości to z chęcią też podpowiem Ci które rozwiązanie wyglądowe jest lepsze. Czasami trudno coś przewidzieć a niespodziewanych kłopotów nikt się nie-spodziewa :D

Dodaj komentarz

Wyszukiwarka

Kanał informacyjny

Related Posts Plugin

Opcje Bloxa