Jak upiększyć ścianę?!!

poszkole.pl

Pamiętajcie, że przede wszystkim możecie użyć edytora strony. Pozwoli on Wam zmienić tło ściany, dodać ramki dla całego komponentu itp. Gdybyście chcieli osiągnąć coś więcej, to zapraszamy do przeczytania tego artykułu

Od czego zacząć?

Trzeba dodać do swojej stronki blok tekst/html i w nim napisać:

Między ">" a "<" dziecie="" umieszczali="" ry="" pozwoli="" wam="" d="" waszych="" stronek.="" nazywamy="" go="" p="">

<" dziecie="" umieszczali="" ry="" pozwoli="" wam="" d="" waszych="" stronek.="" nazywamy="" go="" p="">

Przykładowy kod CSS wygląda tak:

.boxWall div.wall-box-a {
border-color: #00ff00;
border-style: groove;
border-width: thick;
}

Teraz spróbuję wyjaśnić Wam co jest co. Przed znakiem "{" znajdziecie selektor - określa on element, którego wygląd zmieniamy. Pomiędzy "{" a "}" widzicie listę właściwości tego elementu i wartości dla tych właściwości. Na lewo od ":" znajduje się nazwa właściwości, a na prawo jej wartość.

Co spowoduje ten kawałek kodu powyżej? Spowoduje on, że ta część Ściany, której widzicie swój avatar i pole do wpisania nowego posta zostanie otoczona zieloną ramką (border-color: #00ff00) o stylu groove - to taki fajny trójwymarowy efekt (border-style: groove) i do tego ramka będzie gruba (border-width: thick).

Selektory

Poniżej znajdziecie listę selektorów, które pozwolą Wam zmieniać wygląd ściany:

.boxWall div.wall-box-a - górna część komponentu, ta w której widzicie swój avatar i pole pozwalające napisać nowego posta oraz przycisk opublikuj;
.boxWall div.wall-box-a div.secondary-a input.label - pole służące do pisania nowego posta;
.boxWall div.wall-box-a div.secondary-a input.submit-a - przycisk opublikuj
.boxWall div.blockContent - część ściany, w której widoczne są posty i komentarze, poniżej pola do wpisywania nowego posta;
.boxWall div.blockContent p.nick-a a - nick (i link do profilu) autora posta;
.boxWall div.blockContent .secondary-a p - treść posta;
.boxWall div.wall-box-b div.secondary-a p.add-comment-a span - czas dodania posta;
.boxWall div.wall-box-b div.secondary-a p.add-comment-a a - link umożliwiający załadowanie komentarzy do posta;
.boxWall div.blockContent div.wall-comments-a - cały komentarz, razem z nickiem oraz avatarem autora, czasem itp;
.boxWall div.blockContent div.wall-comments-a .secondary-c .user-a a - nick autora komentarza;
.boxWall div.blockContent div.wall-comments-a .secondary-c .user-a p - treść komentarza;
.boxWall div.blockContent div.wall-comments-a .secondary-c .user-a .add-comment-a - informacja o tym, kiedy komentarz został dodany;
.boxWall div.blockContent div.wall-comments-a input.input-b - pole służące do wpisywania nowego komentarza;
.boxWall div.blockContent div.wall-comments-a label - opis pod polem służącym do wpisywania nowego komentarza;
.boxWall div.blockContent #nextPost - przycisk pozwalający na załadowanie starszych postów, na samym dole komponentu;

Mam nadzieję, że jest to w miarę jasne :] Teraz czas na listę podstawowych właściwości w CSS.

Jak zmienić wygląd czcionki?

rozmiar - właściwość font-size; pozwala określić rozmiar czcionki w pikselach, np. 18px, 10px; px to skrót od piksel i zawsze musi być na swoim miejcu;
styl - właściwość font-style; pozwala wam określić, że coś ma być napisane kursywą - wtedy ustawianie wartość na italic
krój - właściwość font-family; pozwala wam wybrać czcionkę, którą ma być napisany tekst, np. Courier, Tahoma, monospace;
grubość - właściwość font-weight; pozwala określić, czy czcionka ma być zwykła (wartość normal) czy pogrubiona (wartość bold)
kolor - właściwość color; pozwala Wam wybrać jakiego koloru ma być tekst, np. black (czany), blue (niebieski), pink (różowy), #ff0000 (czerwony), #ffffff (biały); możecie tutaj używać angielskich nazw kolorów;

Jak zmienić tło?

kolor - właściwość background-color; pozwala określić kolor tła wybranego elementu strony; jej wartość jest taka sama jak w przypadku koloru czcionki, czyli np. black (czany), blue (niebieski), pink (różowy), #ff0000 (czerwony), #ffffff (biały); możecie tutaj używać angielskich nazw kolorów;
obrazek - właściwość background-image; jej wartość to np. url(http://example.com/obrazek.jpg) - pomiędzy "(" a ")" trzeba wstawić adres do obrazka, którego chcecie użyć;

Jak dodać ramki?

kolor - właściwość border-color; ponieważ to kolor, to wartości przyjmuje takie jak w przypadku tła i czcionki - spójrzcie powyżej;
styl - właściwość border-style; dzięki nie możecie ustalić jaki wygląd ma przyjąć Wasza ramka: dotted (kropki), dashed (krótkie kreski), groove (jeden z efektów trójwymiarowych), ridge (inny efekt trójwymiarowy), outset (jescze innych efekt 3D);
grubość - właściwość border-width; pozwala określić jak gruba ma być ramka, np. thin (wąska), medium (średnia) i thick (gruba);

Jak ukryć jakąś część komponentu?

Jeśli bardzo wam zależy na tym, żeby coś ukryć musicie użyć właściwości display i przypisać jej wartość none.

Gdyby okazało się, że nie możecie ustawić jakieś właściwości, to po jej wartości dodajcie !important.

A teraz przykład!

Gdybyście wkleili taki kod na swoją stronę, to:

tło postów i komentarzy byłoby czerwone;
Wasz avatar i pole do pisania posta byłoby otoczone zieloną i grubą trójwymiarową ramką;
komentarze napisane są kursywą (czyli pochyloną czcionką);
nick autora komentarza jest pogrubiony i różowy;
czas dodania posta i komentarza są ukryte;

Powodzenia!

Podobne artykuły:

Ściana - zobaczcie, co się zmienia! ( 2011-09-19 )
Podrasuj ścianę!!! ( 2011-08-31 )

2011-08-31

Podobał ci się ten tekst?

Średnia: 60

Komentarze:

~ *Panicz Ciel* ~ 08-05-2012 15:06
Dużo zrozumiałam . o.o
Easy Rider 01-05-2012 15:53
A może nasz kod na całkowite usunięcie ściany
Bee; 28-04-2012 15:46
... Oddawaj komentarze -.-
Me gusta . ♥ 18-03-2012 16:34
` Tiaa ... Wszystko zakumałam . ;3
kacper 18-03-2012 9:53
hehehehehehe
irracjonalna. 30-11-2011 20:08
żaden z nich nie działa ; /
kultywator 20-10-2011 18:36
http://tinyurl.com/3f9hdbz musisz to zobaczyć!
pięciogwiazdkowy bit 16-10-2011 17:13
haa . zaczaiłam :D i napisałam kod ; DD
PannaKaprys 13-10-2011 18:49
Nie narzekajcie. Wszystko jedno czy komentarze czy ta ściana. Przynajmniej na ścianie szybciej się dodaje wpisany tekst.
αяє уσυ тαℓкιиg тσ мє? 08-10-2011 18:33
mi to nie wychodzi :(
wyluzuj beeejbe . ^^ 03-10-2011 15:11
ja chce komentaarze ;/
Katie Jessica Patricia Black | Wyzywać do bitew !!! 02-10-2011 19:57
jak to odczytać?
.Drivery. Jednak nie usuwacie ?! Nie opuszczam ♥ 19-09-2011 16:56
Nic kurva z tego nie kapie ! Oddawaj komy.
Gorąca Sel ♥. 12-09-2011 18:46
dajcie komy !!!!!!!!!!oddajcie komentarze !!!! !!!
Nawiedzony 04-09-2011 0:35
eee... co?!
ZAWIESZAM , duurna . ™ | 02-09-2011 20:43
zapraszam ;D http://graphics-on-poszkole.blog.onet.pl/ czekam na komy, bo nie będzie next noci ;P
Katy Pery 02-09-2011 18:42
<3 SŁUCHAJCIE, JEŚLI DO 15 WRZEŚNIA MARIAN NIE ODDA KOMÓW TO 16 WRZEŚNIA WSZYSCY USUWAMY POSZKOLE.JEŚLI SIĘ ZGADZACIE TO WYSYŁAJCIE TEN TEKST DO ZNAJOMYCH I WKLEJAJCIE DO INNYCH "PLOTEK"
Medium 02-09-2011 16:45
Nie wierzę... ps chyba nie zapanował nad masą tych kodów. I co tu zrobić? Wycofać się... Polubić kody? TE STRONY WYGLĄDAJĄ SUCKS!
Dinaa. 02-09-2011 16:28
tyle osób chcę komentarze. więc niech moderator raczy przeczytać że ściana to jest zły pomysł.
miska117 02-09-2011 15:09
jejku ta ściana jest ochydna.. Serio ja chyba usunę to konto ! ;/