VGH: Jak zmienić w forum ikonki nowe posty, brak nowych postów itp.

Masz stronę na vgh, ale spędza ci sen z powiek fakt, że nie możesz zmienić ikonek w forum, które sygnalizują nowe posty, brak nowych postów itp? Brak FTP nie jest przeszkodą, gdy zna się CSS. Dzięki poradnikowi wyjaśnię ci jak standardowe ikony w Forum, które sygnalizują nowe posty, brak nowych postów, temat przyklejony, temat zablokowany, itd. zmienić na własne ikonki tak jak na obrazku obok (pierwsze pochodzą ze stylu Executive, zaś drugie to już moje ikonki).

W tym poście zaprezentuje sposób numer jeden aby zmienić ikonki. Drugi sposób to implementacja ikonek z innego stylu - poradnik znajdziecie tutaj.

W poniższym kodzie posłużyłam się gotowymi ikonkami o wymiarach 16x16px, pobranymi z iconfinder.com, ponieważ i tak każdy kto będzie je zmieniał, wprowadzi ikonki związane z tematyką swojej strony, zaś te posłużą tylko jako przykład:

 1. Utwórz 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">
/*----Forum - modyfikacja ikon: nowe posty, brak nowych postów itp.--*/
/*----Modyfikacja przygotowana przez Fantagiro || fantidesign:blogspot.com--*/

/*----Brak nowych postów--*/
img[src*="folder.gif"] {
background-image: url(http://cdn1.iconfinder.com/data/icons/vaga/comment.png);
overflow:hidden;
padding-top: 16px;
width: 16px;
height:0;
}

/*----Nowe posty--*/
img[src*="foldernew.gif"] {
background-image: url(http://cdn1.iconfinder.com/data/icons/Sizicons/16x16/double_comment.png);
overflow:hidden;
padding-top: 16px;
width: 16px;
height:0;
}

/*----Nowe posty i 20 więcej--*/
img[src*="folderhot.gif"] {
background-image: url(http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png);
overflow:hidden;
padding-top: 16px;
width: 16px;
height:0;
}

/*----Temat przyklejony--*/
img[src*="stickythread.gif"] {
background-image: url(http://cdn2.iconfinder.com/data/icons/diagona/icon/16/102.png);
overflow:hidden;
padding-top: 16px;
width: 16px;
height:0;
}

/*----Temat zablokowany--*/
img[src*="folderlock.gif"] {
background-image: url(http://cdn2.iconfinder.com/data/icons/diagona/icon/16/101.png);
overflow:hidden;
padding-top: 16px;
width: 16px;
height:0;
}
</style>

Ikonki na własne podmieniamy w miejscu: "background-image: url(...)".

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

Ważne:  

• wartości atrybutów padding-top i width musisz dostosować do wymiarów swoich własnych ikonek. Jeśli wykorzystasz ikonki o wymiarach 25x25px to atrybuty przyjmą wartości:
  

  padding-top: 25px;
  width: 25px

• wysokość, czyli height bezwarunkowo ma mieć zawsze wartość 0!!!