O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Drobny szablon beżowy

Kiedyś robiłam szablony, które nazwałam Light. Miały zaokrąglenia, cieniowania, nie były zbyt duże, użyłam w nich niewielkich rozmiarów fontu. Nie były złe choć przyznam się, że kolory w jakich je zrobiłam nie były całkiem doskonałe. Niebieski był niezły ale fioletowy już za bardzo fioletowy a słoneczny żółty dostał do towarzystwa brzydki brąz. Jeszcze istnieją ale planuję je zmienić na typ z kolorową beleczką (treść). Ale to w przyszłości. Dzisiaj odnowiony szablon 19 który kiedyś był wyraźnie czerwony z brązowym tłem a teraz jest bardziej beżowy z czerwonymi dodatkami. Czyli to samo ale zupełnie inaczej.


szablon 19 Light beżowy

Szablon 19 Light - beżowy,
na starym kodzie, dla blogów na blox.pl. -450px- 


Kolory więc są po starym szablonie a wygląd po tych Lightowych ale od strony kodu ten szablon to zupełna nowość. Poza ziarnistym ciemnym tłem w body w szablonie jest jeszcze tylko jedno tło graficzne i jest to ikonka rss. Reszta, wszystkie zaokrąglenia, cienie, ramki wszystko to zasługa CSS3 (moduł dotyczący tła i ramek)

Adres szablonu: http://19szablonkatemac.blox.pl

fragmenty szablon 19

Uwagi o szablonie 19 Light beżowym
szerokość szablonu 770px
szerokość części na notkę 460px
szerokość pobocznej szpalty 220px
kolor tła jasne (#FEFFE0) a w body bardzo ciemne (#2f251c)
kolor tekstu niemal czarny (#2f251c)
kolor linków czerwony (#ed1c24)
pozostałe kolory bordowy (#9e0b0f), brązowy (#8c734d)
krój użyty w notce Verdana
wielkość tekstu notki wartość względna: 1.1em z 62.5% (około 11px)
interlinia w notce wartość względna: 1.6em
maksymalna wielość elementów graficznych w notce 450px
css-owe ramki przy grafikach tak
border:1px solid #c8b69c;;
padding:4px;;
background:#e1d1bc;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) powiększenie i kursywa z Trebuchet MS
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme spokojnystary kod: 0Etheme spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 600px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Szablon jest bardzo drobny i dla większości te 450px to strasznie mało. Do tego te szerokie zaokrąglone ramki... Cała magia tego projektu polega na tym, że jego wygląd określa tylko css. Kilkoma klikami można więc szablon zmienić tak aby pasował do stylu w jakim piszemy. Zależało mi na użyciu takiej niewielkiej (około 11px) Verdany a że podręczniki mówią, że więcej niż 75 znaków w wierszu raczej utrudnia czytanie tak więc szerokość części z treścią była uzależniona właśnie od tej wartości (ale ustalona w pikselach).

W następnym wpisie będę zdradzać tajniki tego szablonu teraz tylko zaznaczę, że szerokość można szybko sobie poprawić zwiększając wartość width o tą samą liczbę pikseli w czterech miejscach: #BlogGlownyBox, #BlogTytulBox, #BlogTytulText, #BlogSzerokaSzpalta (dwa pierwsze to szerokość całości, dwa ostatnie dotyczą szerokości tylko lewej części). Zwiększamy wielkość o tą samą liczbę pikseli a nie do tek samej liczby pikseli.

I na koniec alternatywne wzory do body. To jedyne miejsce z plikiem graficznym i choć to cienie i gruba ramka decydują o wyglądzie szablonu to tło body może je uzupełniać na różne sposoby.


środa, 07 grudnia 2011, szablonykatemac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Poszerzanie szpalt w szablonie 19 Light z szablony katemac
Dzisiejszy wpis dotyczy drobnego beżowego szablonu, który nazwałam Light. Początkowo nazwa odnosiła się do wyglądu. Pierwszy szablon Light był jasny i cieniowany na niebiesko, kojarzył mi się z chmurką. Z niebieskiej chmurkowatości zrezygnowałam ale ... »
Wysłany 2011/12/13 17:12:26
Komentarze
felicja79
2011/12/07 11:59:27
Tak się zastanawiam nad poszerzeniem szablonu muzycznego, który używam na blogu o książkach. Trochę mi przeszkadza wąska boczna szpalta, mało się w niej mieści. Próbowałam zmieniać dopełnienia od lewej strony, ale węższe wyglądały dużo gorzej.
Ciekawe, czy jak poszerzę szpalty, to straci swój urok? Bo on jest taki drobny i delikatny. Z czcionką też próbowałam, powiększałam ją, żeby była czytelniejsza, ale na tym tle, co jest, wyglądało okropnie. I wróciłam do podstawowej wersji.

Chyba muszę spróbować z tym poszerzaniem, żeby się przekonać, jaki będzie efekt :-).
-
fotoszepty
2011/12/08 22:28:30
Witam,

zapożyczyłam sobie szablon blado-różowy. Skądinąd cudnie-eteryczny... Jako noga w tych szablonowych klimatach, mam pytanie, czy jest możliwość poszerzenia tudzież zrzucenia na dół całej szpalty bocznej celem poszerzenia miejsca na zdjęcia. to fotoblog, stąd moje pytanie.

Dziękuje i pozdrawiam,
Monika
-
kate_mac
2011/12/08 23:54:37
@fotoszepty
Cudnie, że Ci się podoba ale czemu komentarz pod szablonem beżowym?

czy jest możliwość (...) zrzucenia na dół całej szpalty bocznej celem poszerzenia miejsca na zdjęcia
Tak, taka możliwość istnieje.

Skoro pobrałaś szablon to musiałaś przeczytać warunki pobierania a to oznacza, że widziałaś notkę po pobieraniu szablonu różowego Jest tam tak napisane:
O szablonie możesz sobie poczytać w notce: 01 Subtelny, różowo-oliwkowy. Jeżeli masz jakieś wątpliwości to tam możesz zadać swoje pytania. Tam znajdziesz też dodatkowe wyjaśnienia (maksymalna wielkość ilustracji w notce, możliwość zmiany stronności, wymiany topu, dodania górnego menu itd.).
Przyznaję, że w noce nie ma jeszcze linków do wersji jednokolumnowej ale wystarczy zerknąć na listę ostatnich wpisów na głównym blogu aby natrafić na dwie notki zatytułowane Subtelny jednokolumnowy:
Subtelny: jednokolumnowy
Subtelny: jednokolumnowy, układanie treści pobocznej

Dokładniej już tego wyjaśnić nie potrafię. Jest tam dosłownie, krok po kroku opisane co trzeba sprawdzić i wpisać aby zmienić szablon na jednokolumnowy. A na koniec są jeszcze gotowce. Przeczytaj to najpierw i jeżeli coś będzie niejasne to pytaj. Pytaj szczegółowo. Nie wiem co już zrobiłaś czy czego próbowałaś więc pytania zadawaj szczegółowo.
-
kate_mac
2011/12/09 00:22:45
@felicja79

Próbowałam zmieniać dopełnienia od lewej strony, ale węższe wyglądały dużo gorzej.
Bo wbrew powszechnemu mniemaniu to nie elementy tworzą "wygląd" tylko pusta przestrzeń, odstępy. Przeskalowane nie będą wyglądały dobrze ale ale za małe mogą zepsuć całkiem ładny projekt. Im więcej szczegółów tym więcej potrzeba w szablonie "oddechu".

Ciekawe, czy jak poszerzę szpalty, to straci swój urok? Bo on jest taki drobny i delikatny.
tak ;-)
Wdaje mi się, że jeżeli zwęzisz szeroką szpaltę to będziesz mogła, dodać zabrane piksele do wąskiej i "drobność" się ie straci. A szeroka jest bardzo szeroka biorąc pod uwagę liczbę znaków w wierszu. Optymalna liczba to w drukarstwie 66 znaków (średnio to nie powinno być mniej niż 45 a więcej niż 75 znaków). W Internecie ta górna granica jest najczęściej przesuwana ale Tobie nie radzę bo wyrównujesz tekst do obu krawędzi a w takiej sytuacji łatwo "zgubić linijkę".

W ogóle zastanów się na tym wyrównywaniem. Często łatwiej czyta się tekst wyrównany chorągiewkowo, do lewej. Zapewne przyjdzie Ci do głowy, ze wszystkie książki są wyrównywane do obu krawędzi ale weź pod uwagę dwie rzeczy:
1. Nie dzielisz wyrazów a w książkach są one dzielone.
2. W książkach justunek robi osoba, która nie tylko odsuwa od siebie wyrazy, nie tylko dzieli je jeżeli trzeba podzielić, nie tylko dba o to aby pojedyncze litery nie pozostały na końcach linii. Skład i łamanie to dużo, dużo więcej...
Taki automatyczny justunek moim zdaniem szkodzi. Jasne, masz dwie równe linie po bokach ale o ile nie bawisz się w geometrię to są ważniejsze dla tekstu rzeczy, które możesz stracić... Początkowo nawet takie wyrównanie do obu krawędzi wydało mi się odpowiednie, szczególnie jeżeli przy lewej krawędzi była kolejna kolumna. Teraz uważam, że nie ma ono żadnych zalet, nawet estetycznie przestało mi się podobać a wręcz jest odwrotnie. Do tego tekst poszarpany w środku odwraca moją uwagę od treści. Nawet w książkach śledzę okiem te puste korytarze.
Robert Bringhurst napisał: "Maszyna (...), która symulując efekt składu, obustronnie wyrównuje wiersze, to aroganckie, bezmyślne narzędzie, imitujące formę z pominięciem wewnętrznej głębi typografii."
-
kate_mac
2011/12/09 00:35:21
@felicja79
Zaczęłam wymądrzać się na temat wyrównania i zapomniałam o najważniejszym. Będziesz miała problem z poszerzeniem Deco-melodyjnego szablonu - w nim granice wyznaczają grafiki w tle

W tym beżowym zamiast robić grafiki skorzystałam z możliwości cienia i zaokrągleń jakie daje CSS3. Owszem transparentność też jest możliwa, możliwe jest nawet obracanie zdjęć tak jak to miało miejsce w oryginalnym szablonie ale efekt nie będzie taki sam a mówiąc szczerze będzie mu daleko do tego, który jest osiągnięty grafikami to to nie tylko transparentność 'tworzy' tło bloga ale także prześwietlenie, wysoki kontrast, rodzaj gradientu rozjaśniający bardziej środek... niektóre rzeczy można spróbować osiągnąć ale ten szablon jest wybitnie "ilustracyjny" i chyba tylko zrobienie tła na nowo umożliwiłoby atrakcyjne poszerzenie szablonu.
Więc obawiam się, że notka o poszerzaniu będzie dla Ciebie tylko edukacyjną ciekawostką :-D W każdym bądź razie w kontekście szablonu jakiego używasz na Co warto czytać?
-
felicja79
2011/12/09 12:20:09
Właśnie dopiero na końcu przypomniałam sobie o grafikach. Musiałabym zacząć tak jak piszesz od ich poszerzenia, albo zrobienia od początku. Czyli rzeczywiście w tym szablonie pomysł z poszerzeniem odpada.
Zaciekawił mnie pomysł z pomniejszeniem szerokiej szpalty na rzecz wąskiej. Ja jestem bardzo przywiązana do wyjustowania, poszarpane końce mnie nie przekonują szczególnie przy takim delikatnym tle. Może gdyby boczna szpalta była wyraźnie oddzielona, to by mi to nie przeszkadzało, a tak wyjustowanie wydaje mi się być jedynym, co nadaje kształt i ustanawia granice szerokiej szpalty. Może to kwestia indywidualnych upodobań :-).
-
2011/12/10 12:45:21
Hej, zapożyczyłam szablon z sercem:) Przepiękny jest:) Dziękuję
-
kate_mac
2011/12/21 14:43:14
@mary279
Tych z sercem jest kilka, cieszę się, że Ci się podoba.

@felicja79
Zaciekawił mnie pomysł z pomniejszeniem szerokiej szpalty na rzecz wąskiej.

Póki dodawać będziesz tyle co odejmować to nie musisz przejmować się grafikami. Pamiętaj, że dopiero suma szerokości odstępu i dopełnienia stanowi wartość szerokości elementu nadrzędnego. Wyobraź sobie pudełko nabite kolcami od wewnątrz i na zewnątrz. width czyli szerokość to miejsce w tym pudełku (pamiętaj, że ograniczają je kolce ;) ) a i wielkość pudełka nadrzędnego czyli np. szafy do której schowasz tego pudełkowego jeża musi stanowić co najmniej sumę kolców zewnętrznych, kolców wewnętrznych i miejsca w pudełku.

Zawsze o tym przypominam bo choć dla niektórych może to być oczywiste wydaje mi się to być jednak nieco inne niż przyzwyczailiśmy się w świecie realnym. Ale może to tylko moje wrażenie...

Ja jestem bardzo przywiązana do wyjustowania, poszarpane końce mnie nie przekonują szczególnie przy takim delikatnym tle. Może gdyby boczna szpalta była wyraźnie oddzielona, to by mi to nie przeszkadzało, a tak wyjustowanie wydaje mi się być jedynym, co nadaje kształt i ustanawia granice szerokiej szpalty. Może to kwestia indywidualnych upodobań :-).

Do pewnego stopnia to rzecz gustu. Teraz w ogóle jestem przeciwna bezrozumnemu, mechanicznemu justowaniu, które jest dla mnie zaprzeczaniem prawdziwego składu (justować trzeba umieć). Na początku zaś, zanim w ogóle zaczęłam czytać cokolwiek o składzie tekstu, uznawałam za konieczne wyrównanie do obu krawędzi gdy wąska była po prawej i była wyraźnie oddzielona prostą kreską ramki albo tła.
Teraz uważam, że dużo lepszym 'dzielnikiem' jest światło czyli pusta przestrzeń. Wyraźniej rozróżnia ono krańce elementów niż jakakolwiek linia. Kreska, nawet pionowa, bardziej łączy niż rozdziela. Wyrównanie chorągiewkowe dodaje jeszcze więcej światła na końcu a jednocześnie początek jest równiutki i łatwy do odnalezienia.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...