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

środa, 06 czerwca 2012

11 z szukaczem, szary

O co chodzi z tym skomplikowaniem szablonu, o którym wspomniałam w poprzedniej notce? To nic rewolucyjnego, raczej kwestia mojego podejścia. Projektując dla konkretnej osoby, na bloga, który już istnieje wiem jak dana osoba pisze, czy tytułem jest jedno słowo czy całe zdanie, czy kategorii jest dużo, czy są one wielowyrazowe, etc. Nie są to najniezbędniejsze informacje ale pomagają kreślić, które pomysły nie sprawdzą się w danym przypadku. Projektując darmowe, ogólnodostępne szablony muszę uwzględnić wszystkie możliwości więc większość niecodziennych pomysłów odpada. No bo może ten prosty szary szablon przyda się komuś kto nie chce mieć wyszukiwarki na blogu... i co wtedy?


11 z szukaczem, prosty (szary)

11 szablon z szukaczem, prosty (szary),
na nowym kodzie, dla blogów na blox.pl. -600px- 


Bez włączonej wyszukiwarki szablon też będzie wyglądał poprawnie ale szukacz tutaj jest jednym z najbardziej wyrazistych elementów więc bez niego to będzie zupełnie inny szablon. Określone jego cechy pozostaną jednak niezmienne: zmieszczą się w nim ilustracje szerokości 600px a i szersze nie będą się prezentować źle, 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: dekoracyjną słoneczną, ozdobioną wycinankami i równie ozdobną ale w podniszczonym stylu wersję nie-słodką. Tym razem nie przygotowałam alternatywnych wersji stronności. Ten projekt najlepiej sprawdzi się w takim właśnie układzie w jakim jest widoczny na testowym blogu.

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

fragmenty szablon 11 szary

Uwagi o szablonie
szerokość szablonu 990px
szerokość głównej szpalty 660px
szerokość bocznej szpalty 300px
kolor tła szare (#e5e5e5)
kolor tekstu ciemno szary (#464646)
kolor linków magentowy (#e43059)
pozostałe kolory czarny (#000), niebieski (#413f73)
krój użyty w notce w zależności od systemu Corbel albo Trebuchet MS
wielkość tekstu notki 16px
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 każdym 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.

Nie przygotowałam ani wersji jednokolumnowej ani prawostronnej. Ich wykonanie będzie prostsze niż w przypadku szablonu słonecznego ale w dalszym ciągu uważam, że w takim kształcie szablon wygląda najlepiej. W wersji prawostronnej tytuł znajdzie się w niewłaściwym miejscu więc jej nie polecam. Co najwyżej opcję jednokolumnową (jak ją zrobić opisałam dla szablonu subtelnego, wielu różnic w instrukcji nie będzie) która powstanie już w momencie poszerzenia części z treścią główną (zostaje jeszcze zająć się treścią poboczną).


 

Szablon chociaż nie całkiem prosty wygląda bardzo prosto. Głównymi ozdobami są ikonki (wspominałam o nich ostatnio na blogu szablonowym, ich autorem jest Tomas Gajar i udostępnione one zostały na stronie Smashing Magazine: Freebie: Free Vector Web Icons). Miałam z nimi duży problem i to one były powodem wielu opóźnień, zupełnie nie wiedziałam co zrobić z informacjami pod notką: chciałam mieć tam te ikony ale nie chciałam bałaganu i chaosu

W tle dla body (czyli dookoła bloga) umieściłam szary wzorek udający fakturę papieru. W zasadzie można go wymienić na dowolny pasujący do pozostałych elementów. W praktyce jednak może to nie być najłatwiejsze zadanie. Należy uwzględnić zimną kolorystykę szablonu (odzienie szarości, niebieski, magentowy i czarny), wzorek nie może być zbyt wyrazisty, na jego te publikowana jest treść notek. Kategorie, zakładki i opcje bloksa mają elementy imitujące wypukłe przyciski zrobione dzięki dwóm ramkom, białej i szarej - kolor tła trzeba dobrać tak aby się nie gryzły (albo zmienić ramki).

Aby wymienić tło w body wystarczy wpisać nowy adres przy jego wywołaniu w arkuszu (zaraz na początku kodu) albo nadpisać plik w zasobach (nazywa się s11_bg.png i jest powtarzany we wszystkich kierunkach). Na początek przygotowałam kilka prostych ale kompatybilnych z kolorystyką szablonu propozycji.


Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
środa, 06 czerwca 2012 23:33

Trackback

Komentarze

Dodaj komentarz

  • walesblog napisał(a) komentarz datowany na 2012/12/06 19:28:20:

    biorę szablonik, walesblog.pl

  • vegazone napisał(a) komentarz datowany na 2013/09/20 07:49:53:

    Po skopiowaniu szablonu nie wyświetla się szukacz. Wygląda to tak: hotandsweet.blox.pl/html

  • vegazone napisał(a) komentarz datowany na 2013/09/20 19:32:57:

    spoko, już wiem o co kaman

  • vegazone napisał(a) komentarz datowany na 2013/09/29 17:17:56:

    Pobieram i dziękuję: vegazone.blox.pl/html

Dodaj komentarz

Wyszukiwarka

Zakładki

Kanał informacyjny

Opcje Bloxa