Inca un tutorial de la mine pentru voi, asta e inventat de mine cu rata de succes de 100% 
Modificati codul din css si scoateti pozele, copyright pt codul lui Courage
de ex asta e codul pentru subforumuri pe 3 coloane ( partea css ):
table.ipb_table ol.subforums1 {margin-top: 3px;float: left;width: 33%;}table.ipb_table ol.subforums1 li{background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums1 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }table.ipb_table ol.subforums2 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums2 li {background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums2 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }table.ipb_table ol.subforums3 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums3 li {background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums3 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }
Voi il modificati cu asta:
table.ipb_table ol.subforums1 {margin-top: 3px;float: left;width: 33%;}table.ipb_table ol.subforums1 li{padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums1 li.unread { font-weight: bold;}table.ipb_table ol.subforums2 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums2 li {padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums2 li.unread { font-weight: bold; }table.ipb_table ol.subforums3 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums3 li {padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums3 li.unread { font-weight: bold; }
Si dupa adaugati in css asta
table.ipb_table ol.subforums1 li:before {
font-family: 'FontAwesome';
content: "\f05b";
margin-right: 3px;
font-size: 10px;
position: relative;
top: -1.5px;
color: #555;
}
ca sa modifici iconita aia editezi content : "\f05b"; cum doresti.
Sa va explic si cum afati acel mirific codulet;
cautati o iconita, sa zicem fa fa-arrow-right o gasiti aici: http://fortawesome.github.io/Font-Awesome/icon/arrow-right/
sub imaginile alea cu iconita in diferite dimensiuni aveti Unicode: etc.
Unicode la fa-arrow-right este f061 si voi puneti in: content : "\f061" ;
Rezultat:
table.ipb_table ol.subforums1 {
margin-top: 3px;
float: left;
width: 33%;
}
table.ipb_table ol.subforums1 li {
padding: 0 15px 0 10px;
margin: 0;
float: left;
}
table.ipb_table .subforums1 li.unread {
font-weight: bold;
}
table.ipb_table ol.subforums2 {
width: 33%;
overflow: hidden;
}
table.ipb_table ol.subforums2 li {
padding: 0 15px 0 15px;
margin: 0;
float: left;
}
table.ipb_table .subforums2 li.unread {
font-weight: bold;
}
table.ipb_table ol.subforums3 {
width: 33%;
overflow: hidden;
}
table.ipb_table ol.subforums3 li {
padding: 0 15px 0 15px;
margin: 0;
float: left;
}
table.ipb_table .subforums3 li.unread {
font-weight: bold;
}
table.ipb_table ol.subforums1 li:before {
font-family: 'FontAwesome';
content: "\f067";
margin-right: 3px;
font-size: 9px;
position: relative;
top: -1.5px;
color: #555;
}
table.ipb_table ol.subforums1 li.unread:before {
color: #b83030;
font-weight: 100;
font-size: 8px;
transition: all 0.3s;
}
.subforums1 a {
transition: all 0.5s;
color: grey;
}
.subforums1 a:hover {
color: #b83030;
}
