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.

Dzięki 🙂 Bardzo pomocne
A jak zmienić czcionkę na blogu?
dzięki 😀
Dzięki wielkie! Szukałem jak pogrubić czcionkę na pingerze =D
Dzięki wielkie , przydało mi się :* 🙂
hej bardzo pomocne zapraszam do mnie na pingera
I hope
dzięki
nie dziala
Heej, mam problem ze mianą CZEGOKOLWIEK, i nie wiem jak to ‘naprawić’. Mój problem z blogiem polega na tym że jak klikam już ”zapisz zmiany” strona się oczywiście odświerza ale wygląda zupełnie jaky by nigdy nic. Ustawienia są takie jak przedtem a i cały czas mam zaznaczone ”użyj domyślnych stylów” i tego także NIE MOGĘ zmienić ;/ HELP ME, PLEAS !!! .. ;__; http://kociara123.pinger.pl/
Witam 🙂 Chciałabym się dowiedzieć, czy jest możliwość dodania “zakładek” na pingerze? Chciałabym mieć coś takiego na swoim blogu, żeby się klikało np. w “opisy 2 sezonu” i tam wyświetlałyby się wszystkie wpisy dotyczące tego. Jest taka możliwość? Jeśli tak, to jak to zrobić?