Недавно наткнулся на форум, где есть картинки в категориях. Выставлю его скрин, чтобы юзеры имели представление, о чем пойдет речь.
Выглядит эффектно, если уметь работать в ФШ и не иметь кривые руки. Ну, думаю, большинство смогут нарисовать шрифтом название категории, а кто не может - закажет, в этой теме я приведу код, как эти категории вставлять.
Ранее этот код имел баг при сокрытии подфорумов. В итоге получалось примерно следующее: название категории "анкеты" получала категория с рекламой. Поэтому его отредактировали.
В HTML-низ.
<script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){myarray=new Array(
"Название_категории_1", "картинка_первой_категории",
"Название_категории_2", "картинка_второй_категории" //Последний элемент без запятой!
)$("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){var cssObj = {
"height":"50px",
"background-color": "transparent",
"background-image":"url("+myarray[q+1]+")",
"background-position":"50% 50%",
"background-repeat":"no-repeat" //Последний элемент без запятой!
}if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
q++}
});
});
</script>
Выделенное размножаете кучу раз в зависимости сколько у вас категорий.
Подчеркнутое размер ваших картинок в высоту.
И вуаля - Анкеты с анкетами, реклама с рекламой.
Но и это еще не все. С этим скриптом у вас будет видны и название категории текстом, и картинка. Чтобы избежать этой гадости и оставить одну картинку, дополняем:
<style>
#pun-stats h2 span,
.category h2 span {
visibility:hidden!important;
}
</style>