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

Świąteczny szablon z reniferem na nowo

Ostatnio piszę, że poprawiam szablony. Najczęściej niewiele się to różni od robienia ich zupełnie na nowo. Staram się jednak na starym kodzie nie robić zupełnie nowych projektów a jedynie uaktualniać kod, usuwać nieatrakcyjne szablony i zastępować je inną wersją kolorystyczną jakiegoś popularnego projektu. Zdarzają się jednak radykalne wyjątki i szablony świąteczne takimi są. Jedyna rzecz jaka w dzisiejszym szablonie została to koncepcja renifera i kolor czerwony.

szablon świąteczny 02, czerwony

Szablon świąteczny 02 - Czerwony z Reniferem,
na starym kodzie, dla blogów na blox.pl. -550px- 


Poprzednia wersja szablonu była intensywnie czerwona, pełna jasnych, cienkich kreseczek i po pięciu latach zupełnie nieatrakcyjna. Renifera już na początku postanowiłam zostawić i tylko nie wiedziałam jak to zrobić. Przypomniał mi się pomysł z reniferem, który w porożu ma zaplątane światełka, niestety nic ciekawego i darmowego znaleźć nie mogłam więc zostałam skazana na własne wątłe umiejętności. Renifer się chowa za blogiem po pierwsze dlatego, że krępują go te wszystkie świąteczne ozdoby na głowie a po drugie dlatego, że rogi były absolutnie wszystkim na co mnie stać w dziedzinie rysowania.

Pierwszy szablon świąteczny z choinką też poprawiłam. Zapraszam do pobierania.

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

fragmenty szablon świąteczny 02

Uwagi o szablonie świątecznym 02 - czerwonym
szerokość szablonu 990px
szerokość części na notkę 550px
szerokość pobocznej szpalty 300px
kolor tła jasne (#ffeec8) zależne od grafiki w tle
kolor tekstu brązowy (#2c1200)
kolor linków czerwony (#ed1c24)
pozostałe kolory zielony (#68620e)
krój użyty w notce Constantia albo Georgia
wielkość tekstu notki medium (ok 16px)
interlinia w notce automatyczna
maksymalna wielość elementów graficznych w notce 550px (ilustracje się skalują)
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, zmiana koloru na zielony i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3, h4 - kursywa, powiększenie i zmiana koloru na zielony
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 660px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie najlepiej jeżeli ujęte w div o identyfikatorze #Trzecia
#menuIkon - górne menu z małymi obrazkami

Pierwsze dwa świąteczne szablony wyszły mi jakoś nieciekawie. Pierwszy, zielony z choinką cierpiał na brak koncepcji, był zwyczajnie nudny. Drugi, czerwony z reniferem miał odwrotny problem, za bardzo skupiłam się na koncepcie, na pomysłowym wyglądzie notek i tytułów, który może i był nieco nietypowy ale za to całość była toporna.

Nowa wersja szablonu z reniferem to połączenie początkowego założenia 'musi być renifer' z moimi skromnymi umiejętnościami (potrafię narysować tylko rogi) okraszone kombinowaniem jak ukryć całą resztę renifera, której nie potrafię w żaden sposób stworzyć. Z pomocą przyszedł szablon, który robię na nowym kodzie. Będzie gotowy dopiero za jakiś czas i do stworzenia tych wszystkich warstw tła używam w nim cech z CSS3. Tutaj poszłam na łatwiznę i cały ten notesowy wygląd umieściłam w trzech plikach graficznych - tak jak o robiłam zawsze. Od tego momentu renifer miał się gdzie chować i reszta poszła całkiem gładko.

Wymiana tła dookoła bloga

Szablony świąteczne z natury są bardzo tymczasowe postanowiłam więc zrobić je tak aby łatwo było pozbyć się bądź zastąpić świąteczne elementy. W tym szablonie zimowo-świąteczne jest tylko tło dookoła bloga (i pod tytułem) i chowający się renifer. Oba te bliki są niezależne od siebie i od innych plików tła.

wzorek z szablonu świąteczny 02 - Czerwony z ReniferemW tle dookoła bloga wyświetla się bardzo delikatny wzorek białych śnieżynek na blado-biszkoptowym tle. Ten wzorek ta ta część projektu, której najmniej jestem pewna ale nie chciałam umieszczać tu kolejnego ziarnistego, papierowego tła.

Wzorek łatwo można zastąpić przez nadpisanie pliku w zasobach (plik nazywa się bn2_bg.jpg; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo poprzez wymianę adresu wywołania w arkuszu CSS (grafika przypisana jest do elementu body).

Możesz wybrać dowolny wzorek, pamiętaj jednak, ze powtarzać się będzie on we wszystkich kierunkach więc wybierz coś co ma ładnie dopasowane krawędzie. W zasadzie wzorek może być zarówno bardzo jasny jak i bardzo ciemny. Jedyna rzecz to nie powinien być ani czerwony, ani zielony - te dwa kolory na raz zazwyczaj jedna wielka masakra.

Usunięcie reniferka

Reniferek z bombkami jest nieco mniej dosłowny niż choinka i w gruncie rzeczy ujdzie nawet latem (zaplątać się w lampki można o każdej porze roku, szczególnie jak się lubi grzebać tam gdzie się nie powinno) ale to koncepcja wymagająca odpowiednich wstępnych założeń. Najlepiej więc reniferka usunąć, schować albo tylko tymczasowo zastąpić. Metody tak jak poprzednio są dwie: nadpisanie i wymiana adresu.

Nadpisanie usuwa z zasobów istniejący plik i zastępuje go nowym musisz więc być pewnym, że chcesz się pozbyć reniferka. Renifer w tym szablonie nazywa się bn2_renifer.png więc pamiętaj aby swój plik nazwać dokładnie tak samo i zapisać jako png.

Drugi sposób, wymiana adresu, jest bardziej elastyczny. Pozwala nie tylko zachować reniferka na następne święta ale i wprowadzić kilka innych zmian. Renifer przypisany jest jako tło tytułowi. Wygląda to dokładnie tak:

#BlogTytulBox {
 padding:100px 370px 0 30px;
 height:230px;
 background: url(/resource/bn2_renifer.png) no-repeat bottom right;
}

Podkreślony fragment zastąp adresem własnej ilustracji. Możesz też po prostu skasować renifera i w tym miejscu nic nie będzie się wyświetlało - pusta przestrzeń to niemal zawsze dobre rozwiązanie. Jeżeli zdecydujesz się na własną ilustrację w tym miejscu to może być ona dowolnej wielkości czy kształtu. Jedyne ograniczenie to wymiary przestrzeni tytułowej (990×330px), które oczywiście zawsze można zmienić.

Menu z ikonkami

I na koniec wspomniane w tabelce ikonkowe menu - dodatek z małymi obrazkami linkującymi do różnych serwisów. Wkrótce zapewne pojawi się tutaj bardzo dokładna instrukcja ale póki co odsyłam na stronę z szablonem. Tam w jednej z notek opisałam ikonki, których serwisów są już w szablonie, jak z nich skorzystać i co zrobić aby dodać jakąś inną.

Co chwilę przybywa nowych serwisów więc próba opisania ich wszystkich czy choćby tylko najpopularniejszych jest z góry skazana na porażkę. W zależności od czasu poprawek opisane przeze mnie ikonki będą nawiązywały do określonych serwisów. Dlatego zawsze najlepiej sprawdzić to w pobieranym szablonie. Zawsze też można w analogiczny sposób dodać opisy nowych ikonek/serwisów.

soup.ioTumblrpinteresttwitterblipfacebook fanpagekontaktRSSzapisz się na newsletterblox.plszablonykatemac

W tym konkretnym szablonie umieściłam bardzo proste ikonki, które dopasowują się do szablonu dzięki cechom CSS: zaokrąglone rogi tworzą koła zamiast kwadratów a opcja przezroczystości pozwala wtopić ikonki w tło.


Przydatne wpisy:

 

piątek, 21 grudnia 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: , *.neoplus.adsl.tpnet.pl
2015/10/01 16:27:21
Biorę ten szablon na mojego nowego bloga -> christmastimee.blogspot.com/
-
2016/12/01 23:52:13
Pobrałam na bloga
pomojemu1986.blox.pl
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...