VGH: Jak zmienić system ocen

Na vgh system ocen wyrażany jest za pomocą określeń od "Świetny!" do "Słaby", a co jeśli chcielibyśmy mieć gwiazdki, kropki, łapki bądź inne ikonki? Nie można? Oczywiście, że można to zmienić dzięki dobremu CSS. Poradnik stworzyłam specjalnie dla jednego z userów z forum webmasterzy.org - Tomi1991, który swego czasu pytał się mnie czy kiedyś pojawi się jakaś modyfikacja związana z ocenami.

Tak jak to widać na obrazku powyżej i poniżej, naszym celem jest wprowadzenie gwiazdek w systemie ocen.

 1. Dodaj lub edytuj istniejący panel (lewy lub prawy):

PA -> Zarządzanie stroną -> Zarządzanie panelami

2. Skopiuj i wklej w panel poniższy kod:

<style type="text/css">
/*---------System ocen-------*/
/*---------Modyfikacja przygotowana przez Fantagiro || fantidesign.blogspot.com-------*/
/*---------Zmiana standardowej ikonki na gwiazdkę-------*/
img[src*="pollbar.gif"]{
background-image: url(http://www.fotoload.pl/123aa66/473aed4db4402fd6a914577b757fff8215358.png);
overflow:hidden;
padding-top: 22px;
height:0;
}

/*---------Stylizacja klasy poll-------*/
.poll {
background-color:transparent;
border:0px;
}

/*---------Ocena: świetne-------*/
.textbox[name="rating"] option[value="5"]{
font-size:0px;
background-image: url(http://api.ning.com/files/5F9a0MNc6A-ahRJHkF1JFgOGautRvWFlr25dgmuM3LelpwoZMDAdtpYZsf2sZ1MZY5--NwuVoef1tX9DOZyU*rNblDDDeoJ4/rating5_mala.png);
background-repeat: no-repeat;
background-position: left center;
height:15px!important
}

/*---------Ocena: bardzo dobre-------*/
.textbox[name="rating"] option[value="4"]{
font-size:0px;
background-image: url(http://api.ning.com:80/files/T85fcHeC*eJsCxiEb3WDR*phlmUW3UmvfplxQITFuB6LoBsCJHZfB1b27gWhjE1TYO-djGPKj4dH8nPP9X7mPQjfQNszhqiH/rating4_mala.png);
background-repeat: no-repeat;
background-position: left center;
height:15px!important
}

/*---------Ocena: dobre-------*/
.textbox[name="rating"] option[value="3"]{
font-size:0px;
background-image: url(http://api.ning.com:80/files/Pca5rskvHDRcAzXmuxkS8qsoljEUwuJNF9xc9IzEPMIuRjEPOb405rVpolOwf1fOgJ7kDk3XEIu9LOm8Y9liVhyJaL*zGsH6/rating3_mala.png);
background-repeat: no-repeat;
background-position: left center;
height:15px!important
}

/*---------Ocena: przeciętne-------*/
.textbox[name="rating"] option[value="2"]{
font-size:0px;
background-image: url(http://api.ning.com:80/files/GdRPMa1VClvyTed6x*6FNPJl7xdso-bksJ6tI6hXTqGv7IBtFDOyIxXyEUZcgyslwBDJoqH1HHKRbsBTfEO3WkwD6pNwfbJm/rating2_mala.png);
background-repeat: no-repeat;
background-position: left center;
height:15px!important
}

/*---------Ocena: słabe-------*/
.textbox[name="rating"] option[value="1"]{
font-size:0px;
background-image: url(http://api.ning.com:80/files/RzkLfxRmpYBrTcZNX586PVTjyrcI-wM2eGL*G1XqpHfIqO82R-ODht-U9VCvnU799g5UL1zKbuthUtGMuvq8KZHrQjoHPxZy/rating1_mala.png);
background-repeat: no-repeat;
background-position: left center;
height:15px!important
}
</style>

3. Zapisz panel i pamiętaj aby go włączyć!

Oczywiście zamiast gwiazdek możecie wykorzystać inną grafikę jak serduszka, kufle piwa itp....