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.
Wpisy
Trzeci szablon reliefowy jest zupełnie ciemny. Rzadko kiedy robię ciemne szablony ale tym razem zupełnie zaszalałam i pobawiłam się grafitowymi odcieniami. Czerń jest jedna, w zasadzie jest to zupełny brak koloru. Czyli światła bo kolory to sposób w jaki światło odbija się od przedmiotów. Na ekranie jest nieco inaczej. Kolory powstają nie poprzez odbicie światła a poprzez jego emisję (czy jakoś tak). Czy można więc uzyskać prawdziwie czarny kolor na świecącym ekranie?
09 reliefowy, czarny,
na nowym kodzie, dla blogów na blox.pl. -935px-
Ze względu na świecenie ekranu zdecydowałam się na odcienie niemal czarne. Biorąc pod uwagę jak ciemne one są wydaje się, że elementy najciemniejsze (czyli drobne ikonki) rzeczywiście są czarne.
Szablon pasuje do każdego tematu, jest bardzo szeroki, przeznaczony do prezentacji zdjęć, stylowy i elegancki. Dedykowany głównie fotoblogom, blogom craftowym i kulinarnym gdzie więcej jest ilustracji prezentujących własne dzieła niż tekstu. Linie tekstu są bardzo długie, zawierają około 120 znaków co jest zdecydowanie za dużo jak na jeden wiersz 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 amerykański. 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.
| szerokość szablonu | 980px |
| szerokość głównej szpalty | 940px |
| szerokość bocznej szpalty | 960px |
| kolor tła | ciemne (#0d0d0d), minimalnie jaśniejsze dla pobocznej (#151515) |
| kolor tekstu | jasnoszary (#c2c2c2) |
| kolor linków | biały (#ffffff) |
| pozostałe kolory | szary (#bdbdbd) |
| 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; |
| 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 | |
| skrypty użytkowników, wklejki | Ostatnie komentarze, |
|
dodatkowe klasy i identyfikatory |
|
Reliefowy jest typem horyzontalnym. Większość elementów ma charakter poziomy co jeszcze podkreśla układ jednokolumnowy. Kolorystyka jest ciemna i raczej jednolita. 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: 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).
#naglowek.
Przygotował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:
Bezwzględnie wypozycjonowane kategorie -700px-Instrukcja instalacji zmienionego szablonu na blogu:
Bezwzględnie wypozycjonowane zakładki -700px-Instrukcja instalacji zmienionego szablonu na blogu:
Bezwzględnie wypozycjonowane dodatki z pola na kod HTML -600px-Instrukcja instalacji zmienionego szablonu na blogu:
Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:
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),
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.
Relief czyli płaskorzeźba. Początkowo miałam bardzo duży problem z nazwaniem tego szablonu. Samą wersję magentowo-beżową robiłam trzy razy, niewiele zmieniając w jego podstawowym układzie czy doborze kolorów. Od początku to był szeroki, jednokolumnowy szablon z tłem w beżowych odcieniach i wyróżnikami w nieco czerwieńszej odmianie magenty. To się nie zmieniało. Dopiero jednak dodawszy zagłębione przyciski zdecydowałam się na tytuł.
07 reliefowy, karminowy,
na nowym kodzie, dla blogów na blox.pl. -935px-
Bardzo szeroki szablon, przeznaczony do prezentacji zdjęć. Dedykowany głównie fotoblogom i blogom craftowym gdzie więcej jest ilustracji prezentujących własną pracę niż tekstu. Linie tekstu są bardzo długie, zawierają około 120 znaków co jest dużo za dużo i łatwo czytelnikowi będzie zgubić linijkę. Jeżeli jednak akapity nie będą zawierały więcej niż trzy wiersze nie powinno być problemu.
Szablon ma bliźniacze projekty: amerykański 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łasną grafikę.
Na szablonowym blogu stworzyłam nowy tag Ilustrowany przewodnik po bloksie. Przypomniał mi się stary wpis DeBergeraca, już niedostępny i postanowiłam zrobić własną wersję. Opisałam ze strzałkami jak trafić do pola na dodatki i do arkusza stylów, będzie chyba jeszcze o załadowaniu plików do zasobów... wydaje mi się, że powinno być coś jeszcze ale jak na razie nic nie przychodzi mi do głowy.

Sprawdziłam kategorię o blokowaniu i okazało się, że jest tam całkiem sporo wpisów wyjaśniających bardzo podstawowe rzeczy. Takich dla zaczynających dopiero przygodę z blogowaniem, dla zielonych jak szczypiorek na wiosnę, dla seniorów-internetowych juniorów... itp. Dodałam więc listę tych wszystkich wpisów w tamtejszych zakładkach.
Tutaj takich wpisów nie będzie. Nie ma co powtarzać tych samych notek i tematów skoro w dziedzinie obsługi bloga nowy kod HTML nic nie zmienia. Dlatego tylko wypiszę tutaj tamte notki o podstawowej obsłudze ustawień bloga a tam zaś posprawdzam czy wszystko jest aktualne.

Najbardziej klasyczny z klasycznych. Wyblakła oliwkowa zieleń wygląda bardzo naturalnie i antycznie. W wielu miejscach w szablonie użyłam wersalików. To oczywiście nie pierwszy raz ale chyba po raz pierwszy w tak wielu miejscach. Podobnie jest z ilością światła między literami. Poszerzyłam odstępy znacznie co chyba najbardziej podkreśla antyczny charakter. W takim połączeniu traci się nieco na czytelności więc nie polecałabym w przypadku żadnych dłuższych tekstów (długi opis to ryzykowna rzecz). Krótkie frazy pisane wersalikami mogą zyskać nawet na rozświetleniu. To taki starszy sposób podkreślania istotności (zamiast kursywy, pogrubienia czy podkreślenia).
06 szablon klasyczny, oliwkowy,
na nowym kodzie, dla blogów na blox.pl. -600px-
Stosunkowo szeroki szablon, zmieszczą się w nim ilustracje szerokości 600px i będą miały rameczkę. 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.
Szablon ma bliźniacze projekty: brązowy i oliwkowy. Korzystając z dokładnych instrukcji dla subtelnego można bez problemu zmienić położenie wąskiej szpalty (lewostronny) albo można też skorzystać z gotowca umieszczonego w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Najłatwiej ze wszystkiego wymienić tło, można na własne ale i ja przygotowałam alternatywy.
Postanowiłam zmienić kolor klasycznego na bardziej atramentowy ale wyszedł indygo. I dobrze bo taki modny kolor fajnie pasuje do bardzo tradycyjnego wzoru tego szablonu. Pisałam poprzednio, że powodem jest klasyczny. To jak najbardziej prawda. Taki klasyczny szablon jest chyba na każdej platformie blogowej, widziałam chyba kilka na bloggerze i wordpress.com, stary bloksowy kod ma szablon klasyczny a dla kodu new_age nowego klasyka popełniłam ja czerpiąc podstawy z każdego dostępnego mi źródła (w tym wspomniane wyżej szablony klasyczne z różnych platform).
05 szablon klasyczny, granatowy,
na nowym kodzie, dla blogów na blox.pl. -600px-
Stosunkowo szeroki szablon, zmieszczą się w nim ilustracje szerokości 600px i będą miały rameczkę. 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.
Szablon ma bliźniacze projekty: brązowy i oliwkowy. Korzystając z dokładnych instrukcji dla subtelnego można bez problemu zmienić położenie wąskiej szpalty (lewostronny) albo można też skorzystać z gotowca umieszczonego w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Można też sobie wymienić tło.
Szablon na nowym kodzie ale o realnie staroświeckim wyglądzie. Celowałam po części w antyk a po części w jego pochodne w postaci stylu klasycznego. Efekt jest nawet bardziej różnorodny gdy weźmie się pod uwagę od czego pochodzą kroje albo z czym kojarzą się kolory i wzory. Podstawowym powodem dla którego zrobiłam ten szablon jest bloksowy szablon o nazwie klasyczny (na starym kodzie). Na prywatnym blogu wybrałam go jako mój pierwszy szablon bo miał najbardziej papierowy wygląd chociaż mówiąc szczerze monotonność i jaskrawość bordowego bardzo mnie w nim drażniła. Dlatego mój klasyczny jest odrobinę bardziej brązowy.
Szablon 04 klasyczny, brązowo-bordowy,
na nowym kodzie, dla blogów na blox.pl. -600px-
Stosunkowo szeroki szablon zmieści zdjęcia szerokości nawet 600px i to z delikatną rameczką. 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.
Szablon ma bliźniacze projekty: granatowy i oliwkowy. Bez problemu można mu zmienić położenie wąskiej szpalty (lewostronny) korzystając z dokładnych instrukcji dla subtelnego albo skorzystać z gotowca w dalszej części notki. Podobnie z wersja jednokolumnową. Zasady są dokładnie takie same jak w szablonach subtelnych a poniżej gotowy kod wg mojego uznania. Są też alternatywne wersje tła do wymiany.
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, która wąską być przestała i przeniosła się pod notki. Efekt wyszedł całkiem rewelacyjnie ale... może zaistnieć mały problem z równowagą...

Nie jestem w stanie domyślić się, które z bloksowych elementów użytkownik zdecyduje się wykorzystać. Z całą pewnością nie wiem jakie dodatki i w jakiej liczbie zdecyduje się załadować na swój blog. Wariantów jest bardzo dużo i omawianie ich mija się z celem. Mam natomiast kilka rad, które mogą nieco usprawnić wygląd osobom, które uważają, że jeden z elementów na ich blogu zajmuje nieproporcjonalnie dużo miejsca zostawiając obok siebie za dużo wolnej przestrzeni. Światło jest niezbędne, asymetria poprawia czytelność ale wszystko to z równowagą trzeba połączyć.
Jeżeli po zmianie w kodzie na szablon jednokolumnowy pojawił się, któryś z powyższych problemów to mam kilka propozycji ich rozwiązania. Zakładam, że teść poboczną ułożono w cztery kolumny. Przy trzech różnice wielkości są mniej wyraziste, jest więcej pustego miejsca. Problem może jednak i tam się pojawić, więc poniższe podpowiedzi mogą się przydać, należy tylko dostosować wielkości.