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 страница 9 из 9

1

Своя кликабельная иконка к каждому форуму (HTML+CSS)
Добавляет индивидуальную иконку к каждому форуму.

http://s4.uploads.ru/qMm5w.jpg

Автор: Герда
Продолжаем убирать лишние скрипты.
Сделать кликабельную (или некликабельную) иконку к форуму можно на CSS+HTML. Как и в нижевыложенном скрипте:
1. вставляется в описание форума (и удаляется при удалении форума)
2. легко настраивается, можно в каждую иконку вклеить свой стиль
3. картинка может быть любого размера ("сжимается" до нужного размера через стиль)
4. вставка варианции иконки для новых сообщений

В отличие от скрипта ниже - не занимает никакого места в хтмл-низ и не нужно вставлять лишних скриптов.

Итак, в описание форума вставляем:

<div class="myico">
<a href="https://forumd.ru/viewtopic.php?id=4327">
<img class="old" src="https://forumstatic.ru/files/0007/e3/f7/23239.jpg">
<img class="new" src="https://forumstatic.ru/files/0007/e3/f7/38068.jpg">
</a>
</div>

Красное - ссылка, куда будет перекинут пользователь по клику. Если не нужно - удаляем все красное
Зеленое - иконка "нет новых сообщений"
Синее - иконка "есть новые сообщения"

В "свой стиль" (любое удобное окно) ИЛИ html-верх (между тегов <style>) вставляем:

.icon[data-new-topics]:before, .subforums span[data-new-topics]:before {z-index: 10;}
.punbb .category .tcl {position: relative;}
.myico .new, .inew .myico .old {display: none;}
.inew .myico .new {display:block;}

.myico {
position: absolute;
z-index: 1;
width: 30px; /* ширина иконки */
height: 30px; /* высота иконки */
left: 5px; /* двигаем иконку слева */
top: 6px; /* двигаем иконку сверху */
}
.myico img {
display:block;
width: 30px; /* ширина иконки (сужаем саму картинку) */
height: 30px; /* высота иконки (сужаем саму картинку) */
}

Если нам НЕ нужно вариантивность иконки "есть новые сообщения"/"нет новых сообщений", то из HTML-кода удалите Синее, а из CSS кода удалите ФИОЛЕТОВОЕ


Своя иконка к каждому форуму
Добавляет индивидуальную иконку к каждому форуму со ссылкой на заданную тему (например, навигация или правила к данному форуму).

Автор: Deff

скрипт

В описания к форумам, которым нужно добавить свои Иконки, добавляем такой код:

<img class="MyForIcon" src="http://forum.mybb.ru/img/smilies/MyBB/light/glasses.gif"/>
    <a class="ForRules" href="http://forum.mybb.ru/viewtopic.php?id=26592"></a>

Первая строка - картинка ссылка на Свою Иконку к данному форуму;
Вторая строка - ccылка на Главную тему (Правила или Навигацию по данному форуму), данная строка может и отсутствовать.

В HTML верх:

Код:
<style>.MyForIcon,.ForRules{display:none;}</style>

В HTML низ:

<style> /*Cтиль доп.иконки нового сообщения*/
.ImgInew {
  display:block;
  position:relative;
  margin:-8px -40px 0 40px;
}
</style>
<script>
var ImgInew='<img align=left class="ImgInew" src="http://savepic.net/1201727.gif" width="18" height="18"/>';
$("div.category. tr[id^='forum_']").each(function (){
var L=$(this).find(".intd div.icon"),B=$(this).find(".tclcon .MyForIcon").attr("src"),
   C=$(this).find(".tclcon .ForRules").attr("href");
if(B!=undefined){if($(this).hasClass("inew")==true){L.append(ImgInew)};
   L.css({"background-image":"url("+B+")"}); if(C!=undefined){L.wrap('<a class="ForAndRules" href="'+C+'"></a>')};};});
</script>

Красным - регулировки мини-иконки Нового Сообщения и ссылка на мини-иконку нового сообщения


Отдельная иконка к определенному форуму (CSS)
Добавляет индивидуальную иконку к каждому форуму через стиль.

Вы можете поставить на какой-либо форум другую иконку или на все форумы сразу разные иконки.

в Html-верх:

<style type="text/css">
#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: 45px; width: 45px; background-repeat : no-repeat; background-position: top center; background-color : transparent;}

tr#forum_f1 div.icon {background-image: url(http://адрес);  }
tr#forum_f1 div.inew {background-image: url(http://адрес);  }

tr#forum_f2 div.icon {background-image: url(http://адрес);  }
tr#forum_f2 div.inew {background-image: url(http://адрес);  }

</style>

синее - высота иконки
красное - ширина иконки
зеленое - номер форума.
Чтобы узнать номер форума, взгляните на адресную строку браузера, увидите: *******/viewforum.php?id=2 - это и есть номер вашего форума.
вместо "адрес", пишите ссылку на картинку-иконку.
div.inew - для иконки "новые сообщения"
div.icon - для "нет новых сообщений"

+2

2

Ловите Герда + спасибки за скриптик! https://forumd.ru/uploads/0007/e3/f7/26623-1.png

0

3

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

div.icon - для "нет новых сообщений"

Небольшой вопрос - а если здесь вместо icon написать isticky или iclosed, то установятся иконки для важных/закрытых тем, так?

0

4

Decadence

не знаю, надо протестировать. http://i.smiles2k.net/aiwan_smiles/smile3.gif
это скорее код для главной страницы (а на главной не отображаются важные темы) только есть или нет сообщения в разделе.

вот как бе для самых любознательных:

tr#forum_f1 div.icon

красное - мы обратились к строке таблички (ведь форум-то в виде таблицы, где каждый раздел занимает новую строчку)
синее - мы обратились к конкретному форуму (с помощью его ID)
зеленое - мы обратились к контейнеру (фоном которого является иконка)
розовое - мы указали класс иконки

для наглядности вот исходный код этого фрагмента:

<tr id="forum_f1" class="alt1">
  <td class="tcl">
        <div class="icon"></div>
        <div class="tclcon">название раздела</div>
  </td>
  <td class="tc2">кол-во тем</td>
  <td class="tc3">кол-во сообщ</td>
  <td class="tcr">последнее сообщ</td>
</tr>

+1

5

Герда
Мммм... Хитро о.о Но спасибо, вроде бы дошло х)

0

6

я, кстати, как сейчас полезла в исходный код, подумала... какая ж классная вещь - готовые движки!
как представлю, что  код форума нужно было б вручную писать... http://i.smiles2k.net/aiwan_smiles/wacko.gif

0

7

Индивидуальная кликабельная иконка к каждому форуму

осуществляется же через CSS

0

8

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

осуществляется же через CSS

Не всегда удобно,
Скрипт в описании легко добавляется при добавлении форумов и удаляется вместе с оным
Актуален при многофорумах, так как каждое изо закреплено за конкретным фором

Отредактировано Deff (20.05.2013 04:00:58)

0

9

добавлена реализация кликабельной иконки к форуму БЕЗ использования скриптов

0

Быстрый ответ

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


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

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


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