Новая версия кодов для картинок в категориях тут: Дизайн отдельных категорий и заголовков категорий
СВОЯ КАРТИНКА В КАЖДУЮ КАТЕГОРИЮ
Прикрепляет к заголовку категорий отдельные картинки по названию оных.
Решает проблему с некорректным отображением разных заголовков через CSS, если у вас на форуме скрыт ряд категорий для определенных пользователей.Автор: Deff
скрипт и описаниеКартинки в названия категорий можно легко и без скриптов прицепить через CSS: Прикрепление картинок к названиям категорий (MyBB)
Но если на вашем форуме для некоторых групп пользователей скрыты отдельные категории, то у категорий будет разный порядок и картинки будут отображаться у некоторых юзеров не так, как задуманно.
Так что, любителей прятать категории выручит этот скрипт.В начало хтмл-низ<script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){myarray=new Array(
"Информационный раздел", "http://mybb.ru/f/collection/0208.gif",
"Техническая поддержка", "http://mybb.ru/f/collection/0211.gif",
"Форумы опытных пользователей", "http://mybb.ru/f/collection/0213.gif",
"Разное", "http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif",
"Статистика форума", "http://mybb.ru/f/collection/0217.gif" //Последний элемент без запятой!
)$("#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>Пояснения:
Синим - названия категорий( статистика тоже там, - если нужна
Красным - адрес устанавливаемой картинки
50px розовым - значение высоты картинки - установите своё значение;Строку:
"Название Категории", "Ссылка на картинку",
- Размножаем сколько нужно(лишние строки - убираем), -вставляем свои названия и адреса изображений
PS: Последний элемент в массиве(в данном примере > "Статистика форума") -на конце без запятой!
PPS: Скрипт должен разрешать проблему смещения картинок в иные разделы, при скрытии части разделов для определенных групп
Кому надо скрыть название категории шрифтом > в HTML верх ставим такой код
<style>
#pun-stats h2 span,
.category h2 span {
visibility:hidden!important;
}
</style>(*Синим - статистика - при ненужности отключения -строку убираем
Прикрепление картинок к названиям категорий (CSS)
Если на форуме нет скрытых категорий, то прикрепить картики можно через стиль.коды и описаниеЕсли заглянуть в HTML-код форума, то можно увидеть, что заголовки категорий имеют такой вид:
<div id="pun-categoryN" class="category">
<h2>
<div class="catleft"></div>
<span>Заголовок категории</span>
<div class="catright"></div>
</h2>
<div class="container">тут форумная таблица</div>
</div>Красное - номер категории (генерируется в зависимости от ее порядка).
Синее - левый див-блок.
Зеленое - правый див-блок.Так что, для любителей вкорячить картинку в любое место форума, не нужно никаких скриптов.
Прикрепляем картинку слева от названия
.catleft {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}Прикрепляем картинку справа от названия
.catright {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}Прикрепляем картинку к названию конкретной категории
слева:#pun-categoryN .catleft {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}справа:
#pun-categoryN .catright {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}вместо N - номер категории по порядку с верху (помните, что если у вас на форуме наверху для какой-то группы что-то скрыто, то у них картинки тож будут в другом порядке как и категории)
Если надо вставить фоновую картинку в заголовок категорий:
.category h2 {
height: 62px;
background-image: url("картинка");
background-repeat: no-repeat;
background-position: top center;
color: transparent;
}Если надо вставить фоновую картинку в заголовок конкретной категории:
#pun-category1 h2 {
height: 62px;
background-image: url("картинка");
background-repeat: no-repeat;
background-position: top center;
color: transparent;
}Если надо скрыть текст названия категории:
.category h2 span {display: none !important;}
Если надо скрыть текст названия конкретной категории:
#pun-categoryN h2 span {display: none !important;}
вместо N - номер категории по порядку с верху
Отредактировано Герда (20.05.13 06:17)