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

Cudzesy: staroświecki szablon plastyczny

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Niektóre z cudzesów cieszyły się bardzo dużym uznaniem inne były używane rzadko. Jako pierwszy zaistniał The Magic Box. Był całkiem ładny ale ja nie przepadam za cyjanowymi odcieniami niebieskiego więc z chęcią dokonałam zmiany. Dodatkowym powodem był fakt iż szablon ten był najrzadziej pobieranym szablonem, a jego oglądalność znacznie spadła z biegiem czasu.


top 01 - Lucifix

Szablon top 01 - Lucifix, kolorowy,
na starym kodzie, dla blogów na blox.pl. -500px-


Nowy szablon też nie będzie moim ulubieńcem. To nie całkiem moja bajka ale taki nietypowy też się przyda. Polecam go w wersji bez opisu. Pamiętać też należy o tym, że miejsce na tytuł bloga jest ograniczone. Menu na notesie jest częścią oryginalnego projektu ja jedynie zmieniłam je tak aby mogło pełnić swoją funkcję. Wszystkie osobliwości tego szablonu wyjaśniam w dalszej części wpisu.

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

fragmenty szablon top 01 - Lucifix

Uwagi o szablonie top 01 - Lucifix
szerokość szablonu 840px
szerokość części na notkę 500px
szerokość pobocznej szpalty 250px
kolor tła białe (#fff) a w body morelowe (#f4e4c2)
kolor tekstu ciemny (#4e4037)
kolor linków brązowy (#753f1d)
pozostałe kolory fioletowy (#8b264f)
krój użyty w notce Trebuchet MS
wielkość tekstu notki 14px
interlinia w notce automatyczna
maksymalna wielość elementów graficznych w notce 500px
css-owe ramki przy grafikach tylko cień
 box-shadow:0 0 3px #753f1d;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i jaśniejszy kolor
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
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, zwinięte archiwum, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

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

menu na notesie
#mHome - link home
#mContact - link kontakt
#mAbout - link o blogu

Szablon ten, moim zdaniem, ma staroświecki, nieaktualny wygląd. Tęczowe plamy farby i menu na notesie są jednak całkiem atrakcyjnymi elementami więc mimo iż niezbyt nowoczesny to mam nadzieję, że szablon znajdzie użytkowników.

W szablonie niczego nie kombinowałam, jego wygląd dostosowałam do oryginalnej koncepcji topu. Etykiety tytułowe wyróżniłam dużymi literami a linki w notce podkreśleniem. Poza topem i ikonkami szablon ma bardzo spokojny i stonowany wygląd. Listę miesięcy w archiwum ułożyłam w chmurkę alby zajmowała połowę miejsca ale i tak polecam skrypt Szymona zwijający archiwum.

Miejsca na tytuł bloga jest niewiele. Top został w zasadzie zaprojektowany dla jednowyrazowego tytułu. W jednej linii zmieści się około dwudziestu znaków więc tyle bez problemu może być w tytule (wszystko zależy od użytych wyrazów). Jeżeli potrzebujesz więcej miejsca to zmniejsz górne dopełnienie i zwiększ jego wysokość (suma powinna zawsze wynosić 130px). Jeden wiersz to trochę więcej niż 20px. Aktualnie jest tak:

#BlogTytulText {
 height:60px;
 padding:70px 240px 0 240px;
}

Przy dwóch wierszach tytułu proponuję wysokość (height) zwiększyć do 80px a górne dopełnienie (padding) zmniejszyć do 50px. W przypadku trzech linijek to powinno być odpowiednio 110px i 20px.

Co zrobić aby pojawiło się menu na notesie

Litery menu na notesie mają nietypowy kształt, udający pismo ręczne. Nie byłby to mój pierwszy wybór bo krój ten ma, jak dla mnie, zbyt chaotyczny charakter ale to także może być jego zaletą. Jest to Alix2, który autor winiety tytułowej umieścił w projekcie. Zostawiłam menu na notesie, zostawiłam krój jakim jest napisane i tylko zmieniłam treść na bardziej polską („home” zostało bo „strona główna” ma za dużo liter).

Każdy z linków umiejscowiony jest osobno można więc zdecydować się na każdy z linków osobno. Aby pojawiły się na blogu należy w polu na kod HTML wpisać odpowiedni fragment kodu. Poniższa ilustracja przedstawia przykładowy kod, części podkreślone należy zastąpić własną treścią.

Menu na notesie

mHome to link Home zazwyczaj prowadzi z powrotem na stronę główną, w polu na adres należy więc wpisać adres własnego bloga; title wyświetla się w dymku narzędziowym więc pozwala na dodatkowe rozwiniecie treści - polecam więc wpisać wyjaśnienie co to za Home kryje się pod linkiem; sama treść jest tutaj mniej istotna bo szablon zastępuje ją ilustracją więc pojawi się tylko wtedy gdy szablon nie będzie wyświetlany

mContact to link Kontakt może to być zarówno link otwierający program pocztowy jak i odnośnik do strony gdzie zasady skontaktowania się z autorem są wyjaśnione - wszystko zależy od tego co wpiszesz w polu na adres; pozostałe podkreślone części tak jak w przypadku Home

Aby otwierał się program pocztowy w polu na adres wpisujemy zamiast protokołu http polecenie mailto a po dwukropku adres pod który te maile mają zostać wysłane. Żadnej spacji pomiędzy. Czyli w przypadku maila do mnie w polu adres wpisuję:
mailto:szablonykatemac@gmail.com

mAbout to link O blogu zazwyczaj prowadzi na osobną stronę gdzie znaleźć można informacje o autorze albo blogu; równie dobrze może prowadzić do jednej z notek w której znalazło się więcej informacji wyjaśniających cel bloga - wszystko zależy do wpisanego linku; proponuję title użyć jako dodatkowe wyjaśnienie

W szablonie opisane też jest bardziej uniwersalne górne menu a także dodatkowe klasy, które używam do uporządkowania elementów wpisywanych w polu na dodatki.


środa, 06 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...