Zmiana klasy statusu działów

wersja skryptu MyBB: 1.8
adres forum: furry.net.pl
Styl: iGame
na czym polega problem:
Chciałbym aby ikonami statusów działów były pliki o rozszerzeniu PNG.
Obecna zawartość forumbit_depth2_forum :

<tr>
<td class="{$bgcolor}" align="center" valign="middle" width="1"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-circle-o"></i></div></td>
  
<td class="{$bgcolor}" valign="middle">
  <strong><a href="{$forum_url}"><span class="threadtext">{$forum['name']}</span></a></strong><br />{$forum_viewers_text} {$forum['description']} {$subforums}</td>
  
<td class="{$bgcolor}" valign="middle" align="left" width="23%" style="white-space: nowrap">{$lastpost}</td>
  <td class="{$bgcolor}" valign="middle" align="center" width="9%" style="white-space: nowrap">
    <span class="threadtext">Tematów </span><br />{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="middle" align="center" width="9%" style="white-space: nowrap">
  <span class="threadtext">Odpowiedzi </span><br />{$posts}{$unapproved['unapproved_posts']}</td>
</tr>

.forum_status

Ta klasa odpowiada za wyświetlanie obrazków, ale brakuje w niej tła (czyli obrazków w technice spite - w takiej też musisz zrobić swoje obrazki. Koniecznie zajrzyj np. tutaj.).
Obecnie za 'obrazek' odpowiada ikona font-awesome, czyli do usunięcia

<i class="fa fa-circle-o"></i>

.

Ok przygotowałem grafikę statusów działów którą załaczam
są to ikonki 40x40 połączone ze sobą (split spilit whateva)
nie ukrywam że z linku powyżej zrozumiałem piąte przez dziesiąte ^^
Przepraszam za zajmowanie czasu ale czy mógłbyś mnie dalej poinstruować?
Legenda ikon
1 - Dział zawiera nowe posty
2 - Dział nie zawiera nowych postów
3 - Dział zablokowany

Usuń z tego szablonu co podałeś

<i class="fa fa-circle-o"></i>

Do css dodaj

.forum_status {
background: url(link/do/tej/grafiki.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.forum_on {
background-position: 0 40px;
}
.forum_off {
background-position: 0 80px;
}
.forum_offlock {
background-position: 0 120px;
}

A do którego CSS ?

global.css na samym końcu.

niestety nie działa

Z global.css usuń:

.forum_status {
height: 50px;
width: 50px;
text-align: center;
padding: 1px 2px;
font-size: 25px;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
     color: #3f9889;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #646464;
}

.forum_off i {
    color: #646464;
}

.forum_offlock i:before {
content: "\f05e";
  color: #646464;
}

.forum_offlink i:before {
content: "\f079";
    color: #646464;
}

Natomiast w miejsce tego wstaw to co podał @Matslom, czyli:

.forum_status {
background: url(link/do/tej/grafiki.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.forum_on {
background-position: 0 40px;
}
.forum_off {
background-position: 0 80px;
}
.forum_offlock {
background-position: 0 120px;
}

niestety nic nie pomogło

No tak, użyj tego kodu:

.forum_status {
    background: url(images/igame/statsy.png) 0 0 no-repeat;
    width: 40px;
    height: 40px;
}
.forum_on {
    background-position: 0 0;
}
.forum_off {
    background-position: 0 40px;
}
.forum_offlock {
    background-position: 0 80px;
}

Wciąż nic

Wciąż nic

CTRL + F5 kilka razy.

Obecny kod jaki tam mam

.forum_status {
    background: url(images/igame/statsy.png) 0 0 no-repeat;
    width: 40px;
    height: 40px;
}
.forum_on {
    background-position: 0 0;
}
.forum_off {
    background-position: 0 40px;
}
.forum_offlock {
    background-position: 0 80px;
}

.subforumicon {
    height: 10px;
    width: 10px;
    display: inline-block;
    margin: 0 5px;
    background: url(images/igame/statsy.png) no-repeat 0 0;
}

.subforum_minion {
    background-position: 0 0;
}

.subforum_minioff {
    background-position: 0 -10px;
}

.subforum_miniofflock {
    background-position: 0 -20px;
}

.subforum_miniofflink {
    background-position: 0 -30px;
}

po podwójnym kliknięciu przeczytany w dziale ikonka znika ... ;<

---

UP to the top ^

Zobacz tak

.forum_off {
    background-position: 0 -40px;
}