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

wtorek, 29 maja 2012

10 z szukaczem, słoneczny

Postanowiłam jednorazowo udostępnić bardziej skomplikowany szablon. Początkowo wszystkie trzy miały mieć dokładnie ten sam układ i różnić się jedynie wykorzystaną czcionką, kolorami, czy tłem. Okazało się jednak, że szkoda mi na to czasu. Jak ktoś będzie chciał sobie coś pozmieniać w szablonie to nie będzie potrzebował moich instrukcji więc nie muszę robić identycznych (od strony kodu) szablonów po to aby móc napisać jedną instrukcje dotyczącą wszystkich trzech szablonów. A dlaczego nie będzie potrzebował moich instrukcji? Bo jeżeli mają być dla bardzo zielonych to muszą być rozbudowane a więc będą zielonych zniechęcać. Nie-zieloni poradzą sobie świetnie sami. Zachęcam.


10 z szukaczem, ozdobny (słoneczny)

10 szablon z szukaczem, ozdobny (słoneczny),
na nowym kodzie, dla blogów na blox.pl. -600px- 


Stosunkowo 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. 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ą.

Szablon ma siostrzane wersje: prostszą szarą, ozdobioną ikonkami 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.

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

fragmenty szablon 10 słoneczny

Uwagi o szablonie
szerokość szablonu 990px
szerokość głównej szpalty 660px
szerokość bocznej szpalty 300px
kolor tła jasno żółte (#f3dc76)
kolor tekstu ciemno szary (#464646)
kolor linków niebieski (#413f73)
pozostałe kolory czarny (#000), morelowy (#e67e5a)
krój użyty w notce w zależności od systemu Constantia albo Georgia
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 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 10Nie przygotowałam alternatywnych wersji dla różnych stronności. W zasadzie bez większego bólu 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, chociaż wizualnie ma więcej sensu, to wymaga przygotowania nowych grafik do tła (w tym szablonie wszystkie te wcięcia i wstążeczki istnieją dzięki grafikom w tle).

tło głownej treści w szablonie 10

szukacz z szablonu 10

W tle dla body (czyli dookoła bloga) umieściłam żółty radialny gradient imitujący światło w okolicach tytułu notki. Polecam zostawić słoneczne tło ale w zasadzie jeżeli uda Ci się dobrać odpowiedni kolor, pasujący do morelowego i niebieskiego to nie widzę problemu wystarczy wpisać nowy numer koloru i wymienić plik z radialnym gradientem (nazywa się s10_bg.jpg). Na początek przygotowałam dwa delikatne żółte wzorki: lekko geometryczna tapetka i ryżowy wzorek udający papier. Oba mają się powtarzać na całej powierzchni bloga.

tapetkowy wzorek ryżowy wzorek udający papier

Tym razem raczej nie obejdzie się bez zajrzenia do kodu CSS. Zmieniając nie tylko grafikę ale i kolor należy to zrobić w arkuszu. Nawet jeżeli chcesz skorzystać z  moich dwóch żółtych propozycji to musisz zmienić powtarzanie tła. Więcej o właściwości tło możesz znaleźć na moim starym, szablonowym blogu, jest tam też część poświęcona powtarzaniu tła.


Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
wtorek, 29 maja 2012 16:35

Polecane wpisy

Trackback

Komentarze

Dodaj komentarz

  • eldka napisał(a) komentarz datowany na 2012/05/29 16:47:34:

    Już go sobie Kate wzięłam, zerknij, czy tytuł dałoby się w jednej linii zachować ?
    Dziękuję :)

  • kate_mac napisał(a) komentarz datowany na 2012/05/29 17:30:31:

    @eldka
    Nie bardzo rozumiem... Co wzięłaś i gdzie mam zerknąć? Ten słoneczny sobie wzięłaś i chcesz abym powiedziała Ci jak zrobić aby tytuł mieścił się w jednej linii??? Jeżeli tak to odpowiedz brzmi:
    W arkuszu CSS znajdź fragment opisujący tytuł blogu. W nowym kodzie jest to #nazwa-bloga. Jeżeli jest tam opisany rozmiar kroju (font-size) to zmniejsz jego wartość. Ja najczęściej używam jednostek względnych: 3em oznacza wielkość trzy razy większą od rozmiary podstawowego jaki wybrałam dla tekstu w tym szablonie. Popróbuj mniejsze: 2.8em 2.4em 2em... aż zobaczysz, że wielkość tytułu ma odpowiadający Ci wygląd.

    #naglowek #nazwa-bloga {
    font-size:3em;
    line-height:1.0em;
    }

  • eldka napisał(a) komentarz datowany na 2012/05/29 19:16:32:

    Tak właśnie ! :) Dziękuję.

  • avo_lusion napisał(a) komentarz datowany na 2012/06/07 21:47:22:

    Robi wrażenie:) To rzeczywiście wyższa półka!

  • sylka_rafcio napisał(a) komentarz datowany na 2013/02/14 17:45:21:

    Świetny szablon, skopiuję do siebie sylkahaha.blox.pl/html DZIĘKUJĘ

Dodaj komentarz

Wyszukiwarka

Zakładki

Kanał informacyjny

Opcje Bloxa