O szablonach, ich projektowaniu i moich z tym zmaganiach...

moje szablony

wtorek, 12 marca 2013

Jeden z pierwszych moich szablonów a na pewno pierwszy w moim stylu, taki którego wygląd odpowiadał mi. W tamtym czasie rzadko używałam krojów szeryfowych ale tu pasował on idealnie. Szablon występował wtedy zarówno w wersji lewostronnej jak i prawostronnej. Po zeszłorocznych przeróbkach zostawiłam ten szablon tylko w wersji prawostronnej ale za to całość przeinterpretowałam na dwa różne projekty. Ten prezentowany dzisiaj zachowuje stary graficzny układ tła ale zmienia zupełnie kompozycję treści.


10 szablon elastyczny, zielony z liściem

Szablon 02 elastyczny, zielony z liściem,
na starym kodzie, dla blogów na blox.pl. -550px- 


Po latach okazało się, że szablony o takim horyzontalnym układzie nieco gorzej znoszą coraz to szersze ekrany. Nic im się złego nie dzieje ale jakoś tak za dużo pustego miejsca dookoła nich. Zmiana tego projektu uwzględnia właśnie tylko wypełnienie tej pustki. Całość podzieliłam na 3-4 kolumny i w miarę poszerzania się dostępnego miejsca kolejne kolumny zaczynają się wyświetlać obok zamiast pod spodem.

piątek, 21 grudnia 2012

Ostatnio piszę, że poprawiam szablony. Najczęściej niewiele się to różni od robienia ich zupełnie na nowo. Staram się jednak na starym kodzie nie robić zupełnie nowych projektów a jedynie uaktualniać kod, usuwać nieatrakcyjne szablony i zastępować je inną wersją kolorystyczną jakiegoś popularnego projektu. Zdarzają się jednak radykalne wyjątki i szablony świąteczne takimi są. Jedyna rzecz jaka w dzisiejszym szablonie została to koncepcja renifera i kolor czerwony.

szablon świąteczny 02, czerwony

Szablon świąteczny 02 - Czerwony z Reniferem,
na starym kodzie, dla blogów na blox.pl. -550px- 


Poprzednia wersja szablonu była intensywnie czerwona, pełna jasnych, cienkich kreseczek i po pięciu latach zupełnie nieatrakcyjna. Renifera już na początku postanowiłam zostawić i tylko nie wiedziałam jak to zrobić. Przypomniał mi się pomysł z reniferem, który w porożu ma zaplątane światełka, niestety nic ciekawego i darmowego znaleźć nie mogłam więc zostałam skazana na własne wątłe umiejętności. Renifer się chowa za blogiem po pierwsze dlatego, że krępują go te wszystkie świąteczne ozdoby na głowie a po drugie dlatego, że rogi były absolutnie wszystkim na co mnie stać w dziedzinie rysowania.

Pierwszy szablon świąteczny z choinką też poprawiłam. Zapraszam do pobierania.

środa, 29 sierpnia 2012

Jedną z zalet bloksowych szablonów na nowym kodzie (new_age) jest brak tabel układających treść. Od strony HTML blogi z szablonami na nowym kodzie mają jedną kolumnę gdzie najpierw jest tytuł, następnie treść a na końcu dodatki. Tak to wygląda od strony kodu i w tej kolejności ładuje się na bloga. Jak to będzie wyglądało w praktyce jest już rzeczą drugorzędną i zależną od opisu w szablonie. Jest to o tyle istotne, że w przypadku starego kodu jeżeli chciałeś mieć szablon z wąską kolumną po lewej musiałeś się liczyć z tym, że treść poboczna spowolni załadowanie się na bloga treści głównej. W nowym kodzie lewostronność nie jest obarczona takimi konsekwencjami.


10 słoneczny z szukaczem

Szablon 10 z wyróżnionym szukaczem, słoneczny,
na nowym kodzie, dla blogów na blox.pl. -600px- 


11 szary z szukaczem

Szablon 11 z wyróżnionym szukaczem, szary,
na nowym kodzie, dla blogów na blox.pl. -600px- 


12 z szukaczem zniszczony

Szablon 12 z wyróżnionym szukaczem, czerwony,
na nowym kodzie, dla blogów na blox.pl. -600px- 


Wszystkie one są na nowym kodzie, mają wszystkie elementy wąskiej szpalty zarówno na stronie głównej jak i stronach z pojedynczymi wpisami.

Nie przygotowałam żadnych wersji alternatywnych. Prawostronna wersja tego projektu nie ma sensu bo umieszczenie tytułu w prawym górnym rogu jest bardzo rzadko spotykane a więc użytkownicy się go tam nie spodziewają. Jednokolumnowa wersja byłaby możliwa ale efekt nie będzie warty pracy. Jak ktoś chce spróbować to cały proces dokładnie opisałam na przykładzie subtelnego.

Szablony w zasadzie nie nadają się do większych modyfikacji ale zmiany w postaci zastąpienia plików graficznych umieszczonych jako tło własnymi czy zmiana koloru linków czy rodzaju czcionki zawsze jest możliwa. Jeżeli zmiana ma być niewielka to i ten szablon się nada jeżeli natomiast to ma być zupełnie nowy projekt to radziłabym zabrać się za zmiany w nieco prostszym szablonie.

Kod do górnego menu mają opisany ale w szablonach na nowym kodzie dodaję mu nieco inny identyfikator (#menu-top). 

środa, 22 sierpnia 2012

To był bardzo popularny szablon. Wśród wszystkich, które udostępniłam zajmował chyba siódme miejsce. Ciekawe czy to się teraz zmieni bo szablon zmienił się znacznie choć moim zdaniem zachował swe najistotniejsze cechy. To, co przede wszystkim się zmieniło to część tytułowa. Poprzednio tytuł był umieszczony na tle środkowej ramki co nie było najwygodniejszym rozwiązaniem bo w nietypowy sposób ograniczało jego wielkość. Miejsca na tytuł nie ma wcale więcej ale dużo wygodniej zastąpić teraz można te trzy ilustracje w ramkach.


szablon serdeczny 02, purpurowy

Szablon serdeczny 02 - purpurowy,
na starym kodzie, dla blogów na blox.pl. -550px- 


Poprzednio część tytułowa była pocięta na trzy części. Miało to usprawnić ładowanie się topu ale było raczej głupim pomysłem, którego nigdy nie naprawiłam. Jednocześnie jeżeli ktoś pytał się o możliwość zastąpienia ilustracji umieszczonych w ramkach musiałam odpowiadać zawsze, że to jednak większy problem. Teraz nie tylko on nie istnieje ale także przygotowałam alternatywne topy, w tym wersję z pustymi ramkami, w które łatwo wstawić własne ilustracje.

sobota, 30 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Typography wcześniej nie istniał, na jego miejscu był City Under Heat. Bardzo fajny, jeden z moich ulubionych ale także jeden z najmniej popularnych. W podobnym klimacie jak dawny City są Kultivating czy New Tech Earth więc bez problemu można do któregoś z nich wstawić sobie nagłówek City Under Heat.


top 10 - Typography

Szablon top 10 - Typography, elastyczny,
na starym kodzie, dla blogów na blox.pl. -500px- 


Jest to kolejny szablon o zmiennej szerokości, reagującej na dostępną szerokość ekranu. Początkowo były to tylko dwie wersje: pierwsza dla starych przeglądarek i małych ekranów i druga gdy miejsca jest dość aby pojawiła się trzecia kolumna. W ostatniej chwili zdecydowałam się dodać jeszcze jedną wersję aby poluzować jeszcze bardziej szablon. Wszystko tutaj jest bardzo kontrastowe, czarno-białe i jak zwykle nieco inaczej będzie wyglądało na docelowym blogu.

poniedziałek, 25 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Cups Of Tea w trakcie zmian trochę przejął inicjatywę. Chciałam zmienić sposób wstawienia topu tak aby można go było w dowolnej chwili zastąpić jakimś innym. Wymagało to znacznych zmian w doborze tła na blogu. Nie chciałam kolejnego szablonu z cieniem więc zdecydowałam się na transparentność. Od tego się zaczęło...


top 09 - cups of tea

Szablon top 09 - cups of tea, elastyczny,
na starym kodzie, dla blogów na blox.pl. -560px- 


Wąska szpalta ma bardzo prosty i uporządkowany wygląd. Top i tła też nie prezentują sobą nic skomplikowanego postanowiłam więc uatrakcyjnić szablon trzecią kolumną. Nie chciałam zwężać i zmniejszać szpalt a zostało za mało miejsca na pełnowymiarową kolumnę więc zdecydowałam się na opcję ze zmienną szerokością. Gdy na ekranie będzie wystarczająco dużo miejsca aby widoczna była cała trzecia kolumna to pojawi się ona symetrycznie po lewej. W przeciwnym razie pozostanie na swoim automatycznym miejscu.

poniedziałek, 18 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Drawning Hands nie potrzebował wielu zmian. Poprawiłam jedynie położenie wyszukiwarki aby łatwiej było zmieniać tło. Kształt jest teraz prosty, cień niezależny od tła a tytuł który poprzednio wciśnięty był w prawy górny róg ma teraz tyle miejsca ile potrzebuje.


top 08 - Drawing Hands

Szablon top 08 - Drawing Hands, przyjazny,
na starym kodzie, dla blogów na blox.pl. -540px-


Nie zmieniałam wielkości, nie zmieniałam czcionki, nie zmieniałam kolorów, nie zmieniałam ozdobników. Tylko ten szukacz i tytuł bloga są w nieco innych miejscach aby było wygodniej korzystać z szablonu. Teraz można zmieniać kolory, top, czcionkę, wzorek w tle i w żaden sposób nie psuje to wyglądu.

czwartek, 14 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. New Tech Earth był popularnym, często oglądanym szablonem. Zazwyczaj plasował się gdzieś w okolicach trzeciego miejsca więc zdecydowałam się go nie zmieniać. Oczywiście pewne uaktualnienia i dodatki było konieczne ale jeżeli nie będę liczyć dodatkowych elementów jak górne menu czy ikonki typu facebook to jedyną zmianą w w wyglądzie jest wzorek w tle. Zawsze był, zawsze był brązowy ale był słabo widoczny więc zrobiłam go na nowo. Reszta bez zmian.


top 07 - New Tech Earth

Szablon top 07 - New Tech Earth, miejski,
na starym kodzie, dla blogów na blox.pl. -510px-


Największy problem miałam z rozmieszczeniem tych wszystkich dodatkowych górnych menu. W tym szablonie kategorie udawały górne menu więc zagwostką było umieszczeni tam tego dodatkowego. Poza tym to bardzo prosty ale wyrazisty szablon.

wtorek, 12 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. This It How It Feels zawsze był taki kolorowy i oryginalny. Nie był bardzo popularny ale jako jedyny w swoim rodzaju ma zagwarantowane stałe miejsce na mojej liście szablonów. Odświeżanie i uaktualnianie skończyło się dość osobliwie dla tego szablonu. Na pierwszy rzut oka wszystko wygląda zwyczajnie i całkiem podobnie do poprzedniej wersji.


top 06 - This Is How It Feels

Szablon top 06 - This Is How It Feels,
na starym kodzie, dla blogów na blox.pl. -540px-


Dopiero gdy zaczniesz przyglądać się szczegółom, rzeczom które pisząc bloga uznajesz za oczywiste przekonasz się jak bardzo osobliwy jest to szablon. Jedną z jego cech charakterystycznych był monotypiczny font czyli czcionka udająca krój starej maszyny do pisania (poprzednio było to Courier New). Mimo iż zrezygnowałam z kroju udającego czcionkę starej maszyny w dalszym ciągu pozostawiłam font o stałej szerokości znaku. Jest to teraz stos: Andale Mono, Lucida Console, DejaVu Sans Mono, monospace. Kroje o całkiem współczesnym wyglądzie ale dla równowagi przypisałam im bardzo osobliwe, staroświeckie cechy.

niedziela, 10 czerwca 2012

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Efemeryczny nie wygląda tak efemerycznie jak by nazwa sugerowała ani tak drobno jak go sobie zaplanowałam. Jak zawsze wszystko zależy od zawartości a zawartość, którą wstawiam dla przykładu to zawsze bardzo dużo liter. Jeżeli chcesz jednak prosty niewielki szablon ale zależy ci na dodatkowej kolumnie to Ephemeral będzie idealnym rozwiązaniem.


top 05 - Ephemeral

Szablon top 05 - Ephemeral, trzyszpaltowy,
na starym kodzie, dla blogów na blox.pl. -450px-


Jest jasny, całkiem prosty. Używa czterech wyblakłych kolorów. Jako czcionkę wybrałam mu Corbel w dużym stopniu ale Corbel ma bardzo drobne literki. Szpalty są wąskie i dość ciasno ułożone ale odstępy w pionie mają dodawać szablonowi nieco oddechu w sytuacji gdy, jak na blogu testowym, jest w nim dużo monotonnej treści. Jedynym elementem na który w wąskiej szpalcie użytkownik ma niewielki wpływ jest archiwum. Możesz nie mieć zakładek, nie wyświetlać chmurki tagów czy listy ostatnich wpisów ale archiwum musi być. Otóż nie. W tym szablonie jeżeli jako archiwum wybierzesz listę miesięcy to nie będzie się ona wyświetlać. Ot taki blox myk.

 
1 , 2 , 3 , 4 , 5 ... 13
Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...