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

Cudzesy: pomarańczowy szablon pełen dodatków

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. Inspiration był ciekawym szablonem, nie całkiem typowym dla mnie ale także nie było w nim nic niezwykłego. Ani najczęściej pobierany, ani najczęściej oglądany... dodatkowo jego popularność malała szybciej niż pozostałych cudzesów. Jego jaskrawa kolorystyka jest u mnie rzadkością więc postanowiłam nie tylko zostawić tą kolorystykę ale także podkreślić ją i wzmocnić. Efekt wyszedł zdecydowanie intensywnie. Szablon jest nietypowy, bardzo różnorodny i charakterystyczny. Nie każdemu przypadnie do gustu ale ma w sobie spory potencjał.


top 04 - Inspiration

Szablon top 04 - Inspiration, pomarańczowy,
na starym kodzie, dla blogów na blox.pl. -565px-


Dużo się w nim dzieje ale w rzeczywistości wygląd w dużej mierze zależy od wykorzystanych elementów. Bez dodatkowych menu, bez kontenera z linkami do ostatnio opublikowanych notek szablon będzie wyglądał znacznie spokojniej. Jeżeli wymienisz sobie top i wstawisz tam jedno bądź kilka zdjęć zamiast różnokolorowych maźnięć farbą to uzyskasz zupełnie inny efekt.

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

fragmenty szablon top 04 - Inspiration

Uwagi o szablonie top 04 - Inspiration
szerokość szablonu 870px
szerokość części na notkę 600px
szerokość pobocznej szpalty 250px
kolor tła białe (#fff) a w body grafitowe (#3a3a3a)
kolor tekstu czarny (#000)
kolor linków pomarańczowy (#FF7F00)
pozostałe kolory żółty (#FFB700)
krój użyty w notce PT Serif Caption (Bookman Old Style)
wielkość tekstu notki 14px
interlinia w notce wartość względna 1.5em
maksymalna wielość elementów graficznych w notce 565px
css-owe ramki przy grafikach tylko cień
box-shadow:0 0 3px #333,0 5px 50px -35px #333;
margin:5px 5px 0 0;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i jaśniejszy kolor, boczy pasek
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
h3 - większy rozmiar
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ść 570px)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

ikonkowe menu:
#mTwit ikonka z logo Twittera
#mFejs ikonka z logo Facebooka

#mLogo logo bądź tekst na wstążce po lewej

Szablon jest całkiem prosty ale tło przypisane nie całości ale poszczególnym elementom sprawia że szablon wygląda na dużo bardziej wypełniony. Bardzo wyraźnie są w nim podkreślone linki w notkach. Podświetla je żółte tło udając użycie podkreślacza. Jeżeli komuś to przeszkadza to wystarczy skasować poniższy fragment a arkusza szablonu i linki wrócą do swego zwykłego pomarańczowego koloru.

.BlogWpisTresc a, .WstepKomentowanegoWpisu a, .TrescKomentowanegoWpisu a, #StatycznaZawartosc a {
 padding:0 0.5ex;
 background:#FFDD00;
 color:#333;
 font-weight:bold;
}
.BlogWpisTresc a:hover, .WstepKomentowanegoWpisu a:hover, .TrescKomentowanegoWpisu a:hover, #StatycznaZawartosc a:hover {
 color:#000;
 background:#FF7F00;
}

Top ma własne indywidualne tło więc wymienić go równie łatwo ja w poprzednich dwóch cudzesach. Nazywa się Inspiration_blank.jpg i wystarczy go nadpisać albo wymienić jego adres w arkuszu. Odsyłam do skrótowego opisu przy szablonie Betsyness, tam można też znaleźć linki do bardziej szczegółowych instrukcji. Jest ta też podpowiedź jak zmienić kolor linków czy stronność szablonu.

W szablonie znajdują się dodatkowe ikonki Facebooka i Twettera ale tylko jeżeli w polu na kod HTML dodasz odpowiedni fragment kodu. Pierwszy raz takie manu dodałam w szablonie dashed więc tam znajduje się odpowiednio szczegółowy opis. Wystarczy, że linki do swoich stron na tych serwisach umieścisz w divach o identyfikatorach odpowiednio: mFejs i mTwit. Oczywiście jeżeli ich nie używasz to możesz sobie przerobić te elementy na coś innego.

Logo na pomarańczowej wstążce

wstążkaSpecjalnym elementem szablonu Inspiration jest logo na wstążce (ten pomarańczowy pasek po lewej w części tytułowej). To nie musi być logo, to może być dowolny element: napis, obrazek, cokolwiek. Ja jako tło wybrałam pasującą do szablonu pomarańczową wstążkę ale jeżeli chcesz to możesz nadpisać ją w zasobach własnym tłem (nazywa się t04_logo.png).

Jeżeli jednak takie tło Ci odpowiada to wystarczy, że w polu na kod HTML wpiszesz kod swojego elementu: może to być tekst albo niewielki obrazek-logo i cały ten element obejmiesz divem o identyfikatorze mLogo. Na poniższym obrazku przedstawiam przykładowy kod.

logo na wstążce z szablonu top 04 Inspiration

Pamiętaj o zamykaniu znaczników. Jeżeli chcesz aby element był linkiem zacznij od wstawienia znaczniku linku. Element ma w arkuszu opisane niewielkie dopełnienie, które sprawia, że ilustracja nie zaczyna się od krawędzi ekranu. Jeżeli potrzebujesz odsunąć nieco ilustrację czy tekst to proponuję użyć znacznika określającego punk złamania wiersza (br)

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.

Czcionka PT Serif Caption

Wybór kroju to chyba najbardziej kontrowersyjny element szablonu. Zależało mi na kroju o wyrazistym charakterze. Zastanawiałam się nad kilkoma rozwiązaniami i zdecydowałam się na font o bardzo wyrazistych grubych, belkowych szeryfach (tzw. egipcjankę, sylab serif). Taki krój ma bardzo afiszowy charakter i najlepiej pasuje do nagłówków. Z tych najpopularniejszych i najszerzej dostępnych najbardziej belkowate szeryfy ma Bookman Old Style - jest to ciekawy, nieco staroświecki krój, który ostatnio coraz częściej wykorzystywałam w szablonach rękodzielniczych. Zależało mi jednak na nieco nowocześniejszym wyglądzie dlatego na początek stosu wpisałam font, który nie jest tak powszechny ale jest darmowy, ogólnodostępny i zapewne kilka osób może zobaczyć szablon tak jak go wymyśliłam.

Jeżeli chcesz sprawdzić którą wersję wyświetla twoja przeglądarka to zerknij na poniższe linijki. Jeżeli masz zainstalowany dany font to zobaczysz napis nim zrobiony, jeżeli nie to tekst będzie napisany fontem Courier New.

top 04 Inspiration - PT Serif Caption

top 04 Inspiration - Bookman Old Style

top 04 Inspiration - Georgia

Moja pierwsza kontrowersyjna decyzja to wybór tak mało powszechnego fontu. Druga to pogrubienie go. PT Serif Caption, z tego co się orientuję, nie występuje w wersji pogrubionej a więc efekt osiągnięty jest dzięki przeglądarce - czyli coś z czym z zasady się nie zgadzam. Ale font PT Serif Caption jest bardzo atrakcyjny więc nie zamierzam z niego rezygnować. Jeżeli komuś jeszcze się podoba to zachęcam do pobierania. Szczególnie osoby, które piszą także w języku rosyjskim


sobota, 09 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Speed Test, 77.243.191.*
2018/07/25 12:46:56
Sat24, Sat 24
Pogoda, Prognoza pogody
National Forecast
Weather Forecast
Wetter, Wettervorhersage, Wetterbericht
Meteo, Previsioni Meteo Italia
Météo France
United Kingdom Weather
Clima de Espana
Väder
Australia Weather
Canada Weather
Vr
Vejr
Clima


Clima
Wetter
Weer
New Zealand Weather
Ireland Weather

Test prędkości internetu
Speedtest, Speed Test
DSL Geschwindigkeit testen
Test di velocit Internet
Test de velocidad
Test de vitesse Internet
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...