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, 04 października 2011

03 Subtelny, zgaszony pistacjowy

Szablon na nowym kodzie. Subtelny, pastelowy, tapeciarski. Trzecią wersję tego szablonu robiłam kilka razy, ta jest chyba trzecią kompletną. Próbowałam czarny ale z jasnym, żółtawym, liściastym jak jemioła wzorkiem i cyjanowy gdzie ciemnoniebieski, regularny wzorek umieściłam na blado-cytrynowym tle. Oba wyszły dobrze ale obiecałam sobie, ze tutaj nie będę szła na żadne ustępstwa. Szablon musi podobać mi się na tyle abym sama była gotowa z niego skorzystać. Tym razem nie będę próbować zgadywać co się masowo mogłoby spodobać albo eksperymentować z jakimiś połączeniami, które chociaż interesujące i atrakcyjne zupełnie nie są dla mnie...

03 szablon subtelny, zgaszony pistacjowy

Szablon subtelny 03 - zgaszony pistacjowy,
na nowym kodzie, dla blogów na blox.pl. -590px- 

Stosunkowo szeroki szablon zmieści zdjęcia szerokości nawet 590px. W szablonie można 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. Skrótowa instrukcja jest już gotowa ale może i coś dłuższego na ten temat napiszę.

Szablon ma co najmniej dwa bliźniacze projekty: brązowo-różowy, kwiecisty i burzowo niebieski, pikselowy. Na razie jest prawostronny, w przyszłości zmienimy mu stronność a także wypróbujemy w wersji jednokolumnowej gdzie wpisy będą bardzo szerokie. Przygotowałam też cztery alternatywne wzorki do nagłówka.

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

fragmenty szablon 03 subtelny

Uwagi o szablonie
szerokość szablonu 900px
szerokość głównej szpalty 590px
szerokość bocznej szpalty 260px
kolor tła jasne (#fff)
kolor tekstu grafitowy (#333)
kolor linków zgniłozielony (#49442D)
pozostałe kolory brązowy (665533#), zielony (#88aa44)
krój użyty w notce Times, 'Times New Roman'
wielkość tekstu notki wartość względna: 1.2 ze small (ok. 14px)
interlinia w notce wartość względna: 1.6em
maksymalna wielość elementów graficznych w notce 590px
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, zmiana koloru (#665533), kursywa
nagłówki w notce (h1, h2, h3, h4, h5, h6) h3 - większy rozmiar (1.4em); górny odstęp
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ść 860px)

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

Subtelny jest typem treść. Winieta, część tytułowa jest wyraźnie wyróżniona i ozdobiona ale to na części z treścią skupia się większa uwaga mimo, iż jest pozbawiona ozdób.

Szablon subtelny ma mieć nieco staroświecki wygląd. Z jasno pistacjową tapetą w tle jest bardzo elegancki i spokojny. Przygotowałam również cztery nagłówki z nieco innym wzorkiem: paskami, regularnym wzorkiem, ciemnym wzorkiem i jasnym wzorkiem. Tym razem także polecam tą wersję z paskami. Na niebieskim tle dodawały lekko rustykalnego klimatu ale na zielonym zdają się spełniać inną rolę. Chociaż żaden z tych subtelnych szablonów nie ma płci i starałam się aby były jak najbardziej uniseksowe to stereotypowo kwiaty w pierwszym przypisałam paniom od robótek a niebieskie piksele panom od komputerów. Zielony natomiast jest uniwersalny, tapeta może i jest delikatna ale nie jest kobieca podobnie jak militarna zieleń w tym szablonie nie jest męska. Natomiast te zielone paseczki mam wrażenie, że mają płeć. Dla mnie dzisiaj one są męskie.

PASKI

REGULARNY WZOREK

CIEMNY WZOREK

JASNY WZOREK

Jeżeli chcesz wprowadzić zmiany w szablonie to nie krępuj się. W kwestii wymiany topu (lub innych grafik): pliki należy załadować do zasobów bloga i podmienić ich adres w arkuszu css. Grafika z topu przypisana jest przy selektorze selektorze #naglowek.

Szablon łatwo można zmienić na taki z wąską szpaltą po lewej stronie. Wystarczy w arkuszu CSS, przy selektorze #tresc-glowna zmienić pływanie elementu z float:left; na float:right; i gotowe. Dokładniejsze informacje można znaleźć w notce Zmiana stronności szablonów subtelnych (na lewostronne). Są tam dokładne wyjaśnienia, krok po kroku a na koniec gotowiec w postaci arkusza stylów, który załadowany powinien zmienić szablon na lewostronny. Jeżeli chcesz skorzystać z gotowca a trochę nie wiesz jak to w notce o zmianie jest króciutka i prosta instrukcja.

Szablon może też być jednokolumnowy. Sama zmiana układu na jednokolumnowy nie jest bardzo trudna. Poszerzamy zarówno główną szpaltę jak i poboczną a następnie ustalamy pływanie elementów dla treści pobocznej. Oczywiście jest gotowy arkusz stylów dla wersji jednokolumnowej. Można też spróbować trochę bardziej po swojemu poukładać elementy z wąskiej szpalty. Czasami przydałaby się szersza chmurka tagów, czasami ukrycie archiwum, przeniesienie wyszukiwarki, czasem trzeba by rozbić zakładki na mniejsze elementy, albo może dodatków jest bardzo dużo...

Proponuję zapoznać się z kilkoma przydatnymi notkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
wtorek, 04 października 2011 12:51

Opcje


Trackback

  • Subtelny: zmiana stronności z „ Style kate mac ” datowany na 2011/10/12 12:39:23:

    Łatwość zmiany stronności szablonu jest jedną z zalet nowego kodu. Poprzednio poza zmianami w css trzeba było zmienić html uważając przy tym aby wybrać najbardziej podobny bo różnice pomiędzy poszczególnymi szablonami bazowymi mogły być spore. Tym ...

  • Subtelny: jednokolumnowy z „ Style kate mac ” datowany na 2011/10/26 08:21:14:

    Najbardziej chyba klasycznym, popularnym blogowym szablonem jest Kubrick. Jego wersja bloksowa jest w szablonach podstawowych a i ja sama tuningowałam ją wielokrotnie. Bardzo chciałam zrobić też inny wordpressowy szablon, Hemingway a. Nigdy nie udało ...

  • Subtelny: jednokolumnowy, układanie treści pobocznej z „ style kate mac ” datowany na 2011/10/31 12:49:00:

    O pływaniu elementów ciekawie napisał kiedyś e-maupa w notce: Podstawy layoutu CSS - część II . Ta część była poświęcona właśnie właściwości float. Korzystając z właściwości tam opisanych w ostatniej notce ułożyłam sobie elementy w wąskiej szpalcie, ...

Komentarze

Dodaj komentarz

  • felicja79 napisał(a) komentarz datowany na 2011/10/04 20:35:23:

    Ładny, subtelny, pistacjowy :-) Jedyne czego mi w nim brakuje to trochę ozdobników :-) Np. między notkami.

  • mrozonka82 napisał(a) komentarz datowany na 2011/10/05 13:55:53:

    Witam, jestem pod b.dużym wrażeniem Pani szablonów- są rewelacyjne. W jaki sposób mogłabym się z Panią skontaktować- marzy mi się współpraca przy "dopieszczeniu" mojego bloga. Z pozdrowieniami mrozonka82@gazeta.pl

  • kate_mac napisał(a) komentarz datowany na 2011/10/06 20:31:53:

    @mrozonka82
    Faktycznie, na tym blogu nie umieściłam, żadnych informacji kontaktowych. Poważne niedopatrzenie z moje strony. Maile szablonowe dotrą do mnie także na konto gazetowe na tym loginie ale preferuję adres szablonykatemac@gmail.com zapraszam do kontaktu :-D

    @felicja79
    masz absolutną rację; chciałam aby stylowe szablony były bardziej oparte na samych stylach niż te na starym kodzie ale chyba nie uda mi się powstrzymać; subtelne faktycznie potrzebują niezbyt rzucających się w oczy ornamentów

  • irytek05 napisał(a) komentarz datowany na 2011/10/10 16:35:56:

    Kate, w nowych szablonch początkowych nie ma znaczka css, w którego można kliknąć i pobrać szablon. Oświeć mnie, zieloną, jak Ty to robisz, że u Ciebie jest ;-) Strasznie mnie to intryguje :)
    Korzystałam już z nowych szablonów, ale z tych 2 - 3 pierwszych, bo w nich jeszcze można włączyć opcję pobierania, w pozostałych nic się nie ukazuje :\

  • kate_mac napisał(a) komentarz datowany na 2011/10/10 23:17:42:

    @zielony irytku
    znalazłaś doskonały przykład pokazujący jak bardzo niedorobione są te szablony; nie wyglądają może przesadnie nowocześnie ale chociaż część z nich wydaje się przyzwoicie zrobiona ale nawet bez zaglądania do kodu css łatwo zauważyć że jeżeli stare szablony z wiekiem zrobiły się mocno śmieciowe to te od urodzenia takie są

    tam gdzie powinna być ikonka kopiowania szablonu to przestrzeń linkująca zapewne będzie, tylko obrazka nie będzie bo np:

    #opcje .opcja a { background:url('bi.gazeta.pl/i/obrazki/blox/template7/blox_newsletter_ico2.gif) no-repeat top left !important; }

    Najprostsza rada jaka dla Ciebie mogę mieć to skopiuj sobie kod css tego bazowego nowego szablonu na którym już wcześniej pracowałaś, następnie zmień na któryś z tej drugiej paczki (np. czarno-magentowy, który już Ci polecałam) i na koniec wklej tam ten skopiowany css (np z morskiego) i możesz normalnie tworzyć szablon

    od strony css to czarno-magentowy ma te trzy selektory więcej o których Ci już kiedyś wspominałam ale kod morskiego będzie wyglądał na nim dokładnie tak samo jak na morskim (tak zakładam, nie sprawdzałam tego)

    Jeżeli już potrzebujesz wprowadzić zmiany w szablonie który już zaczęłaś robić to poszukaj właśnie wspomnianego wyżej fragmentu kodu. Wymusza on zastąpienie ikonki kopiowania szablonu wybraną grafiką.

    Generalnie #opcje to dawny #LinkiBox i #UdostepnijCss razem wzięte. Zajrzyj do kodu strony (Ctrl+U) to zobaczysz, że możliwości zapisania zmiany przy tym elemencie jest kilka.

  • myprettyeats napisał(a) komentarz datowany na 2012/01/26 20:27:37:

    swietny szablon, dziekuje bardzo :) jestem zielona w tych sprawach. Mam pytanko, jak zrobic zeby odstepy w tekscie byly mniejsze? Wszystko mi sie porobilo w podwojnych odstepach :(. Czy to bardzo trudne?

Dodaj komentarz

Wyszukiwarka

Kanał informacyjny

Related Posts Plugin

Opcje Bloxa