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

poniedziałek, 18 czerwca 2012

12 z szukaczem, papierowy

Ostatni z szablonów z wyróżnionym szukaczem. Najmniej było tu drobiazgowych dopracowań, od początku wiedziałam, że jego głównym motywem będzie nawias klamrowy, bardzo popularny w scrapbookingu. To narzuciło wiele rozwiązań i pomysłów. Musiałam tylko zastanowić się, czy tak duża liczba klamer to nie za dużo. Moim zdaniem nie bo są użyte w bardzo różny sposób, co najwyżej zastanawiałam się czy akurat te sposoby są trafne...


12 z szukaczem, podniszczony (papierowy)

12 z szukaczem, podniszczony (papierowy),
na nowym kodzie, dla blogów na blox.pl. -600px-


Wyróżnienie szukacza jest głównym motywem tego szablonu ale jako że jest elementem opcjonalnym na blogu szablon równie dobrze wygląda z wyłączoną wyszukiwarką. Czerwony pasek jest zupełnie niezależny od wyszukiwarki. Jest całkiem szeroki szablon, zmieszczą się w nim ilustracje szerokości 600px, można w nim 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 siostrzane wersje: prostszą szarą, ozdobioną ikonkami i równie ozdobną ale nie tak zniszczoną wersję słoneczną. Tym razem nie przygotowałam alternatywnych wersji stronności. Ten projekt najlepiej sprawdzi się w takim właśnie układzie.

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

fragmenty szablon 12 papierowy

Uwagi o szablonie
szerokość szablonu 990px
szerokość głównej szpalty 660px
szerokość bocznej szpalty 300px
kolor tła jasno szare (#f6f6eb) a w body zielonkawo szare (#6c6f5c)
kolor tekstu ciemno szary (#464646)
kolor linków czerwony (#cd1c0c)
pozostałe kolory morelowy (#de2d1d), czarny (#000)
krój użyty w notce w zależności od systemu Bookman Old Style albo Georgia
wielkość tekstu notki 14px
interlinia w notce wartość względna: 1.4em
maksymalna wielość elementów graficznych w notce 600px
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
h3 - większy rozmiar (1.4em); odstęp, kursywa i graficzny wyróżnik
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ść 630px)

.kont - kontener z treścią w bocznej szpalcie
h2 - etykieta tytułowa boksów w bocznej szpalcie

elementy ukryte

data nad wpisem

archiwum w postaci kalendarza

archiwum w postaci listy miesięcy poza stroną główną bloga

Szablon z szukaczem jest typem wertykalnym. Jest bardziej podzielony w pionie (umieszczenie tytułu, szpalty). Miejsce na tytuł jest ograniczone w poziomie do szerokości węższej ze szpalt. Jest to układ, który na starym kodzie miał podstawowy szablon Zielony ale na nowym jest on osiągnięty zupełnie innymi metodami i nie ingeruje w rzeczywistą kolejność elementów. Bez względu na układ elementów, w przypadku każdego szablonu na nowym kodzie (new_age) najpierw na stronie ładuje się tytuł bloga, potem jego treść a na końcu elementy poboczne.

tytuł notki w szablonie 12Nie przygotowałam alternatywnych wersji dla różnych stronności. W zasadzie można przerobić szablon na prawostronny (korzystając z instrukcji dla subtelnego, z uwzględnieniem zmiany położenia szukacza i dodatkowego menu) ale moim zdaniem jest to niepraktyczne rozwiązanie bo umieszcza tytuł bloga (jego najważniejszą część) w prawym górnym rogu (w zasadzie o ile ta część nie jest wyróżniona to jest to 'ślepy punkt' stron, szuka się tam informacji dodatkowych a nie tytułu bloga).

Zmiana na szablon jednokolumnowy ma wizualnie więcej sensu (jak ją zrobić opisałam dla szablonu subtelnego, wielu różnic w instrukcji nie będzie)?. W szablonie słonecznym była trudna ze względu na graficzne krawędzie tła, tutaj jest łatwiej bo mimo iż krawędzie mają cień to jest on dziełem CSS a nie grafiki więc szerokość jest bardziej elastyczna. Wystarczy poszerzyć część z treścią główną, wąska przestanie się wtedy mieścić obok i zacznie być wyświetlana pod (zostaje jeszcze zająć się treścią poboczną, aby nie była to jedna wąska kolumna).

tytuł tło body tło wąska tło tło w html kategorie

W tle umieściłam kombinację plików. Zazwyczaj dla body określam tło dookoła bloga ale tym razem potrzebowałam jeszcze jednego znacznika więc sięgnęłam jeszcze wyżej do html, tam umieściłam ciemnozielonkawe tło o fakturze papieru a dopiero czerwony, poziomy pasek trafi do body. Polecam zostawić cały zestaw bo one się łączą. Aby czerwonego paska nie było pod tytułem bloga zakryłam je kolejnym plikiem w którym klamrami łączę zielonkawe i czerwone tło.

Oczywiście jeżeli chcesz sobie coś pozmieniać to nie widzę problemu i nie mam obiekcji. Możesz sobie pousuwać z zasobów te obrazki, które uważasz za niepotrzebne albo zbytnio wyróżniające się. Jeżeli uważasz, że czerwony pasek jest za bardzo to skasuj pliki o nazwach: s12_bg_pas.png, s12_tyt.jpg. Jeżeli pasek c się podoba ale nie chcesz tych klamerek pod tytułem to niepotrzebny jest plik s12_tyt.jpg, etc.

Jeżeli natomiast chcesz wprowadzić bardziej znaczące zmiany, zastąpić poszczególne tła własnymi to jeżeli mają zachowywać się tak samo to wystarczy, że nadpiszesz je w zasobach. Jeżeli natomiast zmieniasz nie tylko grafikę ale i kolor to należy zrobić w arkuszu. Więcej o właściwości tło możesz znaleźć na moim starym, szablonowym blogu. O linkach i ich wyglądzie było zaś całkiem niedawno tutaj, na tym blogu.


Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
poniedziałek, 18 czerwca 2012 16:15

Polecane wpisy

Trackback

Wyszukiwarka

Zakładki

Kanał informacyjny

Opcje Bloxa