publikuj:

wydrukuj

6 skomentuj »

TAGI: merytoryczne , mikroblog , tipsy , css , kolor , layout , pinger , styl , stylizacja , tło , wygląd , zmiana

2009-12-13 15:30:20, dodał Tomasz Smykowski

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(http://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(http://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(http://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.

Przygotowałem dla Ciebie wpisy:

Strona tego bloga

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

6 skomentuj »

Komentarze

#1 Emilia 2010-02-26 23:14:02 0
Super artykuł, nie poradziłabym sobie bez tego, WIELKIE dzięki. Mam tylko jeden problem: skorzystałam z rady z pierwszego posta o zmianie stylu i wielkości czcionki (rada nr 3), ale zmieniła się tylko wielkość. Czy to znaczy, że moja przeglądarka (Google Chrome) nie obsługuje takiej funkcji??? :(
IP: 188.33.202.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5
#2 Psychiczna 2012-02-08 16:08:34 0
jak zmienić myszkę?
IP: 80.51.173.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2.25) Gecko/20111212 AskTbCLM/3.14.1.20007 Firefox/3.6.25
#3 Nieposkromiona...na wieki 2012-02-25 13:45:59 0
no właśnie jak zmienić myszkę ??
IP: 82.160.100.[...] Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; FunWebProducts)
#4 Balerina w glanach 2012-02-27 18:29:38 0
Myszkę wchodzisz na str. -->http://www.cursors-4u.com/

klikasz na wybrany kursor i kopiujesz kod ;D

i wklejasz go w skrypcie w ustawieniach wyglądu bloga :**

Przepraszam za wcięcie jeśli sobie nie życzysz ale chciałam pomóc ;)
IP: 81.190.146.[...] Mozilla/5.0 (Windows NT 6.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
#5 loluu. 2012-04-28 10:53:06 0
Jak zmienić kolor czcionki we wpisach.? (nie chodzi mi o tytuł)...
IP: 81.210.63.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.162 Safari/535.19
#6 inna 2012-05-24 14:48:38 0
niedawno temu miałam kod, którym można było od razu zmienić wszystkie czcionki na całym blogu, był krótki. niestety ostatnio robiłam porządek i usunęłam go, a teraz nie mogę go znaleźć. czy ktoś mógłby mi podać ??
IP: 37.30.88.[...] Mozilla/5.0 (Windows NT 6.0) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.