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

niedziela, 15 stycznia 2012

08 reliefowy, amerykański

Drugi szablon reliefowy jest głównym powodem stworzenia tego typu. Początkowo nawet te szablony nazwałam mail ze względu na inspirację jaką były dla mnie amerykańskie koperty z czerwono-niebieskimi paskami na krawędziach. Te paski odtworzone są w tym właśnie szablonie, to one decydują o jego amerykańskim charakterze. Nawiązanie jest niewielkie po to aby wygodnie można było wpasować ilustrację o dowolnym temacie.

08 reliefowy, amerykański (czerwono-niebieski)

08 reliefowy, amerykański (czerwono-niebieski),
na nowym kodzie, dla blogów na blox.pl. -935px- 

Jasny anonimowy szablon pasujący do każdego tematu, bardzo szeroki, przeznaczony do prezentacji zdjęć. Dedykowany głównie fotoblogom i blogom craftowym gdzie więcej jest ilustracji prezentujących własne dzieła niż tekstu. Wiersze są bardzo długie, zawierają około 120 znaków co jest zdecydowanie za dużo jak na jedną linę ale jeżeli w akapicie nie będzie ich więcej niż 3-4 to nie powinno być problemu z gubieniem linijki.

Szablon ma bliźniacze projekty: beżowy i czarny. Tym razem nie ma instrukcji tworzenia wersji dwukolumnowej ale w dalszej części wpisu udostępniam alternatywny kod, z węższą szeroką szpaltą i przeniesionym do drugiej kolumny jednym z elementów szpalty z treścią poboczną.

Szablon nie ma grafiki tytułowej, należy ją sobie samemu dodać według własnego uznania. Przygotowałam kilka propozycji przykładowych ilustracji i ramek. Najlepiej jednak dodać własne zdjęcie.

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

fragmenty szablon 08 reliefowy

Uwagi o szablonie
szerokość szablonu 980px
szerokość głównej szpalty 940px
szerokość bocznej szpalty 960px
kolor tła jasne dla głównej (#f5f5f5), nieco ciemniejsze dla pobocznej (#dedede)
kolor tekstu ciemny (#464646)
kolor linków niebieski (#2f239b) i czerwony dla treści notki (#cd2a3f)
pozostałe kolory granatowy (#2b1465), bordowy (#ac1e2c)
krój użyty w notce Century Gothic, URW Gothic L
wielkość tekstu notki wartość względna: medium (ok. 16px)
interlinia w notce wartość względna: 1.6em
maksymalna wielość elementów graficznych w notce 935px
css-owe ramki przy grafikach tak
margin:1px;
border-radius:5px;
border-top: #dedede 1px solid;
border-left: #dedede 1px solid;
border-bottom: #ffffff 1px solid;
border-right: #ffffff 1px solid;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) szerokość 50%, reliefowa, zaokrąglona ramka, pływa na prawo, graficzny znak cytatu
nagłówki w notce
(h1, h2, h3, h4, h5, h6)		 h3 - większy rozmiar (1.4em); odstęp górny i dolny, efekt reliefu
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ść 730px)

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

Reliefowy jest typem horyzontalnym. Większość elementów ma charakter poziomy co jeszcze podkreśla układ jednokolumnowy. Kolorystyka jest stonowana, jasno-szara z dodatkiem czerwonych i niebieskich linków. Wykorzystany krój to geometryczny Century Gothic, ma on stosunkowo szerokie litery, które poprawiają nieco czytelność wiersza. Krój łatwo sobie zmienić ale należy brać poprawkę na długość wiersza (jeżeli ktoś wolałby szeryfowy to polecam przykładowo stos: 'Bookman Old Style', Georgia, serif;).

Ilustracji tytułowej w szablonie nie ma (jest tylko ta grafika podająca wymiary miejsca na ilustrację). Wystarczy jednak dodać do zasobów blogu własny plik o wymiarach 980×200px, zapisany w formacie jpg i nazwany tyt (tyt.jpg) aby wyświetlił się on pod tytułem bloga. Dodając go do zasobów należy koniecznie pamiętać o zaznaczeniu opcji nadpisz pliki (aby zastąpić grafikę z wymiarami).

Jeżeli z jakichś powodów szablon był kopiowany kilkukrotnie nazwa ilustracji może nieco się różnić (będzie miała więcej cyferek na początku).

  • Można ją sprawdzić w arkuszu stylów: ilustracja tytułowa przypisana jest elementowi #naglowek.
  • Albo w zasobach blogu, zapewne w folderze pliki szablonu new_template7_120115x gdzie ostatni x to kolejny numer ponownego kopiowania.

przykładowe zdjęciaPrzygotowałam kilka propozycji tytułowych, nadających już jednak konkretny temat szablonowi. Na początek wykadrowałam kilka widoczków, zdjęcia zwierząt, starą mapę i zdjęcia inspirowane Gwiezdnymi Wojnami.

Najbardziej podobają mi się paski wykadrowane z dużych zdjęć ale w przyszłości udostępnię kilka plików z ramkami do wstawiania własnych zdjęć.

Treść poboczna była przeze mnie pracowicie układana więc aby zmienić szablon na dwukolumnowy trzeba by równie pracowicie pokasować wszystkie te zmiany. Jeżeli ktoś ma ochotę to polecam wpis o układaniu treści w szablonie jednokolumnowym na przykładzie subtelnego. Proszę robić na odwrót, zamiast dodawać te opisy proszę je kasować.

Największy jednak problem ma charakter estetyczny. Elementy w wąskiej szpalcie mają wygląd zagłębionych przycisków i dostosowane są do tła treści pobocznej, trzeba więc ramki pozmieniać kolorystycznie (proszę się wzorować na tych przy ilustracjach w notce, powinny pasować). Różnica w odcieniach nie jest duża ale dla wyglądu subtelnego zagłębienia istotna.

Aby uniknąć zmagania się ze zmianami proponuję skorzystać z jednego z trzech gotowców:

wizualizacjaBezwzględnie wypozycjonowane kategorie -700px-

Instrukcja instalacji zmienionego szablonu na blogu:

  1. Skopiuj oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. new_template7Upewnij się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmień szablon na ten właśnie)
  3. Zastąp zawartość pola edycji CSS udostępnionym tu kodem: tylko kategorie w wąskiej szpalcie

wizualizacjaBezwzględnie wypozycjonowane zakładki -700px-

Instrukcja instalacji zmienionego szablonu na blogu:

  1. Skopiuj oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. new_template7Upewnij się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmień szablon na ten właśnie)
  3. Zastąp zawartość pola edycji CSS udostępnionym tu kodem: tylko zakładki w wąskiej szpalcie

wizualizacjaBezwzględnie wypozycjonowane dodatki z pola na kod HTML -600px-

Instrukcja instalacji zmienionego szablonu na blogu:

  1. Skopiuj oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
  2. new_template7Upewnij się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmień szablon na ten właśnie)
  3. Zastąp zawartość pola edycji CSS udostępnionym tu kodem: tylko dodatki z pola na kod HTML w wąskiej szpalcie

Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

Szczegóły wpisu

Tagi:
Kategoria:
Autor(ka):
kate_mac
Czas publikacji:
niedziela, 15 stycznia 2012 12:22

Opcje


Trackback

Wyszukiwarka

Kanał informacyjny

Related Posts Plugin

Opcje Bloxa