Jak upiększyć minibloga na Pingerze cz. 2

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
}

Czytaj podobne  Cyfrowy podpis wyborów na prezydentów, wójtów i burmistrzów 2014

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.

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.

Przeczytaj też

55 ebooków programistycznych i nie tylko, które po... Ebookpoint zorganizował After Party z okazji urodzin i do końca dnia można jeszcze kupić super tanio ebooki. Poniżej moja toplista 55 ebooków programi...
55 ebooków programistycznych i nie tylko, które po... Ebookpoint zorganizował After Party z okazji urodzin i do końca dnia można jeszcze kupić super tanio ebooki. Poniżej moja toplista 55 ebooków programi...
21 000 ebooków (w tym programistyczne) od 6,90 do ... Tylko do jutra 21 000 ebooków (w tym programistyczne) od 6,90 zł. Wielka promocja Ebookpointa ruszyła z okazji 8 urodzin serwisu. Nawiązują...
Aktualności dla subskrybentów Przegląd aktualnych promocji dla programistów dla subskrybentów newslettera. Do końca dnia ebook Sieci komputerowe. Najczęstsze problemy ...
10 fiszek do nauki programowania w Pythonie Uczysz się programowania w Pythonie? Pobierz te 10 fiszek, które ułatwią Ci zapamiętanie funkcji wbudowanych* w Pythona! Programowanie potrafi ...
Napisano w Informatyka Tagi: , , , , , , , , ,
10 comments on “Jak upiększyć minibloga na Pingerze cz. 2
  1. Regi99 pisze:

    Dzięki 🙂 Bardzo pomocne

  2. Any pisze:

    A jak zmienić czcionkę na blogu?

  3. Muzungu2 pisze:

    dzięki 😀

  4. sparkles pisze:

    Dzięki wielkie! Szukałem jak pogrubić czcionkę na pingerze =D

  5. Dzięki wielkie , przydało mi się :* 🙂

  6. JA pisze:

    hej bardzo pomocne zapraszam do mnie na pingera

    I hope

  7. thtrh pisze:

    dzięki

  8. ewelina pisze:

    nie dziala

  9. Wiki pisze:

    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/

  10. Roksna pisze:

    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ć?