004† I Like You The Best; CSS

Postanowiłam napisać taki troszkę dłuższy post, w którym znajdziecie dużo przydatnych(w szczególności dla szabloniarzy) kodów CSS. :) Oczywiście zastosowanie, które tutaj pokaże możecie dowolnie zmieniać, bo chodzi tutaj o pokazanie wam do czego dany selektor jest. No to do dzieła!

Taka podstawa bez, której nie będziemy mogli pisać kodów:

1) Kod CSS zapisuję się w następujący sposób

selektor {

cecha:  ...

}

2) Jeśli do danego selektora chcemy przypisać 2 lub więcej cech należy każdą z nich zamknąć ";" np.:

 .post-outer { /* OBRAMOWANIE POSTA */
border-top-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-right-style: dotted;
}

(więcej o obramowaniu znajdziecie poniżej)

FAQ - Zajrzyjcie w razie gdybyście nie rozumieli lub chcieli się dowiedzieć więcej :)

KODY DLA STRON

selektor:  .tabs-outer .PageList

Ten selektor przyda się nam, gdy będziemy chcieli zmienic tło paska stron np.: na obrazkowe.

.tabs-outer .PageList { /* TŁO PASKA STRON */
background-image: url(LINK DO OBRAZKA);
}

PRZYKŁAD ZASTOSOWANIA

Uwagi do powyższego kodu: nie musicie usuwać tekstu w /* ... */, bo on nie psuję niczego w kodzie, a potem, gdy będziemy chcieli jeszcze raz zmienić coś w HTML to będziemy mieli po polsku napisane do czego jest ten kod. :)

---

selektor: .tabs-inner .widget li a
Ten selektor odpowiada niezaznaczonym stronom.
np.:
.tabs-inner .widget li a { /* NIE ZAZNACZONE STRONY */
background-image: url(LINK DO OBRAZKA);
}
PRZYKŁAD ZASTOSOWANIA 

KODY DLA POSTÓW

selektor: .widget h2.date-header, .main-inner .widget h2.date-header span
Ten selektor odpowiada za tło dla dat.

.widget h2.date-header, .main-inner .widget h2.date-header span { /* TŁO POD PASEK DATY */
background-image: url(LINK DO OBRAZKA);
}

PRZYKŁAD ZASTOSOWANIA 

---

selektor: h3.post-title, h3.post-title
Ten selektor odpowiada za tło pod tytuły postów.

h3.post-title, h3.post-title { /* TŁO POD PASEK TYTUŁU POSTA */
background-image: url(LINK DO OBRAZKA);
}

PRZYKŁAD ZASTOSOWANIA

---

selektor: .post
Ten selektor odpowiada za tło postu, ale tylko pod szerokość tekstu.

.post { /* TŁO POD NOTKĘ I TYTUŁ POSTA */
background-image: url(LINK DO OBRAZKA);
}
PRZYKŁAD ZASTOSOWANIA

---

selektor: .post-outer
Ten selektor odpowiada za całego posta.

.post-outer { /* TŁO POD CAŁEGO POSTA */
background-image: url(LINK DO OBRAZKA);
}
PRZYKŁAD ZASTOSOWANIA

---

I taki bonus dla was, a mianowicie kod na wstawienie obrazka bezpośrednio pod tytułem postu.

.post-header { /* LINIA ODDZIELAJĄCA TUTUŁ POSTA OD TREŚCI */
padding: 10px;
background: url("http://pctr.pl/pics/ce4297e43765a4b143502a53a41f42bb.png") repeat-x scroll center bottom transparent;
text-align: center;
font-size: 10px;
}* padding - tutaj podajecie wysokosc jaką chcecie by miała wasz obrazek
* font-size - tutaj piszecie jaką chcecie wartość by obniżyć tekst notki od obrazka
PRZYKŁAD ZASTOSOWANIA

GADŻETY

selektor: h2
Ten selektor odpowiada tytułom gadżetów.

h2 { /* TŁO POD TYTUŁ GADŻETU */
background-image: url(LINK DO OBRAZKA);
}
PRZYKŁAD ZASTOSOWANIA

---

selektor: .sidebar .widget
Ten selektor odpowiada treściom i tytułom gadżetów.

.sidebar .widget { /* TŁO POD TYTUŁ GADŻETU ORAZ TREŚĆ */
background-image: url(LINK DO OBRAZKA);
}
PRZYKŁAD ZASTOSOWANIA

---

I jak? Przydadzą się kody, czy już wszystkim dobrze znane? 
Jeśli będzie dużo próśb to dodam nowe, bo co rusz poznaję inne kody. Nawet teraz znam kilka takich, które mogłabym podać, ale wykorzystam je do następnej notki, a na razie biorę się robienie zakładki FAQ, w której możecie pytać o cokolwiek związanego z kodami, szablonami, a spróbuję pomóc i znaleśc rozwiązanie.

+ zapraszam na Pandę do wzięcia udziału w "Szablon na życzenie" :)
również prosiłabym o komentarze pod tamtejszymi postami, bo jest pusto, a to wcale nie motywuję do wygospodarowywania czasu po to by robić szablony.
xoxo,
FEYRIS