ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения
Внимание! Просьба проголосовать: Идеальный заказчик!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Архив устаревших тем » Отдельные картинки для заголовков категорий


Отдельные картинки для заголовков категорий

Сообщений 41 страница 48 из 48

1

Новая версия кодов для картинок в категориях тут: Дизайн отдельных категорий и заголовков категорий

устарело

СВОЯ КАРТИНКА В КАЖДУЮ КАТЕГОРИЮ
Прикрепляет к заголовку категорий отдельные картинки по названию оных.
Решает проблему с некорректным отображением разных заголовков через CSS, если у вас на форуме скрыт ряд категорий для определенных пользователей.

http://s5.uploads.ru/FbmpP.jpg

Автор: 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.2013 06:17:17)

+2

41

Lee Cross
В первом посте темы читайте ->

Кому надо скрыть  название категории шрифтом > в HTML верх ставим такой код

0

42

Помогите пожалуйста. Ничего не выходит. Вот код:

Код:
<script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){ 

myarray=new Array(
"Офис Кальсонщиков", "http://i011.radikal.ru/1202/c2/271441889b32.png",
"organization", "http://gifok.net/images/2013/03/19/AtGD.jpg",
"Информационная", "http://gifok.net/images/2013/03/19/wZpm1.jpg",
"Личное", "http://gifok.net/images/2013/03/19/aTGN5.jpg",
"Администрационная", "http://gifok.net/images/2013/03/19/0TNg.jpg",
"Хогвартс", "http://gifok.net/images/2013/03/19/gqDP.jpg",
"Хогсмид", "http://gifok.net/images/2013/03/19/cxpFB.jpg",
"Англия",
"http://gifok.net/images/2013/03/19/UC59Y.jpg",
"Япония",
"http://gifok.net/images/2013/03/19/VbW8R.jpg",
"http://gifok.net/images/2013/03/19/Krob1.jpg",
"Франция",
"http://gifok.net/images/2013/03/19/fUhzj.jpg",
"Америка",
"http://gifok.net/images/2013/03/19/Rf4ol.jpg",
"Болгария",
"http://gifok.net/images/2013/03/19/1djCL.jpg",
"Флудилка Кальсонов",
"http://gifok.net/images/2013/03/19/Ajh05.jpg",
"Мастерская",
"http://gifok.net/images/2013/03/19/0Ac9.jpg",
"Ваша/наша реклама",
"http://gifok.net/images/2013/03/19/tkK0O.jpg"
)

        $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){

var cssObj = {
   "height":"100px",
   "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>

0

43

Fane
а ссылку на форум?

0

44

Rush
http://rolmertaba.mybb.ru/

0

45

осуществляется через CSS: Прикрепление картинок к названиям категорий (MyBB)

0

46

Герда написал(а):

осуществляется через CSS: Прикрепление картинок к названиям категорий (MyBB)

У метода css лишь один недостаток - картинки смещаются при наличии категорий скрытых для некоторых групп( к примеру от гостя)
Собственно скрипт был создан именно по этой причине - Так шо устаревшим он не станет, пока сервис  жестко не закрепит  ID категорий независимо от скрытия

Отредактировано Deff (20.05.2013 06:11:39)

0

47

ок, тоды оставим в актуальных.
но припишу это в описание скрипта, чтоб нормальные форумчики не выносили себе моск скриптами )

0

48

Новая версия кодов для картинок в категориях тут: Дизайн отдельных категорий и заголовков категорий

0


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Архив устаревших тем » Отдельные картинки для заголовков категорий