Jeśli jesteś zielony i nie znasz CSS to...

...korzystaj ze standardowego szablonu (ot tak od razu)

...lub wybierz jeden z gotowych szablonów

Najpierw stwórz bloga (nadaj mu nazwę i zapisz) w dziale edytuj blog

I to wszystko... jeśli masz większą wiedzę, to zapraszam do dalszej części (nie przejmuj się, że jej nie masz - zawsze możesz się nauczyć)

Ale jeśli masz tajemną wiedzę CSS to...

...korzystaj z gotowych szablonów

...stwórz nowy szablon (prawie) od zera za pomocą jednej linijki!

...stwórz szablon na podstawie istniejącego stylu

...wiesz, że możesz mieć kilka szablonów, które będziesz zmianiał na różne okazje?

Dlaczego CSS?

WOLNOŚĆ

Kiedy zastanawialiśmy się ile władzy należy ci się nad wyglądem twojego blogu, pomyśleliśmy, że mniej niż wszystko to za mało.

Kiedy zastanawialiśmy się nad tym, jak możesz mieć największy wpływ na bloga, odpowiedź była jedna - style CSS. Jeśli zobaczysz stronę Zen Garden to uwierzysz na własne oczy.

To jest ta sama strona w różnych wersjach, które różnią się tylko CSSem.

Nie mamy prawa ograniczać twojej wyobraźni. Ona jest na pierwszym miejscu.

Jak działają style CSS na Absurd Blogach JM?

Szablony korzystają ze styli CSS, co oznacza, że do poszczególnych elementów strony odwołujesz się za pomocą takiej samej składni jak pisząc style CSS dla swojej strony WWW. Umiesz pisać CSS? Poznaj elementy bloga JM i w ciągu paru minut możesz mieć swój wygląd!

Dla uproszczenia, stworzyliśmy podstawowy styl o nazwie blog.css. Jest dołączany do każdej strony twojego bloga i odpowiada za styl Domyślny.

Dlaczego to dobre rozwiązanie? Ponieważ dzięki temu nie musisz tak naprawdę tworzyć styli od zera, wystarczy, że dopiszesz nowe style które zmodyfikuja podstawowy wygląd bloga.

Blog.css wygląda tak:

Krok po kroku: Stwórz swój styl (prawie) od zera

Wejdź na stronę edycji bloga.

W sekcji Wygląd wybierz NOWY STYL. Otworzy się formularz tworzenia stylu.

Wybierz nazwę nowego stylu, wpisz kod CSS i zapisz nowy styl pod wybraną nazwą np Mój Styl Letni.

W sekcji Wygląd wybierz wygląd z listy rozwijanej.

JUŻ!

Krok po kroku: Stwórz swój styl na podstawie istniejącego

Wejdź na stronę edycji bloga.

W sekcji Wygląd wybierz NOWY STYL. Otworzy się formularz tworzenia stylu.

Z listy rozwijanej "Oprzyj swój styl na stylu" wybierz wybrany przez ciebie styl bazowy. Za chwilę pojawi się w polu edycji

Wybierz nazwę nowego stylu, wpisz kod CSS i zapisz nowy styl pod wybraną nazwą np Mój Styl Letni.

W sekcji Wygląd wybierz wygląd z listy rozwijanej. Już!

Podaj mi jakieś przykłady...

Jeśli chcę zmienić czcionkę bloga wystarczy, że moim stylu dopiszę kod:

body {font: normal 12px Arial}

Jeśli chcę zmienić kolor tła strony lub wstawić tam obrazek:

body {background: orange url(http://adres-obrazka/plik.jpg) center no-repeat}

Jeśli chcę zmienić szerokośc kolumn bloga (na węższy)

#blog {width:600px;} #blogGlownaKolumna {width:400px} #blogBocznaKolumna {width:150px}

Jeśli chcę zmienić wielkość i kolor tytułu bloga

.blogTytul {font:bold 45px 'Times New Roman', Arial; color:pink}

...i tak dalej. Zmiany można łączyć w nieskończoność.

Lista najważnieszych elementów bloga, którym możesz nadać dowolny styl

CZCIONKA I TŁO STRONY

• body
• A, A:link - kolory wszystkich linków

ELEMENTY LAYOUTU

• #blog
• #blogNaglowek
• #blogGlownaKolumna
• #blogBocznaKolumna
• #blogStopka

ELEMENTY NAGLOWKA

• .blogTytul
• .blogHaslo
• #blogNaglowekMargines

ELEMENTY BOCZNEJ KOLUMNY

• .blogBokNaglowek
• .blogBok

ELEMENTY BOCZNEJ KOLUMNY

• .blogBokNaglowek
• .blogBok
• .data

ELEMENTY NOTKI

• .notkaTytul
• .notkaInfo
• .blogWiecej

Ściąga ze stylami

Gdzie mogę dowiedzieć się czegoś więcej?

• Kurs Browse Happy - dobry, polski kurs, choć nawigacja ukryta - jeśli zapoznasz się z działem, link do następnego jest na dole strony
• Kurs Heliona - dla początkującyh, nieco skomplikowany
• Ściąga CSS po polsku - dla tych co wiedzą (prawie) wszystko, tylko nie pamiętają
• Cheat Sheet czyli kartka ze ściągą - wydrukuj sobie, a będziesz miał pod ręką zawsze najważniejsze elementy CSS. Bardzo przydatne.
• Quirksmode - najlepsza strona dla webmasterów, którzy pracują z CSS i JS - tu znajdziesz odpowiedź na najbardziej skomplikowane pytania. Bez tej strony blogi na JM nie wyglądałyby tak jak wyglądają i ich tworzenie trwałoby duuuużo dłużej. Jedyny minus - strona po angielsku.