Kolejna część poradnika z serii “Jak upiększyć Pingera”. Tym razem więcej o kolorach i tłach elementów na Pingerze. Po pierwszej części 8 porad teraz następne 7 co daje już w sumie 15 porad o ulepszeniu Pingera przez CSS.

W związku z ostatnią prośbą ellki8 znowu grzebałem w ustawieniach Pingera, aby określić jak zmienić kolory wpisów itp. Ellka równolegle też doszła do kilku ciekawych sposobów. Przedstawiam je wszystkie jako uzupełnienie pierwszego posta.

Po pierwsze aby zmieniać kolory na Pingerze trzeba znać ich kody. Zestaw kolorów i ich kodów znajduje się tutaj. Kolor czerwony to #FF0000 (FF, uwaga- dalej zera a nie litery o), a niebieski to #0000FF.

Wszystkie zmiany wpisujemy w pole dostępne po wybraniu na Pinger: Ustawienia -> zakładka “Wygląd minibloga” -> na dole “Własne style” w pole “CSS”.

1. Zmiana loga:

Zmiana loga jest opisana tutaj, żeby zmienić trzeba wkleić taki tekst:

#logo {
background-image: url(https://strona.pl/obrazek.jpg);
filter: none;
height: 150px;
width: 450px
}

Tutaj dwie rady: po pierwsze po znalezieniu obrazka w sieci nie wrzucajcie tutaj jego adresu zamiast http://strona.pl/obrazek.jpg – wrzućcie go najpierw np. na imageshack.us a później użyjcie linku bezpośredniego (direct link). W ten sposób nie obciążycie transferem osoby która udostępniła obrazek.

Dwa: height i width powinno odpowiadać wielkości obrazka. Jeżeli podacie inną wielkość obrazek nie będzie dobrej jakości. Lepiej pobrać obrazek na dysk, zmienić rozmiar na odpowiedni, wrzucić i podać jego prawdziwe rozmiary.

Jeżeli chcemy żeby logo było po środku linię background-image… zmieniamy na taką:

background: url(https://strona.pl/obrazek.jpg) no-repeat left center;

2. Zmiana tła wpisów

Wpisy na Pingerze mają na przemian dwa kolory. Dlatego trzeba zmienić kolor parzystych i nieparzystych wpisów (even, odd):

.message-odd div.entry, .even {
background: #FF0000

}
.message-even div.entry, .odd {
background: #00FF00
}

Taki kod spowoduje, że tło wpisów będzie na przemian czerwone (#FF0000) i zielone (#00FF00).

3. Ramka otaczająca posty

Usunięcie ramki:

#main_news {
background: none
}

Zmiana koloru:

#main_news {
background: #FFFFFF;

}

Zmieni kolor ramki na biały.

Ustawienie obrazka jako tło:

#main_news {
background: url(https://serwis.pl/obrazek.jpg)
}

4. Zmiana koloru ramek po prawej

#right, .sidebox, #right-example-profile, .recomended, #right_content .sidebox-odd {
background: #0000FF;
}

Zmieni kolor ramek na niebieski (#0000FF).

5. Pogrubianie tekstu

Pogrubianie tekstu odbywa się przez użycie gwiazdek (*) np. *gruby tekst*. Są też inne sposoby na stylizowanie tekstu, ale nie mogę ich teraz znaleźć (link?).

6. Zmiana koloru belki nagłówkowej

div.profil-info {
background: #FF0000

}

7. Dla zaawansowanych

Jak pewnie zauważyłeś każda zmiana polega na określeniu obiektu do zmiany (main_news) i w nawiasach klamrowych właściwości (np. background). Jeżeli chcesz poznać więcej obiektów do zmiany zainstaluj Firefoxa i dodatek Firebug i poczytaj o CSS. Oczywiście to wymaga więcej szukania w sieci, ale od czegoś przecież trzeba zacząć.

Zachęcam do eksperymentów i jeszcze raz podziękowania dla Ellki, bez której ten wpis by nie powstał. Jeżeli chcesz więcej rad to można je znaleźć na Pingerze pod tagiem CSS.