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 - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Отдельные картинки для заголовков категорий


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

Сообщений 1 страница 10 из 47

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

  • Цитировать Сообщение 1
  • 2

    Прошу прощения сразу, что фактически дублирую сообщения.
    Просто кинула вопрос не в тот раздел, а удалить своё сообщение не могу(
    вот тут.
    Упрямо не хочет работать скрипт.

    0

  • Цитировать Сообщение 2
  • 3

    Veronica написал(а):

    Упрямо не хочет работать скрипт.

    :glasses: Кавычки Замените в названии категорий
    на такие » «   (И в скрипте и в названиях категорий реально  - кавычки трактуются скриптом как окончание элемента
    Либо - все свои кавычки - не скриптовые перекрываете обратным слешем - \"

    0

  • Цитировать Сообщение 3
  • 4

    все равно не работает

    Код:
    <script type="text/javascript"><!--Своя картинка в каждую категорию -->
    $(document).ready(function(){
    myarray=new Array(
    \all about\, \http://i011.radikal.ru/1202/c2/271441889b32.png\,
    "organization", "http://i069.radikal.ru/1202/78/e6bdc3db80c0.png",
    "the game", "http://i051.radikal.ru/1202/d3/c08fd9d19025.png",
    "off-game", "http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif",
    "questions", "http://s017.radikal.ru/i408/1202/16/edd0db40fb58.png"   
    "advertisement", "http://s017.radikal.ru/i400/1202/d4/425e40025966.png" 
    "statistics" "http://s017.radikal.ru/i439/1202/df/241bad8071e5.png" //Последний элемент без запятой!  
    )
            $("#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>

    http://diz.mybb.by/

    0

  • Цитировать Сообщение 4
  • 5

    Amice написал(а):

    \all about\, \http://i011.radikal.ru/1202/c2/271441889b32.png\,

    \all about\, \http://i011.radikal.ru/1202/c2/271441889b32.png\,
    выделенное синим замените на "

    0

  • Цитировать Сообщение 5
  • 6

    Шериан
    уже заменила, не изменилось ничего

    0

  • Цитировать Сообщение 6
  • 7

    Amice

    Код:
    <script type="text/javascript"><!--Своя картинка в каждую категорию -->
    $(document).ready(function(){ 
    
    myarray=new Array(
    "all about", "http://i011.radikal.ru/1202/c2/271441889b32.png",
    "organization", "http://i069.radikal.ru/1202/78/e6bdc3db80c0.png",
    "the game", "http://i051.radikal.ru/1202/d3/c08fd9d19025.png",
    "off-game", "http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif",
    "questions", "http://s017.radikal.ru/i408/1202/16/edd0db40fb58.png",
    "advertisement", "http://s017.radikal.ru/i400/1202/d4/425e40025966.png",
    "statistics", "http://s017.radikal.ru/i439/1202/df/241bad8071e5.png"     
    )
    
            $("#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>

    з.ы. запятые были еще пропущены))в первый раз не заметила х) Теперь должно работать)

    Отредактировано Шериан (22.02.2012 22:31:36)

    +1

  • Цитировать Сообщение 7
  • 8

    Шериан
    не поверите, но снова никаких изменений(

    0

  • Цитировать Сообщение 8
  • 9

    Amice
    http://uploads.ru/i/R/j/9/Rj9lU.gif А чо Он будет Работать ??

    В Cкрипте указываются Реальные Названия Категорий, Которые Он Ищет, И заменяет Планки...

    Где у Вас названия - указанные в Скрипте ?
    http://uploads.ru/t/Z/c/e/ZceL2.png

    0

  • Цитировать Сообщение 9
  • 10

    Deff
    ах вот в чем дело
    спасибо огромное)

    0

  • Цитировать Сообщение 10
  • Быстрый ответ

    Напишите ваше сообщение и нажмите «Отправить»


    ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

    ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


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