O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 28 czerwca 2009

Dzisiaj ostatni wpis o serii blokowej. Przez cały tydzień pokazywałam blokowy w różnych kolorach i opisywałam co w nim jest specyficznego i jak to jest zrobione. Dzisiaj tak jak obiecywałam całkiem spore czary mary. Jest sporo rzeczy o które mnie się pytacie ale dwie z nich wymagają bardziej indywidualnego podejścia i dłuższych wyjaśnień. Pierwszą jest trzecia szpalta i początkowo na pytania o nią odsyłałam zawsze do wpisu e-maupy. To nadal jest jak najbardziej poprawna odpowiedz. Drugą rzeczą która was ciekawi jest zastępowanie tytułu bloga grafiką. Na to pytanie staram się odpowiadać krótko i treściwie. Nie potrafię pisać ogólnych instrukcji dlatego staram się pewne rzeczy wyjaśniać wielokrotnie. Jedną z tych rzeczy jest właśnie odpowiedz na pierwsze pytanie o trzecią szpaltę: pozycjonuj względnie bezwzględnie. Ta odpowiedz ma bardzo wiele zastosowań i dzisiaj właśnie znów do tego tematu wrócę. Dzisiejszy szablon: duży format polecam fotoblogom.

szablon
52 szablon blokowy - duży format

Uwagi nie tylko techniczne:

  • Po pierwsze autorem zdjęcia w nagłówku jest  wili_hybrid. Zdjęcie zostało udostępnione na licencji Creative Commons – uznanie autorstwa.
  • Podstawowa kolorystyka szablonu opiera się na szarościach w różnym natężeniu. Jedynym kolorowym dodatkiem jest czerwień w dwóch odcieniach: ciemniejszym #aa0000 i jaśniejszym występującym jedynie w przypadku linków w notce #cc0000.
  • Szablon nie jest prosty, wymiana zdjęcia czy kolorów nie będzie miała wpływu na jego poprawność ale wszelkie dodatki wpisywane do pola na kod html muszą być dodawane ostrożnie
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)
  • Oczywiście chciałam opisać pewne skrypty i dodatki, niestety nie ma łatwo - duży format to bardzo specyficzny szablon; przede wszystkim nie akceptuje rzeczy dodawanych pod wąska szpaltą; skrypty które zmieniają coś na blogu ale dotyczą elementów szerokiej szpalty są mile widziane i dlatego polecam avatary z MBL w komentarzach
  • wszelkie bloczki agregujące newsy z innych miejsc, ostatnie komentarze, wklejki z innych serwisów są bardzo niemile widziane - zwyczajnie aby je dodać trzeba by najpierw dla nich zrobić miejsce; a więc odradzam bo będzie dziwnie a w niektórych przypadkach bez ingerencji w CSS będzie nic bo kilku wklejką dałam cechę display:none; (ostatnie komentarze, bloczki z blogfrog, fotoforum, flickr) polecam natomiast tagi delicious na blogu i to tylko pod warunkiem, że nie wyświetlasz elementu ostatnie notki a tagów nie ma zbyt dużo, albo ewentualnie wklejkę z blipa ale też tylko w określonych warunkach
  • wszelkie zwijające skrypty są przeze mnie w tym szablonie odradzane; zwijane archiwum nie ma sensu skoro ukryłam opcje archiwum w formie listy miesięcy; zwijane zakładki pojawią się ale będą się rozwijać w dół, poza blog i jeżeli zrobisz udawana stopke albo poziome dolne menu to zakładki będą je zasłaniać.

Zmiany wprowadzone w tym szablonie są bardzo daleko idące. Ponownie wykorzystałam tutaj zasadę pozycjonowania względnie bezwzględnego. Zupełnie zlikwidowałam tradycyjną wąską szpaltę częściowo ukrywając jej elementy a częściowo przenosząc je w okolice stopki. Przeniesienie wąskiej szpalty nie powoduje przeniesienia miejsca wyświetlania się elementów dodawanych do pola na kod html więc wszelkie problemy z dodatkami należy rozpatrywać indywidualnie. Opisywanie dzisiejszego czary-mary zacznę oczywiście od wyjaśnienia jak to zrobiłam (choć odpowiedź relatywnie/absolutnie powinna wam wszystko wyjaśnić) a następnie opiszę co zrobiłam a czego nie i jak samemu rozwiązać kilka 'dodatkowych' problemów.

Przejdź od razu do części: Co można a czego nie można robić z szablonem (czyli spodziewane problemy techniczne)

Przeniesienie elementów węższej szpalty do fałszywej stopki

Aby pozycjonować względnie bezwzględnie trzeba spełnić kilka warunków.
1. określić element pozycjonowany względnie
2. zrobić miejsce na stopkę
3. umiejcowić absolutnie elementy w stopkowej przestrzeni

Jeżeli nie spełnimy pierwszego warunku trudno nam będzie określić gdzie ma leżeć dany element ponieważ jego położenie określać będziemy względem krawędzi przeglądarki co oznaczać będzie że położenie będzie faktycznie zależne od wielkości okna przeglądarki czyli rozdzielczości ekranu. Dodatkowo pozycjonujemy względem dolnej krawędzi a czymś zupełnie innym jest dolna krawędź bloga a dolna krawędź przeglądarki. Jeżeli ominiemy krok drugi nasze przeniesione elementy zasłaniać będą dolne elementy bloga czyli na pewno stronicowanie i jeżeli to co wstawiamy do stopki będzie sporej wielkości to zasłoni też notki. Pominięcie trzeciego kroku będzie już zupełnie absurdalne bo to jest dzisiaj nasz podstawowy cel.

Z przyczyn technicznych (Treść wpisu może mieć maksymalnie 16KB a ja na razie nie chcę dzielić notki na dwa wpisy) część dotycząca tego jak zrobiłam wąska szpaltę w stopce została przeze mnie bardzo skrócona. Możliwe, że kiedyś rozwinę ten temat ale dzisiaj ważniejsze wydaje mi się opisanie jak szablon będzie się zachowywał niż powielanie tych samych wyjaśnień. Proponuję więc zerknąć do notki dotyczącej opisu TrzeciejSzpalty czy udawanejStopki. Zasada ogólnie rzecz ujmując jest ta sama.

Co można a czego nie można robić z szablonem

1. Archiwum

Powinno być wyświetlane jako kalendarz. Archiwum w postaci listy miesięcy jest ukryte. W przypadku włączenia listy miesięcy tam gdzie aktualnie wyświetla się kalendarz będzie puste miejsce.

2. O autorach

Element O autorach jest ukryty.

3. Ostatnie notki

Ostatnie notki wyświetlać się będą na środku wąsko-szpaltowej stopki. Tytułów notek maksymalnie jest 10 tak więc wielkość tego elementu jest dostosowana właśnie do dziesięciu linków. Element Ostatnie notki nie jest niezbędny na blogu tak więc ekonomicznie wykorzystując miejsce proponuję zastąpić go innym dodatkiem.

4. Zakładki

To jest największy problem tego szablonu. Zakładek nie może być więcej niż dziesięć i to tylko pod warunkiem, że będą w jednym folderze. Jeżeli folderów będzie więcej to za każdy tytuł odjąć trzeba dwie zakładki (czyli osiem etykiet w dwóch folderach, sześć w trzech i cztery w czterech) oczywiście pod warunkiem, że zarówno etykiety linków jak i tytuły folderów zmieszczą się w jednym wersie.

Dziesięć zakładek to bardzo mało tak więc aby zwiększyć nieco tą liczbę proponuję trzy rozwiązania.

a. W kodzie html wpisać dodatkowy folder zakładek korzystając z

  • identyfikatora Boks dla całego elementu
  • klasy tyt dla tytułu folderu
  • tagów listy nienumerowanej dla linków

Drugi folder tez nie może mieć więcej zakładek niż dziesięć. We wzorcowym kodzie wystarczy wymienić tytuł foldera adresy linków i nazwy etykiet a następnie dodać do pola na kod html a dodatkowy folder zakładek wyświetli się w środkowej części.

b. zdrezygnować ze specyficznego blokowego wyglądu zakładek

W polu na kod html należy dokonać pewnych zmian. Przekreślone fragmenty należy skasować. Dzięki temu prawdopodobnie można będzie dodać dwa razy więcej zakładek. Do .ZakladkaEtykieta można dodać jeszcze cechę font-size:0.9em; która zmniejszy nam stopień pisma i pozwoli dodać jedna czy dwie zakładki więcej.

.TytulFolderaZakladek {
FONT-SIZE: 1.4em;
font-weight:bold;
FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif;
font-variant: small-caps;
margin: 0px 0px 5px 0px;
padding: 8px 10px 10px 15px;
BACKGROUND: #282828;

}
#ZakladkiItems {
}
.PoziomDrzewa {
margin-bottom: 0px;
PADDING: 0px 0px 6px 0px;
}
.ZakladkaEtykieta {
PADDING: 0px 10px 0px 10px;
}

.ZakladkaEtykieta a {
display:block;
padding: 5px;
BACKGROUND: #444;
border-bottom: 2px solid #282828;
color: #000;

}
.ZakladkaEtykieta a:hover {
BACKGROUND: #aa0000;
color: #fff;

}

c. pozostałe zakładki umieścić na stronie statycznej

To jest moim zdaniem najlepsze rozwiązanie. W zakładkach umieścilibyśmy około dziesięć najważniejszych linków a pozostałe polecane strony znalazły by się w postaci listy na stronie statycznej. Statycznych może być aż 50 więc nie ma problemu. Link do gotowej strony dodamy albo w zakładkach (przykładowo pod etykietą pozostałe polecane strony) albo w poziomym menu wyświetlającym się zamiast udawanej stopki.

5. pozycjonujemy nowe elementy (na przykładzie tagów delicious)

Nowe elementy to najtrudniejsza część. Trudno mi zgadywać co będziecie chcieli dodawać do swojego bloga... Każdy nowy element powinien spełniać pewne warunki. Najważniejsze nie może być za długi. Długość tagówdelicious będzie zależałą od ilości tych tagów. Chmurka nie powinna być większa niż około 300px , u mnie jest to 40 tagów w chmurce. W kodzie który dodaje się do pola na kod html znaleźć można fragment dotyczący liczby tagów i w każdej chwili go zmienić. Jam mam wpisane tam count=40 ale w zależności od tego czy użyte w tagach słowa są długie czy krótkie tagów będzie mogło być mniej lub więcej.

Chmurkę z tagami umieściłam na miejscu ostatnich notek tak więc jeżeli chcecie też z takiego wyświetlania skorzystać trzeba wyłączyć element ostatnie notki. Parametry umiejscowienia są analogiczne do umiejscowienia ostatnich notek ale nie takie same ze względu na różnice krawędzi.

.delicious-tags {
WIDTH: 250px;
position:absolute;
left:325px;
bottom:70px;
PADDING: 0px;
margin: 0px;
text-align:left;
line-height: 130%;
word-spacing:3px;
}

W tym miejscu zamiast ostatnich notek czy tagów delicious można sobie umieścić dowolny element trzeba tylko określić jego pozycje względem dolnej i lewej krawędzi bloga. Przykładowo możemy tu dodać popularną blipową wklejkę z naszymi statusami. Proponuję wybrać wersję dark albo bw i wielkość elementu określić jako: szerokość 250 wysokość 300px. cały kod umieścić w divie o identyfikatorze Bloks (czyli ten div z którego skorzystamy tworząc dodatkowy folder z zakładkami) i gotowe.

6. poziome dolne menu

W zasadzie jako poziome dolne menu możemy wykorzystać udawaną stopkę. Wystarczy zawartość naszego menu dodać w ramach divu o identyfikatorze uStopka. Tradycyjnie umieściłam tam informacje o szablonie.

Jako dolne menu proponuję wykorzystać nieco inny identyfikator. Wydaje mi się, że menu lepiej będzie wyglądać pisane dużymi literami o nieco większym stopniu i grubości. Dlatego też stworzyłam dodatkowy identyfikator o nazwie DolneMenu. Element ten wyświetlać się będzie dokładnie tak jak uStopka tylko definicje dotyczące wyglądu tekstu nieco zmieniłam.

#DolneMenu {
position:absolute;
bottom:15px;
left:20px;
WIDTH: 830px;
BACKGROUND: #282828;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 20px;
FONT-SIZE: 1em;
font-weight:bold;
FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif;
text-transform: uppercase;
text-align: left;
word-spacing:0.1em;
}

W takim menu można umieścić dowolne informacje. Tylko dla przykładu fragment htmlowego zapisu menu gdybym je maiła zrobić dla swojego bloga.

 


Tymczasowo to tyle. Wpis pisałam na raty dodatkowo bardzo go dzisiaj skracając jeżeli więc coś nie zachowuje się tak jak to opisałam albo mój opis jest nielogiczny to proszę o info. Dzisiaj skasowałam pewnie 2/5 tego wpisu więc istenieje spore prawdopdobieństwo, że coś pominęłam.

 

sobota, 27 czerwca 2009

Zbliżamy się do końca tygodnia dla szablonu blokowego. Wydaje mi się, że sporo informacji dotyczących tworzenia tych szablonów tutaj udzieliłam. Sporo rzeczy powinniście już lepiej rozumieć. Dzisiaj ostatni nowy kolorystycznie szablon 51 blokowy azure - jasny, lewostronny szablon o szaroniebieskiej kolorystyce. Ostatnią rzeczą jaką uznałam za ciekawą do opisania są zakładki (i ogólnie elementy wąskiej szpalty).

szablon niebieski na bloga blox.pl
51 szablon blokowy azure

Uwagi:

  • autorem zdjęcia white and azure laced with blue of heaven's own tinct jest  harold.lloyd (won't somebody think of the bokeh?); zdjęcie zostało udostępnione na licencji cc-by-nc-sa
  • Bloksowa baza to Biały ale tak samo powinny pasować htmle szablonów: Blogowy, Theme B, Theme D, Rin; html musi mieć układ z wąską szpaltą po lewej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na szarych błękitach o różnym natężeniu (#005588, #335566, #3D474D, #77848A, #A5B3B3, #B1C3C2, #c2cccc). Jedynym kolorowym dodatkiem jest brudno-różowy: #CCBBBB.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Wygląd zakładek

Zasadniczo, w najbardziej ogólny sposób wygląd zakładek mogłabym podzielić na dwie grupy: w typie listy i w typie tabelki. Podstawową cechą tego podziału będzie dla mnie wygląd linków poszczególnych elementów jeżeli wyświetlają sięblokowo to jest to typ drugi. Na początek kilka ogólnych informacji. Swego czasu sporo o zakładkach i całej wąskiej szpalcie pisałam, najprzydatniejsze w tej chwili wydają mi się dwie notki z bardzo praktycznymi opisami wyglądu zakładek:

W notkach tych wykorzystałam wygląd zakładek w konkretnych szablonach i opisałam ich CSS. Pierwsza z nich mimo iż została napisana w październiku 2007 była przeze mnie poprawiana w późniejszym czasie więc proszę się nie dziwić że opisany jest tam wygląd zakładek w szablonie który powstał dopiero w marcu 2008. Jeżeli ktoś zainteresowany jest konkretami to oczywiście zapraszam:

W obu notkach zaczęłam od opisu konstrukcji zakładek tak więc tym razem też od tego zacznę. Staram się by za każdym razem ten opis był zrobiony w nieco inny sposób dzięki temu jeżeli czegoś nie załapiesz zawsze możesz zerknąć do poprzedniego opisu. Z drugiej strony budowa zakładek nie jest wcale taka skomplikowana więc lepiej od razu przejdźmy do rzeczy.

Na początek bezpośredni element nad to #BlogWazkaSzpalta (wcześniej #BlogBodyBox, #BlogGlownyBox i body), jeżeli więc nie możesz znaleźć opisu konkretnej cechy w części dotyczącej bezpośrednio zakładek - szukaj wyżej.

schemat budowy bloksowych zakadek

1. Ukrywamy napis Zakładki:

Wszystko co wiąże się bezpośrednio z zakładkami znajduje się w elemencie #BlogZakładkiBox. Wyobraź to sobie jako pudełko. Teraz do pudełka włożymy dwa mniejsze: pierwsze zawiera tytuł całości czyli słowo Zakładki: i jest to element o identyfikatorze #ZakładkiTytuł, drugie pudełko zawierać będzie wszystkie pozostałe elementy i jego identyfikator to będzie #ZakladkiItems.

Chcemy aby zakładki wyglądały jak pozostałe elementy wąskiej szpalty tak więc musimy wyeliminować jeden z elementów - ukrywamy napis Zakładki: Ukrywamy, nie usuwamy, CSSem niczego pozbyć się nie możemy, możemy tylko polecić przeglądarce aby gdy natrafi na dany element nie wyświetlała nam go w oknie. Tak więc wpisując display:none; przy identyfikatorze #ZakadkiTytul grzecznie prosimy przeglądarkę aby zmieniła sposób wyświetlania tytułu na żaden.

#ZakladkiTytul {
display: none;
}

2. Opisujemy tytuły folderów z zakładkami

#ZakladkiItems zawiera wszystko co dotyczy zakładek za wyjątkiem tytułu. To całkiem przydatny sposób na uporządkowanie elementów w pudełku. Mamy pudełko a w nim tytuł i resztę. Podobnie jest na niższym szczeblu zakładek z tym, że pudełko nie zawiera jednego zestawu zakładek (tytuł i reszta) lecz kilka. Dlatego od tego momentu selektory dotyczące zakładek nie są identyfikatorami (#) lecz klasami (.). Identyfikator jest elementem unikalnym natomiast klasa może się powtarzać. Jeżeli coś ma na naszej stronie występować tylko raz używamy identyfikatora jeżeli będzie tego więcej korzystamy z klas.

Folderów w zakładkach może być sporo, każdy ma swój własny tytuł i teraz zajmiemy się opisaniem klasy dotyczącej tytułu: .TytulFolderaZakladek

.TytulFolderaZakladek {
FONT-SIZE: 16px;
font-weight:bold;
FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif;
font-variant: small-caps;
color: #eeeedd;
BACKGROUND: #77848A;
margin: 25px 0px 5px 0px;
padding: 8px 10px 10px 15px;
}

Cechy dotyczące wyglądu czcionki to typowy zestaw: spory rozmiar (font-size: 16px;), pogrubienie (font-weight:bold;), kapitaliki (font-variant: small-caps;), kolor (color: #eeeedd;) i do tego nieco delikatniejsza czcionka (font-family: 'Trebuchet MS', Verdana, sans-serif;).

O charakterystycznym blokowym wyglądzie decydować będzie odpowiedni zestaw marginesów i dopełnień połączony z wyróżniającym się kolorem tła. Na początek określiłam właśnie kolor tła (background:#77848a;) dzięki temu od razu widać czym się zajmować będziemy. Elementowi z tytułem nadałam tylko margines górny i dolny, boczne określiłam jako 0px dzięki czemu element zajmuje całą przestrzeń jaką przypisałam wszystkim elementom wąskiej szpalty. Górny margines oddzieli nam od siebie pojedyncze foldery z zakładkami. Poszczególne foldery (zestaw tytuł plus linki) nie stanowią łącznie jednego pudełka a więc górny margines musimy określić przy tytule a dolny przy pudełku z wszystkimi linkami. Dolny margines margines przy tytule odpowiedzialny będzie za odstęp pomiędzy tytułem a linkami. Zależało mi na tym aby zakładki wyglądały jakby składały się z poszczególnych bloków oddzielonych niewielkim światłem. Dopełnienie czyli wewnętrzny margines odpowiedzialny będzie za odstęp napisu od krawędzi tła.

3. Opisujemy poszczególne linki w folderze

Wszystkie linki w folderze znajdują się w jednym pudełku o klasie .PoziomDrzewa, tym razem nie potrzebujemy tego selektora, przyda nam się natomiast wszystko co znajdzie się w pudełeczku PoziomDrzewa: będą to selektory odpowiedzialne za wygląd poszczególnych linków czyli .ZakladkaEtykieta plus do tego selektor ogólny odpowiedzialny za wygląd linków a.

Na początek zaczniemy od opisania odstępów bocznych. Chciałam aby poszczególne linki znajdowały się w nieco mniejszych od tytułu blokach. Skorzystałam z selektora etykiet nadając mu dopełnienie. Zapewne w równie dobry sposób zadziałałby margines określony dla elementu z likiem.

.ZakladkaEtykieta {
PADDING: 0px 10px 0px 10px;
}

O ile sam element dotyczący etykiet jest elementem blokowym o tyle już link jest elementem liniowym i zachowywał się będzie nieco inaczej. W zasadzie tło moglibyśmy przypisać etykiecie bez linku ale zależy nam na pseudoklasie hover i dlatego prościej działać będzie bezpośrednio na kombinatorze .ZakladkaEtykieta a. Zaczynamy od zmiany sposobu wyświetlania linku na blokowy (display:block;), bez tego nie zadziała druga cecha czyli dopełnienie (padding: 5px;). Oczywiście dodajemy tło (BACKGROUND: #C2CCCC;) i określamy kolor linku (color: #556688;). Opisałam też dolną ramkę, nadałam jej kolor tła dzięki temu udaje odstęp pomiędzy poszczególnymi linkami. W podobny sposób zadziała dolny margines określony w tym elemencie albo dodanie dolnego dopełnienia w poprzednim elemencie.

.ZakladkaEtykieta a {
display:block;
padding: 5px;
BACKGROUND: #C2CCCC;
border-bottom: 2px solid #B1C3C2;
color: #556688;
}

I na koniec oczywistość czyli zmiana tła i koloru linku po najechaniu na niego kursorem. Specyfika zmiany sposobu wyświetlania linku z liniowy na blokowy spowodowała iż teraz wystarczy najechać kursorem na dowolną część bloku z linkiem aby link zadziałał. W przypadku gdybyśmy pozostawili liniowy sposób wyświetlania się linku aktywna by była tylko część z literkami.

.ZakladkaEtykieta a:hover {
BACKGROUND: #AA9999;
color: #dde;
}

I gotowe. Do zobaczenia jutro. Poczarujemy trochę, będzie oryginalnie choć mało praktycznie.

piątek, 26 czerwca 2009

Wolę szablon z wąska szpaltą po prawej, to dla mnie taki typ blogowy. Jeżeli menu/nawigacja znajduje się po lewej to moim zdaniem powinno być niewielkie, tak do 10 elementów co przy wyświetlaniu na blogu archiwum, listy ostatnich notek i zakładek wygląda gorzej niż w przypadku szablonu prawostronnego. Ale upodobania są różne i szablony lewostronne też maja swoje zalety. Na tydzień blokowy zaplanowałam zrobić po równo: trzy szablony lewostronne i trzy prawostronne i to mi się udało, jutrzejszy tez będzie 'lewy'. Dość nieoczekiwanie jednak okazało się, że trzy lewostronne szablony są raczej chłodne, niebieskawe a te z wąska szpaltą po prawej robiłam w odcieniach beżowych. Nie taki miałam plan ale tak wyszło. Postanowiłam tego nie zmieniać ponieważ zmiana stronności tego szablonu jest bardzo prosta (bardzo, bardzo prosta) i dokładnie napisałam jak to zrobić. Dzisiaj więc zapraszam do przyjrzenia się szablonowi pięćdziesiątemu - bees z wąska szpaltą po lewej stronie.

fioletowy szablon na bloga
50 szablon blokowy bees

Uwagi:

  • autorem zdjęcia my Monday Blues, let me show you it jest [ r ♥ c e y t ♥ y ] {I br♥ke for bokeh}; zdjęcie zostało udostępnione na licencji cc-by-nc-sa
  • czyli uwaga szablon jest na tej samej licencji; w skrócie przypomnę: użycie niekomercyjne, uznanie autorstwa, utwory zależne na tych samych warunkach; jeżeli ktoś zdecyduje się skorzystać z tego szablonu ale postanowi dodać własne zdjęcie to możemy przyjąć, że mnie samą zadowoli licencja cc-by czyli poinformowanie mnie o pobraniu szablonu i nie usuwanie z CSS informacji o autorstwie; jeżeli jednak to nastrojowe zdjęcie zostaje w szablonie to w takim przypadku obowiązuje licencja o użyciu niekomercyjnym i udostępnianiu na tych samych warunkach
  • Bloksowa baza to Biały ale tak samo powinny pasować htmle szablonów: Blogowy, Theme B, Theme D, Rin; html musi mieć układ z wąską szpaltą po lewej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na fioletach różnym natężeniu (#393947, #444455, #4E4E61, #58586E, #9999aa). Jedynym wyraźnym dodatkiem jest żółty: #FFFF33.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Wybieramy kolor

Całkiem sporo rzeczy z tym szablonem robiłam ale najbardziej podstawowa różnica pomiędzy szablonami z tej serii to oczywiście kolor. Mimo iż różnica jest podstawowa to sam dobór kolorów podstawowy i prosty nie jest. Dysponując fajnym zdjęciem proponuję zacząć od Generatora palet, podpowie on nam z jakich kolorów w pierwszej kolejności powinniśmy skorzystać. Generalnie Color Palette Generator zazwyczaj mi wystarcza. Robiąc szablon na jasnym, białym tle z klasycznie szarym kolorem tekstu potrzebuje tylko trochę inspiracji co do pozostałych barw a czasami nawet nie, bo w przypadku niektórych grafik kolory są oczywiste. Ze zdjęciami tak prosto nie jest, mają znacznie bogatszą paletę barw i wybierając na chybił trafił nie zawsze osiąga się oczekiwany efekt - w takim przypadku taki generator może być dobrą podpowiedzią. Sam generator nie wystarczy. Dostajemy dwie palety: spokojniejszą i bardziej nasyconą ale ograniczoną do zaledwie pięciu kolorów. Gdy szukamy koloru dla wyróżnienia czy chcemy upewnić się co do ogólnej palety taki generator wystarcza. W przypadku zmiany wszystkich kolorów blokowego taka podstawowa paleta to za mało, w takiej sytuacji może nam pomóc przykładowo The Color Wizard - rozwinie nieco naszą paletę podpowiadając dodatkowe kolory. Na koniec tej części dodam jeszcze, ze nigdy nie korzystam wyłącznie z automatycznych generatorów. Czasami różnice pomiędzy poszczególnymi kolorami są zbyt duże i wolę sama wybrać odpowiednie odcienie zmieniając nieco jasność czy nasycenie koloru o kilka czy kilkanaście procent tak aby uzyskać inny kolor ale tylko nieznacznie różniący się od poprzedniego tak aby całość sprawiała spójne wrażenie - w ten właśnie sposób wybrałam fioletowo-szare odcienie dla szablonu bees. W tle jest jedna barwa ale dzięki zmianom jasności i nasycenia uzyskałam dodatkowe kolory.

Zmiana koloru

W przypadku szablonów z serii blokowej kolorów jest sporo. Jeżeli masz ochotę pobawić się w dobieranie kolorów to oczywiście zachęcam ale to wymaga cierpliwości i w tym przypadku absolutnie należny pamiętać że mniej znaczy więcej - nie należy przesadzać z ilością kolorów. Aby uprościć całą sprawę zrobiłam całkiem sporo blokowych szablonów szczególną wagę przykładając do szablonów w odcieniach beżowych. Proponuję więc wybrać sobie najbardziej odpowiedni szablon biorąc pod uwagę kolorystykę własnego zdjęcia. Przede wszystkim należałoby zwrócić uwagę na tonację zdjęcia: jest ciepłe czy zimne? To chyba najważniejsze. O ile zdjęcie nie jest jaskrawe to beżowy będzie pasował.  Jako drugi krok proponuję określić kolor wyróżniający - powinien to być ten który wyraźnie pojawia się na zdjęciu ale jest zupełnie inny niż tło. W tym miejscu możemy skorzystać z Color Palette Generatora. Paletę możemy generować na podstawie całego zdjęcia albo wybierzmy fragment z wyraźnymi, odpowiadającymi nam barwami i po prostu wytnijmy ze zdjęcia próbny fragment tylko na potrzeby wygenerowania koloru. Gdy będziemy mieli odpowiednią paletę możemy zdecydować się na kolor albo korzystając z innych generatorów poszukać bardziej odpowiedniego odcienia. Wybierając kolor warto pamiętać o tym, ze inaczej dany kolor wygląda jako tło a inaczej jako kolor tekstu.

Gdy mamy już wybraną paletę możemy zacząć zmieniać kolory. Nie ma sensu bawić się w pojedyncze zmiany numerów kolorów szczególnie biorąc pod uwagę, że łatwo coś przeoczyć bądź pomylić. Najlepiej więc na początek określić jaki kolor zmieniamy i jakim będziemy go zastępować. Najprostszym sposobem na zmianę koloru jest globalne zastosowanie metody znajdź i zastąp. Taka funkcję ma chyba każdy edytor tekstowy. Proponuję wkleić do edytora treść arkusza CSS następnie włączyć szukacz: Znajdź i zastąp i wpisać tam nasze kolory. Dzięki takiemu automatycznemu działaniu unikniemy nieoczekiwanych problemów z zapomnianymi selektorami.

Szablon bees jako wyróżnienia używa koloru żółtego, to świetnie pasuje do zdjęcia z pszczołą. Załóżmy jednak, że zdjęcie chcemy wymienić na nieco inne, powiedzmy bardziej czerwone: Don'tfenceh me in. Korzystając z generatora palet wybieram dwa kolory które będą pasować do zdjęcia: #dd2211 (czerwony) i #eebbcc (różowy). Czerwony okazał się zbyt jaskrawy. Jeżeli zależy nam na czerwonym możemy szukać dalej nieco rozjaśniając i wysycając kolor. Jeżeli odpowiada nam różowy to wydaje mi się, że nic z nim już robić nie trzeba i możemy go wstawić do arkusza CSS.

1. Jaki kolor zastępujemy

Skoro mamy już nasz nowy kolor to teraz musimy określić jaki kolor chcemy zastępować. W przypadku szablonu bees oczywiste jest że chodzi nam o żółty ale jaki to numer koloru? Bardzo często kolory linków będą określone bardzo wysoko czyli przy selektorach ogólnych a i a:hover. W tym przypadku niestety tak nie jest, musimy więc koloru poszukać głębiej. Żółty występuje w tym szablonie jako kolor linków w notce i jako kolor tła po najechaniu kursorem na linki w wąskiej szpalcie. Poszukajmy więc może tego drugiego.

.ArchiwumItem A:hover, .ZakladkaEtykieta A:hover, #BlogTytulyOstatnichWpisow li a:hover, #BlogAutorzyBox li a:hover {
BACKGROUND: #FFFF33;
color: #444455;
}

Naszym poszukiwanym, żółtym kolorem będzie #ffff33. W przypadku pozostałych blokowych szablonów też najlepiej w tym miejscu szukać najbardziej wyróżniającego się koloru.

2. Znajdź i zastąp.

Mając określony nasz nowy kolor i znalazłszy numer koloru który chcemy zastąpić możemy włączyć nasz edytor tekstu, wkleić tam nasz arkusz CSS i skorzystać z funkcji znajdź i zastąp. Tylko proszę ostrożnie. Edytory tekstu często mając sporo automatycznych funkcji które zmieniają określone znaki na inne. Ot takieułatwiacze , które sprawdzają się w przypadku pisania jakiegoś tekstu ale nasz CSS powinien pozostać bez nieoczekiwanych zmian a więc najlepiej delikatnie się z nim obchodzić i dla bezpieczeństwa zachować sobie gdzieś zapasową kopię oryginalnego CSS.

Funkcję znajdź i zamień najczęściej znaleźć będzie można w menu edycja. Popularny skrót to: Ctrl+F Więc do dzieła.

znajdz i zastąp

Gotowy arkusz powinien wyglądać mniej więcej tak: css 50 bees z różowym

czwartek, 25 czerwca 2009

Lubię beżowe szablony. Są takie... przytulne. W zasadzie wszelkie kolory kawy z mlekiem mi odpowiadają, wydają się być stonowane, spokojne i po prostu odpowiednie. Poprzedni szablon był nieco cieplejszy od dzisiejszego, jako wyróżnik linków użyłam tam koloru czerwonego. Tym razem jest nieco chłodniej ale dzięki temu w zupełnie innym nastroju... nazwijmy go porannym. Aby całość nie była zbyt niebieska beżowy ma lekko żółtawy odcień, kremowy pojawia się też jako hover. Całość, zgodnie z kolorystyką zdjęcia raceytay: If it's Monday it must be blue jest bardzo przyjemna.

szablon na bloga beżowy niebieski
48 szablon blokowy beżowy

Uwagi:

  • autorem zdjęcia If it's Monday it must be blue jest  [ r ♥ c e y t ♥ y ] {I br♥ke for bokeh}; zdjęcie zostało udostępnione na licencji cc-by-nc-sa
  • czyli uwaga szablon jest na tej samej licencji; w skrócie przypomnę: użycie niekomercyjne, uznanie autorstwa, utwory zależne na tych samych warunkach; jeżeli ktoś zdecyduje się skorzystać z tego szablonu ale postanowi dodać własne zdjęcie to możemy przyjąć, że mnie samą zadowoli licencja cc-by czyli poinformowanie mnie o pobraniu szablonu i nie usuwanie z CSS informacji o autorstwie; jeżeli jednak to nastrojowe zdjęcie zostaje w szablonie to w takim przypadku obowiązuje licencja o użyciu niekomercyjnym i udostępnianiu na tych samych warunkach
  • Bloksowa baza to Spokojny ale tak samo powinny pasować htmle szablonów: Almost Spring, Kubrick, Connections, 36i6 A, 36i6 B (Theme C się nie nadaje bo nie ma stopki); html musi mieć układ z wąską szpaltą po prawej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na brązach (#919183, #aaaa99, #B9B8A3, #C7C6AF) a także stonowanej ale różnorodnej palecie kolorów wyróżniających: niebieskich (#335566, #005588), zielonkawych (#778877), kremowych (#ffffcc), różowych (#ddccbb).
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Od kilku dni pokazuję zmiany w szablonie blokowym i wyjaśniam jak i co jest zrobione. Blokowy to taki schludny szablon w którym łatwo zmieniać drobiazgi nie zmieniając jego charakteru. Podobnie jak poprzednio zamiast pokazywać jak coś zmienić powiem jak coś jest zrobione. Tym czymś będzie stopka.

Pasek stopki

O tym jak robić UdawanąStopkę pisałam w grudniu i w zasadzie wcale nie chcę się tu dzisiaj powtarzać. W największym skrócie moje stopki to dodatkowe elementy html umiejscowione w sposób względnie bezwzględny na końcu bloga. Tak, tak pozycjonowanie relatywnie absolutne po raz kolejny czyli żadna nowość. We wpisie o udawanej stopce było całkiem sporo informacji o tym co i jak umieszczać w Stopce, były dodatkowe linki do miejsc gdzie szukać można było pomysłu na własna stopkę itd. W pewnym sensie do tematu stopki wrócę jeszcze na sam koniec tygodnia ale to już będzie zupełnie inna bajka. Dzisiaj będzie kilka słów o wyglądzie tej konkretnej stopki.

We wpisie o udawanej stopce w zasadzie nie wyróżniałam samej stopki - po prostu opisałam jak wstawić elementy na dole stronki gdy masz tam kawałek niewykorzystanego miejsca. Nie interesowało mnie ile tego miejsca jest i jak ono wygląda - po prostu wklejałam tam tekst i koniec. Tym razem zrobię to nieco inaczej. Zainspirował mnie szablon bloga Irytka, ten prywatny nie o szablonach. O ile ja udawaną stopkę robiłam mimochodem, bez specjalnego pomysłu to Irytek zaplanowała dla stopki ładne otoczenie.

Tym razem ja też zwracam uwagę na stopkę i dopasowuję ją do szablonów blokowych. Początkowo stopka miała być wystającym od lewej paseczkiem na szerokość szerokiej szpalty - coś jak tytuły notek czy kategorie. Na szczęście przypomniałam sobie o stronicowaniu i jemu przypisałam taki wygląd. Dzięki temu mamy spójną linię elementów szerokiej szpalty: Kategorie, tytuły notek, stronicowanie. Stopka do tej listy w zasadzie się nie zalicza, jest czyś bardziej odrębnym i ma stanowić zakończenie a nie ciągłość z szablonem. Dlatego stopka dostała własny paseczek, szeroki na szerokość całego bloga tak jak jest szeroki element #BlogBodyBox (w przypadku tego szablonu istnieje różnica szerokości pomiędzy #BlogGlownyBox a #BlogBodyBox).

Ale po kolei... Zaczynamy oczywiście od przypisania #BlogGlownyBox position:relative. Od teraz wszystko co będziemy absolutnie pozycjonować na blogu będzie pozycjonowane względem krawędzi bloga a nie względem okna przeglądarki.

#BlogGlownyBox {
position:relative;
}

Teraz potrzebujemy miejsca na naszą stopkę. Nie chcemy przecież żeby przypadkiem zasłoniła nam stronicowane czy inne elementy bloga. W tym celu wykorzystałam prawdziwą stopkę. Zapewne równie dobrze sprawdziłoby się dodanie dolnego dopełnienia (padding nie margin) do #BlogGlownyBox albo marginesu (czyli margin) do #BlogBodyBox ale tego nie sprawdzałam. Teoretycznie można by też było określić padding elementu #BlogBodyBox ale wtedy powiększy nam się przestrzeń z tłem i aby uzyskać wrażenie oddzielenia stopki od bloga należałoby UdawanejStopce dodać górną ramkę w kolorze tła w body.

#Stopka {
height: 60px;
}

Wykorzystamy rozwiązanie które w momencie tworzenia tych szablonów wydawało mi się najbardziej optymalne choć pewnie teraz skorzystałabym z trzeciej możliwości z ramka w udawanej stopce. Skoro stworzyłam jednak miejsce przy wykorzystaniu prawdziwej stopki ramki przy udawanej nie potrzebuję. Opisywanie udawanej stopki zaczynam od określenia jej położenia: wybieram pozycjonowanie absolutne, określam niewielki odstęp od dolnej krawędzi tak aby było widać kawałek ciemniejszego tła. Położenie względem lewej krawędzi w tym przypadku też musi być nieco przesunięte ponieważ ten konkretny szablon ma po bokach niewielki margines. Następnie określam wielkość mojej stopki. To jest konieczne jeżeli chcemy aby nasza UdawanaStopka pasowała do szerokości bloga. Teraz zostaje mi już tylko określić kolor tła, kolor tekstu który nie jest linkiem, wielkość tego tekstu a także niewielki margines wewnętrzny (dopełnienie czyli padding). I gotowe.

#uStopka {
position:absolute;
bottom:15px;
left:20px;
WIDTH: 830px;
BACKGROUND: #B9B8A3;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 20px;
FONT-SIZE: 11px;
text-align: left;
color: #778877;
}

I na koniec ostatnie słowo o stopce. Określając położenie względem dolnej krawędzi określamy miejsce w którym ta stopka będzie się kończyć czyli jej dolną krawędź. Planując miejsce na udawaną stopkę musimy wiedzieć jak duża ona będzie. Jeżeli zrobimy miejsce najednolinijkową stopkę a tekstu wstawimy znacznie więcej to nasza fałszywa stopka będzie rosła w górę i zasłaniała kolejne dolne elementy (zaczynając od stronicowania)

środa, 24 czerwca 2009

Pierwszy szablon z serii blokowej jest świetny, prosty, wyrazisty, zdecydowany. Rewelacja ale... naprawdę dobrze wygląda w towarzystwie zdjęć czarno-białych, minimalizm zdecydowanie mu służy. Czasami jednak lepiej pasować nam będzie szablon nieco mniej kontrastowy i taki właśnie jest 48 szablon blokowy beżowy (w zasadzie po prostu brązowy ale brązowy był serdeczny więc ten nazwałam beżowy). Cała kolorystyka szablonu jest bardziej stonowana, mniej kontrastowa jakby delikatniejsza. Aby szablon nie był zbyt przygnębiający idealny szary zastąpiłam odcieniem nieco brązowym i tak powstał bardzo przyjemny szablon inspirowany kolorystyką zdjęcia zaproponowanego w topie: Monks playing Volley ball in the afternoon by Sukanto Debnath (cc-by)

szablon beżowy na bloga
48 szablon blokowy beżowy

Uwagi:

  • autorem zdjęcia Monks playing Volley ball in the afternoon jest Sukanto Debnath; zdjęcie zostało udostępnione na licencji cc-by
  • Bloksowa baza to Spokojny ale tak samo powinny pasować htmle szablonów: Almost Spring, Kubrick, Connections, 36i6 A, 36i6 B lub ewentualnie Theme C; html musi mieć układ z wąską szpaltą po prawej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na brązach (#C7BDB1, #BAB1A6, #A1998F, #867F77, #82686C, #443333, #35151A). Jedynym kolorowym dodatkiem jest pastelowy czerwony: #CE343F.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Tym razem nie tyle będę dostosowywać ten szablon do własnych upodobań co pokażę jak zrobiłam coś co jest już w szablonie. Dzisiaj zajmię się opisem wyglądu wyszukiwarki.

Zmiana umiejscowienia wyszukiwarki

O ile sam wygląd wyszukiwarki dostosowany jest do pozostałych części szablonu o tyle sposób jej umiejscowienia w części tytułowej bloga może być już wykorzystywany także w przypadku innych szablonów. I od tego właśnie zacznę... od pokazania zapisu który umiejscawia wyszukiwarkę u góry. Tradycyjnie już będzie to pozycjonowanie absolutne:

#BlogPrzeszukiwanie {
position:absolute;
top:20px;
left:auto;
}

  1. Pozycjonując absolutnie musisz po pierwsze określić, że właśnie na takim pozycjonowaniu Ci zależy (position:absolute;).
  2. Następnie określasz położenie elementu względem krawędzi w pionie i poziomie. W zasadzie równie dobrze jak u góry możesz przenieść wyszukiwarkę na dół, wtedy zamiast top określasz bottom.
  3. Co do określania pozycji left lub right to należy pamiętać, że o ile nie zostanie to kreślone inaczej krawędzią względem której opisujemy nasz element będzie wewnętrzna krawędź okna przeglądarki. Aby to zmienić musimy określić jeden z nadrzędnych elementów jako pozycjonowany relatywnie (position:relative;). Ja najczęściej taki zapis dodaje do elementy #BlogGlownyBox dzięki czemu moimi 'krawędziami' są krawędzie bloga.

W tym przypadku określiłam położenie left jako auto. W przypadku przenoszenia elementu tylko do góry to rozwiązanie wydaje się być najprostsze. Nie potrzebuję przesuwać w poziomie wyszukiwarki więc tego nie robię. Położenie względem lewej krawędzi zostawiał automatyczne czyli takie jakie byłoby pod wąską szpaltą.

I to wszystko jeżeli chodzi o przesuwanie wyszukiwarki do góry. Teraz w formie ciekawostki podam pozostałe parametry, interesują nasz selektory związane z wyszukiwarką czyli: #BlogPrzeszukiwanieForm, #BlogPrzeszukiwanie, #BlogPrzeszukiwanieText INPUT i #BlogPrzeszukiwanieKlawisz INPUT

/* wyszukiwarka */

#BlogPrzeszukiwanieForm {float:left;}
#BlogPrzeszukiwanie {
position:absolute;
top:20px;
left:auto;
WIDTH: 230px;
margin: 0px 0px 5px 0px;
padding: 8px 10px 10px 10px;
BACKGROUND: #A1998F;
}
DIV#BlogPrzeszukiwanieText INPUT {float:left;
font-size: 11px;
height: 17px;
width: 150px;
BACKGROUND: #C7BDB1;
border: 1px solid #BAB1A6;
}
DIV#BlogPrzeszukiwanieKlawisz INPUT {
margin: 0px 5px;
FONT-SIZE: 11px;
font-weight:bold;
FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif;
text-transform:uppercase;
color: #BAB1A6;
height: 21px;
width: 60px;
BACKGROUND: #867F77;
border: 1px solid #BAB1A6;
}
DIV#BlogPrzeszukiwanieKlawisz INPUT:hover {
BACKGROUND: #CE343F;
}

wtorek, 23 czerwca 2009

Jako kolejny szablon z serii blokowej przedstawiam kremowy. Inspiracją dla kolorystyki było oczywiście zdjęcie wyświetlające się w części tytułowej. Autorem zdjęcia The happy boy jest JAIRO BD. Zdjęcie jest bardzo radosne i słoneczne dlatego i kolorystyka szablonu jest ciepła. Przeważają odcienie kremowe i jasnobrązowe a jako wyróżnik linków wybrałam pomarańczowy; ogólnie całą paletę nazwałabym wypieczoną a to nasunęło mi pewien pomysł... szablon w takiej ciepłej biszkoptowej kolorystyce świetnie nadawał się będzie na bloga kulinarnego a w szczególności poświęconego wypiekom. Poprzednio wyjaśniałam zmianę stronności szablonu dzięki czemu mimo iż ten szablon jest prawostronny bez problemu można go będzie zmienić na lewostronny - jak to zrobić opisałam w poprzedniej notce. Dzisiaj zajmiemy się czymś najprostszym czyli wymianą grafiki w tytule. Dzięki temu ciepły, letni, piaskowy szablon zmienimy w ciepły, biszkoptowy, kulinarny szablon.

szablon kremowy na bloga
47 szablon blokowy kremowy

Uwagi:

  • autorem zdjęcia The happy boy jest JAIRO BD; zdjęcie zostało udostępnione na licencji cc-by
  • Bloksowa baza to Spokojny ale tak samo powinny pasować htmle szablonów: Almost Spring, Kubrick, Connections, 36i6 A, 36i6 B lub ewentualnie Theme C; html musi mieć układ z wąską szpaltą po prawej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na odcieniach kremowych (#F2ECE6, #FFE5CC, #ffddbb) i brązowych (#261D13, #564635, #BFAC99). Jedynym kolorowym dodatkiem jest pomarańczowy: ff9900 i #ddaa66.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Zmiany

Blokowy to bardzo prosty, uporządkowany i 'symetryczny' szablon łatwo wprowadzić w nim zmiany, które dostosują szablon do indywidualnych upodobań a jednocześnie nic w nim nie zepsują i szablon zachowa swój oryginalny charakter. Tym razem zmienimy główny obrazek szablonu. W przypadku tego konkretnego szablonu zmiana obrazka nie będzie wymagała niemal żadnego dostosowania grafiki. Szablon jest prosty i nie ma żadnych graficznych ramek czy dodatków wystarczy więc wybrać zdjęcie i do dzieła.

Zmiana zdjęcia w tytule

Jak pisałam poprzednio mam skłonność do rozwlekłych opisów tak więc i tym razem proszę o odrobinę cierpliwości. Wymiana zdjęcia jest banalnie prosta ale aby nie było wątpliwości postaram się ją opisać bardzo szczegółowo ;) Na zmianę zdjęcia mam dwa pomysły, pierwszy gorszy dla tych u których zbliżenie się do arkusza CSS wywołuje wysypkę i drugi rozsądniejszy a zarazem bardziej popularny zmieniający adres pliku w CSS. Zacznijmy jednak od zdjęcia.

1. Nowe zdjęcie

Na początek musimy znaleźć jakieś apetyczne ujęcie jedzonka. Gdy prowadzisz blog kulinarny zapewne dysponujesz sporą bazą smacznych zdjęć więc problemem będzie nie znalezienie odpowiedniego a wybranie tego jednego. Dla szablonu kremowego najlepiej by było wybrać zdjęcie w ciepłych kolorach, raczej pastelowych ale przy niczym się nie upieram. Dla przykładu proponuję: Yummy solar-baked bread by Abri_Beluga (cc-by) albo Shallots by daisybush (cc-by). Zdjęcie nie powinno być mniejsze niż 860px szerokości i około 300px wysokości. Nie może być mniejsze, jeżeli będzie większe to nic się nie stanie, po prostu jego część nie będzie widoczna. Jeżeli tytuł Twojego bloga, lub jego opis nie zmieści się w jednej linii może się przydać zdjęcie o nieco większej wysokości.

Yummy solar-baked bread by Abri_Beluga Shallots by daisybush

2. Metoda pierwsza: nadpisywanie zdjęcia

Warunkiem skorzystania z tej metody jest znajomość nazwy zdjęcia w tytule. Łatwo to można sprawdzić w arkuszu ale skoro w tym przypadku do arkusza się nie zbliżamy... musimy przejrzeć zasoby bloga. Jeżeli szablon został skopiowany niedawno to wszelkie pliki związane z używanym szablonem powinny być w jednym folderze. Wystarczy więc przejrzeć grafiki w tym konkretnym folderze i odszukać tą która wyświetla się w tytule. Gdy znać będziemy nazwę pliku dokładnie tą samą nazwę nadamy naszemu nowemu plikowi ze zdjęciem. Plik dodać musimy do zasobów bloga pamiętając o tym aby zaznaczyć opcje nadpisz pliki. Oryginalne zdjęcie zostanie zastąpione w zasobach nowym. Ta metoda ma nieco 'brutalny' charakter więc ją odradzam.

zasoby nadpisz

2. Metoda druga: wymiana adresu wywoływanego zdjęcia w arkuszu

Sposób ten został już bardzo dokładnie opisany na blogu css.blox.pl w w tej sprawie nic sie nie zmieniło.
Zaczynamy więc od dodania naszego zdjęcia do zasobów bloga - tym razem nie musimy się przejmować jego nazwą. Gdy plik będzie już w zasobach kopiujemy jego adres - będzie nam potrzebny do wpisania w arkuszu.
Następnym krokiem jest odnalezienie w arkuszu CSS odpowiedniej linijki. Chcemy wymienić zdjęcie będące tłem tytułu bloga tak więc odpowiednim miejscem będzie #BlogTytulBox. W przypadku szablonu 47 szablon blokowy kremowy opis tego selektora wygląda tak:

#BlogTytulBox {
WIDTH: 860px;
MARGIN: 0px 20px;
PADDING: 210px 0px 10px 0px;
TEXT-ALIGN: left;
background: url(/resource/47_top.jpg) no-repeat top left;
}

Wystarczy więc teraz wymienić część dotycząca tła. Zastępujemy tylko adres, pozostałych wartości nie trzeba ruszać. Możemy wstawić cały adres zdjęcia albo jego skróconą wersję w postaci '/resource/nazwa_pliku.jpg'

I gotowe

poniedziałek, 22 czerwca 2009

Na początek tygodnia blokowego wybrałam jasny, lewostronny szablon z niebieskimi wyróżnikami. Formalnie będzie on przeciwieństwem pierwszego szablonu blokowego: jest jasny zamiast ciemnego, wąską szpaltę ma po lewej zamiast po prawej i do wyróżnienia użyłam intensywnego niebieskiego zamiast czerwieni. Z racji, że jest to pierwszy lewostronny blokowy wyjaśnię dzisiaj zmianę stronności. Dzięki temu każdy następny blokowy będzie zupełnie niezależny do stronności. Spodobał wam się 46 ale macie sporo dodatków i lepszy byłby prawostronny - no problem - zmieniając położenie jednej cyferki w CSS zmienimy stronność blokowego.

46 szablon
46 szablon blokowy jasnoszary

Uwagi:

  • autorem zdjęcia the blue wall jest Sukanto Debnath; zdjęcie zostało udostępnione na licencji cc-by
  • Bloksowa baza to Biały ale tak samo powinny pasować htmle szablonów: Blogowy, Theme B, Theme D, Rin; html musi mieć układ z wąską szpaltą po lewej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na jasnych szarościach różnym natężeniu (#666, #ccc, #ddd, #fff). Jedynym kolorowym dodatkiem jest niebieski w dwóch odcieniach: #0022cc i #557799.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)

Zmiana stronności szablonu

Z racji tego, że to bardzo prosty i uporządkowany szablon łatwo wprowadzić w nim zmiany które dostosują szablon do indywidualnych upodobań a jednocześnie nic w nim nie zepsują i szablon zachowa swój porządny wygląd. Na początek zmienimy stronność szablonu. W przypadku tego konkretnego szablonu zmiana stronności będzie bardzo prosta. Pisząc ten CSS starałam się aby był bardzo symetryczny więc zmian będzie niewiele. Od razu ostrzegam, że w przypadku innych szablonów zmiana stronności wymagać może więcej działań niż w przypadku tego uporządkowanego szablonu.

Pisanie instrukcji to nieciekawe zajęcie. Instrukcja powinna być jasna i zwięzła co raczej mi nie wychodzi. Nie przestraszcie się tym zalewem słów - zmiana stronności tego szablonu ogranicza się zaledwie do kilku klików i wykorzystuje osławioną metodę copy/paste.

1. Kopiujeny nasz CSS

Zależy nam aby szablon zachował się w niezmienionym kształcie - zmienić chcemy tylko położenie wąskiej szpalty. Dlatego też potrzebujemy mieć kopię arkusza stylów szablonu który chcemy zmienić. W przypadku szablonu 46 arkusz CSS dostępny jest tutaj: 46-0Bbialy

46jasny

2. Zmieniamy html

Aby zmienić html szablonu musimu zmienić bloksowy szablon bazowy na podstawie którego powstał szablon który zmieniamy. 46 szablon jasnoszary powstał na bazie Białego (równie dobrze mógłby być to Blogowy, Theme B, Theme D, Rin) tak więc aby zmienić stronność potrzebujemy szablonu z wąską szpaltą po prawej takiego jak: Almost Spring, Spokojny, Kubrick, Connections, 36i6 A, 36i6 B lub ewentualnie Theme C. Ważne jest aby zwrócić uwagę na sposób umieszczenia tytułu bloga. W przypadku tego szablonu musi być on umieszczony zarówno nad szeroką jak i nad wąską szpaltą (dlatego też szablony: Niebieski, Klasyczny, Theme F, Theme G, Theme I mimo iż prawostronne zupełnie się nie nadają).

Zmieniamy więc html poprzez wybranie nowego szablonu u panelu administracyjnym bloga. Proponuję Spokojny.

spokojny

3. Dodajemy nasz CSS

Teraz przyda nam się nasz oryginalny CSS który dla bezpieczeństwa sobie skopiowaliśmy do notatnika. Zmiana bloksowej bazy zaowocowała także zmianą arkusza CSS tak więc pod zakładką CSS znajdziemy arkusz szablonu Spokojnego a przecież zależy nam na wyglądzie blokowego. Dlatego też kasujemy style spokojnego i wklejamy tam nasz skopiowany arkusz. Zabawa prawie skończona. Spokojnie możemy kliknąć zapisz i zerknąć jak wygląda nasz przestwiony szablon na blogu. Zapewne dobrze ale...

margines

4. Poprawiamy odstępy

O ile powyższe trzy kroki są bardzo proste i ogólnie rzecz ujmując takie same w przypadku każdego szablonu to ostatni, czwarty punkt wymaga indywidualnego podejścia. Jest bardzo wiele miejsc w arkuszu które odpowiedzialne będą za wygląd odstępów. Staram się aby odstępy pomiędzy elementami były określone 'najwyżej' jak to możliwe. Tutaj w zasadzie tak nie jest ponieważ margin i padding opisywałam nawet przy stosunkowo małych elementach. W tym przypadku najistotniejsza będzie jednak symetria. Jeżeli element ma tak samo określony prawy jak i lewy odstęp czy margines to nie musimy się tym przejmować. Zieniać będziemy tylko 'niesymetryczne' odstępy. Zerknijmy więc na największe elementy i ich marginesy: #BlogGlownyBox, #BlogBodyBox, #BlogWazkaSzpalta, #BlogSzerokaSzpalta

#BlogGlownyBox {
WIDTH: 900px;
MARGIN: 0px auto;
}
#BlogBodyBox {
WIDTH: 860px;
MARGIN: 0px 20px;
}
#BlogWazkaSzpalta {
MARGIN: 20px 0px 20px 0px;
WIDTH: 250px;
}
#BlogSzerokaSzpalta {
MARGIN: 20px 0px 20px 30px;
WIDTH: 580px;
}

Odstępy podaje się w kolejności: góra, prawy, dół, lewy tak więc biorąc pod uwagę symetrię porównujemy odstępy boczne: prawy i lewy. W zasadzie jest symetrycznie za wyjątkiem szerokiej szpalty. Własnie w tym miejscu definiowany jest odstęp pomiędzy wąską i szeroką szpaltą (w przypadaku tego szablonu, przy innych może być zupełnie inaczej; ja preferuję określać odstęp pomiędzy wąska a szeroką przy szerokiej ale przykładowo w przypadku bloksowych szablonów podstawowych częściej ten odstęp określony jest przy wąskiej). Zmieniamy więc margines lewy na prawy.

#BlogSzerokaSzpalta {
MARGIN: 20px 30px 20px 0px;
WIDTH: 580px;
}

Tutaj to wystarczy, wszystkie pozostałe odstępy są symetryczne.

Przesunięcie tytułu

Możemy jeszcze zmienić położenie tytułu. Ponownie w przypdku tego szablonu jest to banalnie proste, wystarczy przy #BlogTytulBox zmienić text-align z right na left (oczywiście nie zawsze to bedzie tak proste).

#BlogTytulBox {
TEXT-ALIGN: left;
}

Przy okazji warto zwrócić uwagę na sumę szerokości. #BlogGlownyBox powinien być równy #BlogBodyBox a także sumie #BlogWazkaSzpalta i #BlogSzerokaSzpalta.
900px = 20px + 860px + 20px = 0px + 250px + 0px + 30px + 580px + 0px

niedziela, 21 czerwca 2009

Jakoś tak się złożyło, że bardzo polubiłam szablon blokowy. W wersji czarnej jest po prostu rewelacyjnie uniwersalny - wystarczy jedynie wymienić zdjęcie i szablon nabiera innego charakteru. Najlepiej jednak pasują do niego zdjęcia czarno-białe dzięki czemu szablon jest bardziej wyrazisty. Dobrze wyglądają też zdjęcia z odrobiną cieplejszych barw, w szczególności czerwieni ale gdy zdjęcie będzie niebieskawe czy zielone trzeba by było wprowadzić do szablonu trochę więcej zmian. Dlatego też postanowiłam pobawić się nieco pomysłem na szablon blokowy. W ramach tej zabawy powstał jeden z szablonów serdecznych który już nieco lepiej akceptuje zieleń lecz poza tym jest bardzo podobny do pierwowzoru a przecież czasami przydałby się taki szablon w nieco innej konfiguracji. Dlatego też w nadchodzącym tygodniu postanowiłam pokazać jak można pobawić się szablonem blokowym nie zmieniając jego charakteru a jedynie układ i kolory.

Na początek chciałabym pokazać jak czarny wygląda 'na żywo' na blogu z treścią a nie tylko Lorem ipsum...
Z szablonu można usunąć zdjęcie pod tytułem dzięki czemu zdjęcia w notkach będą od razu widoczne, tak jak u ikroopki na zblizenia.blox.pl czy też u hameln-live na hamelnlive.blox.pl Można wymienić zdjęcie na własne dzięki czemu szablon stanie się bardziej osobisty. Fajne zdjęcia wybrali: arrdox, diablitza, 4x4disco, darwena. Można troszkę zmienić kolor, zastąpić czerwień inną barwą i już 'własny' szablon gotowy. Na koniec tej listy linków musi pojawić się tukee.blox.pl. Tutaj zdjęcie autorki pasuje idealnie do szablonu (powiedziałabym, że wygląda dużo lepiej niż zdjęcie które ja wybrałam).

Wyjątki z anatomii szablonu blokowego

Jestem bardzo zadowolona z CSS szablonu blokowego. Jest całkiem 'wygodnie' napisany. Przede wszystkim łatwo wprowadzać w nim zmiany, czasami wystarczy zmienić jedną cechę i już efekt osiągnięty. W związku z tym, że zmiany można tak łatwo wprowadzać szablon nadaje się także dla laików, którzy chcieliby nieco popróbować wprowadzania zmian w swoim szablonie. W tym tygodniu przy każdym szablonie opiszę jak wprowadzić drobne zmiany, jak coś przenieść czy dodać. Będą to przede wszystkim opisy rzeczy, które zrobiłam w tych szablonach, będzie sporo o CSS, trochę o doborze kolorów a na koniec coś mocno kombinowanego.

Plan jest taki (kolejność przypadkowa):

46szablonkatemac 47szablonkatemac 48szablonkatemac 49szablonkatemac 50szablonkatemac 51szablonkatemac

A może wy macie jakieś pytania odnośnie tych szablonów? Chcielibyście wiedzieć jak coś zostało zrobione i dlaczego właśnie tak a nie inaczej...

piątek, 19 czerwca 2009

Dzisiaj zdałam sobie sprawę z tego, ze dawno nie było tu żadnych nowości szablonowych. Ostatni raz o nowym szablonie pisałam 3 maja a i szablon nie był taki nowy bo zrobiony jeszcze w lutym. Oj zaległości mi się zbierają astronomiczne. Postaram się je jednak nadrobić. Dzisiaj pokażę drugi szablon z motywem biżuterii. Jest ciemny, nieco obdarty i w dużej mierze nawiązuje do pierwszego szablonu z serii handmade - zielonego.

szablon na blog zielony
szablon ręczny 09 - zielonkawy

Uwagi różne:

  • Szablon jest dość szeroki, powinny się bez problemu zmieścić zdjęcia mające nawet 530px szerokości.
  • Tym razem wybrałam nieco inne czcionki: za podstawę wybrałam Verdanę a zamiast Timesa użyłam Georgii.
  • Bloksowa baza to Spokojny ale tak samo powinny pasować htmle szablonów: Almost Spring, Kubrick, Connections, 36i6 A, 36i6 B; html musi mieć układ z wąską szpaltą po prawej i tytułem umieszczonym zarówno nad szeroką jak i nad wąska szpaltą
  • Podstawowa kolorystyka szablonu opiera się na brązach i zieleniach tak jak w przypadku pierwszego szablonu rękodzielniczego ale kolory te są tutaj znacznie ciemniejsze.
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładkiBloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie).  Dla chętnych kod do skopiowania i wklejenia w polu na kod html - są to cztery linki: do góry, do szablonu, do licencji i do mnie.
  • zapraszam do skorzystania

PS. Ten szablon to znów wielokrotnie przetwarzany pomysł. W przyszłym tygodniu też tak będzie bo ponownie zaprezentuję szablon blokowy ale później powinny się zacząć pojawiać nowości. Będzie szablon typograficzny z Verdaną - od razu w kilku kolorach do wyboru, będzie seria kulinarna - już gotowe są trzy szablony, zostały jeszcze trzy szablony serdeczne więc na pewno jeden z nich się pojawi, myślę też o kontynuowaniu szablonów filmowych. Na chwilę obecną myślę o prostych, minimalistycznych projektach ale ten typ w dużej mierze miesza się ze stylem retro więc spodziewać się można różnych szablonów. Pora więc wziąć się do pracy tak więc znikam i zapraszam w niedzielę, mam do powiedzenia kilka słów w temacie szablonu blokowego - będzie intensywnie i ze spora liczbą wyjaśnień. Zapraszam

środa, 10 czerwca 2009

Odkąd postanowiłam opisywać zmiany w polecajce sama ochota do częstych zmian mi przeszła. Początkowo planowałam zmiany sprowadzać swobodnie lecz często. Niestety jak to zwykle bywa na planach się skończyło a po opisaniu planów i potrzeba polecania mi przeszła. Potrzeba blogowania też jakoś ostatnio zmalała. Szablony robię dalej (około 12 mam niemal gotowych a nie mogę się zebrać na opisanie ich). Mam nadzieję, że to czasowe tylko bo wreszcie zabrałam się za długo oczekiwaną serię kulinarną i podoba mi się to co robię. A skoro pojawił się wątek kulinarny to ponownie zachęcam do zerknięcia na blog Doroty - wypieki tradycyjnie prezentują się wspaniale, nic tylko zacząć pichcić. Przy okazji szukania jakiejś pyszności dla siebie warto zauważyć nowe kolorki szablonu mojewypieki.blox.pl - jest niebiesko i ma być odświeżająco gdy nadejdą letnie upały.

Od czasu pierwszego polecjakowego wpisu nie przybyło na moim blogu nowych szablonów zbyt wiele. Minęły dwa miesiące a szablonów udostępniłam tylko cztery:

  • czwarty szablon serdeczny, brązowy z sercem za kratami - w zasadzie nic nowego bo to była przeróbka 39 blokowego
  • ósmy szablon rękodzielniczy, ciemny z biżuterią - już nieco lepiej bo szablon ma nieco inny od pozostałych charakter ale de facto jest to przeróbka beżowego Basica
  • piąty szablon serdeczny, czerwony z odciskami palców - nic nowego, przeróbka granatowego szablonu z M.Monroe
  • szósty szablon serdeczny, pomarańczowy trzyszpaltowiec - o tym mogę powiedzieć, że pomysł miałam całkiem 'nowy' ale tak się składa, że szablon ten zrobiłam jeszcze w lutym...

To podsumowanie wypada cokolwiek nieco przygnębiająco ale zawsze mogę liczyć na lepsze wyniki w następnej notce-polecjace.

Polecajki nie zmieniałam przez dwa miesiące przede wszystkim dlatego, ze nie miałam pomysłu na temat (bo kilka ciekawych informacji do polecania zawsze się znajdzie). Kilka dni temu, gdyblox.pl zmienił sposób wyświetlania indeksu szablonów, pojawiła się oczywisty temat na polecajkę - popularne motywy.

blox: lista szablonów stworzonych przez użytkowników

Oczywiście polecajkę zacznę od zwrócenia uwago na nowy sposób wyświetlania szablonów w indeksie szablonów udostępnionych. Jest duuużo lepiej niż było. Poprzednia lista szeregowana była wg. kolejności udostępnienia szablonu a że często nowi blogerzy udostępniali swój tradycyjnybloksowy szablon lista ta zawierała sporo 'niejasnych informacji'. Uszeregowanie szablonów wg. popularności zapewnia że wszelkie pomyłki i niejasności znajda się na końcu - nie ma wszak nic skuteczniejszego niż 'głosowanie nogami'. Kolejność w jakiej uszeregowana jest lista to jednak zdecydowanie mniej istotna zmiana wobec faktu, że teraz indeks nie jest jedynie listą linków - teraz to jest wygenerowany automatycznie podgląd każdej udostępnionej skórki. Jakościowo to spora zmiana w porównaniu do poprzedniego indeksu.

kate_mac: szablon ręczny 01 - zielony

O tym że zielony szablon rękodzielniczy jest moim najbardziej popularnym szablonem wiedziałam. Trudno tego nie zauważyć przy 76 komentarzach pod notka dotyczącą zasad korzystania. W zasadzie to właśnie jest podstawowy cel mojej prośby o pozostawienie komentarza zanim się skopiuje szablon - chcę wiedzieć które pomysły cieszą się powodzeniem a których lepiej nie powtarzać. Nowy indeks z pewnością jest całkiem niezłą informacją dotyczącąpopularności ale ja w dalszym ciągu będę wdzięczna za pozostawianie tego komentarza. Dzięki temu, zerkając tylko na listę komentarzy, mogę od razu ocenić czy szablon się sprawdza.
Czysto informacyjnie dodam, że następnym hit-szablonem będzie szablon ręczny 05 - niebieski. Zgadując też bym tak obstawiała (44 komentarze) - seria handmade to zdecydowanie trafiony pomysł (trzeci hit-szablon to lawendowy - 52 komentarze - hmm). Osobiście wybieram nieco inne szablony, wolę prostsze projekty. Na prywatnym blogu korzystam z szablonu Garamond i takie chyba lubię najbardziej.

Smashing Magazine: Web Design Trends For 2009

Skoro jak zwykle mówimy o wyglądzie stron może warto przyjrzeć się próbie zdefiniowania trendów popularnych w 2009 roku. Takie próby uogólniania i wyciągania jakiś wniosków popularne są zazwyczaj na przełomie roku ale szukać inspiracji możemy zawsze więc zapraszam do przejrzenia wniosków SmashingMagazine. Trendy opisane są w dwóch notkach.

Web Design Trends For 2009

More Web Design Trends For 2009

  1. Embossing Letterpress
  2. Rich user interfaces
  3. PNG transparency
  4. Big typography
  5. Font replacement (sIFR, etc.)
  6. Modal boxes
  7. Media blocks
  8. The magazine look
  9. Carousels (slideshows)
  10. Introduction blocks


  1. Out-of-the-box layouts
  2. One-page layouts
  3. Multi-column layouts
  4. Huge illustrations and vibrant graphics
  5. More white space than ever
  6. Social design elements
  7. “Speaking” navigation
  8. Dynamic tabs
  9. Still large search boxes
  10. Category visuals
  11. Author icons
  12. Icons and visual clues
  13. Tag index (instead of tag clouds)
  14. Illustrations in blog posts
  15. Watercolor
  16. Handwriting
  17. Retro and vintage
  18. Organic textures, tiles and photographic backgrounds
  19. Badges
  20. Price tags
  21. Ribbons

INTERNET maker: Webdesign w 2009 roku

Żeby nie było, że tylko na smashinga zaglądam to tym razem coś o trendach po polsku i nie z bloksa - ewidentnie nietypowo. Nie jestem pewna czy to przypadkiem nie jest objaw jakiejś obsesji ale odnoszę wrażenie, iż w większą chęcią czytałam na ten sam temat u Marka Kasperskiego na blogu. Bardziej mi chyba odpowiada taki bezpośredni, osobisty, blogowy opis tematu: ja dla Ciebie, my dla Was a nie bezosobowy opis: W ostatnim czasie zauważalne jest.., częstą zasada jest... itd. Warto przeczytać jednak oba wpisy. Pewne wątki czy tematy oczywiście powtarzają się.

Na początku zeszłego roku jeszcze całkiem sporą popularnością cieszyły się rozwiązania w tzw. stylu web2.0 czyli różnego rodzaju błyski, odbicia wszystko lekkie jasne i świetliste. Teraz łatwo już dostrzec całkiem sporą zmianę. Inspirują nas elementy które nazywam 'rzeczywistymi'. Blog zaczyna przypominać zeszyt czy nawet biurko. Wszędzie leżą telefony, kartki, ołówki czy kubki z kawą. Wszystko stara się mieć wygląd nieco zużyty przybrudzony i zrobiony naprędce. Ma być swobodnie ale z pomysłem. To wszystko jednak już jest widoczne trudno więc określić takie stwierdzenie mianem prognoz. Gdybym miała jednak coś zaproponować to polecałabym styl jeszcze bardziej pomieszany czyli kolaże. Może to być bardzo efektowny pomysł o ile nie wyjdzie zbyt chaotycznie. Póki co nie odważyłamsię jeszcze w tą stronę kierować.

I na koniec klasyczna rada i prognoza: mniej znaczy więcej. Zawsze efektownie będą wyglądać minimalistyczne projekty. Przy właściwym doborze kolorów i proporcji nieprzesadzony, stylowy projekt będzie wyglądał nowocześnie i nie zestarzeje się tak szybko jak trendy-pomysły.

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...