Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Корзина » Иконка рядом с названием категории


Иконка рядом с названием категории

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

1

Здравствуйте!Ломаю голову,не помойму,как поставить иконку рядом с названием категории?

0

2

Shadow the hedgehog
Здравствуйте.

Shadow the hedgehog написал(а):

Здравствуйте!Ломаю голову,не помойму,как поставить иконку рядом с названием категории?

Вам одну для всех или для каждой разные?

0

3

rps
разные

0

4

Shadow the hedgehog
Чуть позже будет скрипт.

0

5

Shadow the hedgehog написал(а):

Здравствуйте!Ломаю голову,не помойму,как поставить иконку рядом с названием категории?

Там проблема только одна - высота Иконки связана с размером шрифта

Отредактировано Deff (Чт, 26 Авг 2010 20:05:25)

0

6

Shadow the hedgehog
Попробуйте в ХТМЛ-низ это:

Код:
<script type="text/javascript"> 
var d = new Array()
d[0] = new Array("Test", "<img src='http://s002.radikal.ru/i199/1008/cb/55e7d492c2ed.png' alt='Идея' />")
d[1] = new Array("Тестовая категория", "<img src='http://s55.radikal.ru/i148/1008/f5/d8fef2cf62d5.png' alt='Windows Vista' />")

if (location.href == 'http://' + location.hostname + '/') {
var div = document.getElementById("pun-main").getElementsByTagName("div");
for (j in d) {
for (i in div) {
if ((div[i].className == "category") && (div[i].childNodes[0].innerHTML.indexOf(d[j][0]) != -1))
div[i].childNodes[0].innerHTML = "<span>" + d[j][1] + "&nbsp;&nbsp;" + d[j][0] + "</span>";
}}}
</script>

Названия категорий и изображения впишите свои. При необходимости увеличивайте число элементов в массиве.

+1

7

Своя иконка для каждой категории (аналог IPB  © Romych)

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

скрипт сделан с использование скриптовой библиотеки jquery,
которая к моей радости теперь официально поддерживается сервисом mybb

в html-низ
ставим

<script type="text/javascript">
$(document).ready(function(){
$('div#pun-category1.category > h2 > div.catleft ').after('<img src="http://icons.iconarchive.com/icons/icon … 2-icon.png" style="margin-top:-7px;margin-left:-5px;margin-right:15px;margin-bottom:-9px"/>');
$('div#pun-category2.category > h2 > div.catleft').after('<img src="http://icons.iconarchive.com/icons/roke … c-icon.png" style="margin-top:-7px;margin-left:-5px;margin-right:15px;margin-bottom:-9px"/>');
$('div#pun-category3.category > h2 > div.catleft').after('<img src="http://icons.iconarchive.com/icons/dele … r-icon.png" style="margin-top:-7px;margin-left:-5px;margin-right:15px;margin-bottom:-9px"/>');
  });
</script>

в примере 3 категории,
если нужно больше, просто дублируете эту строку столько сколько у вас категорий

$('div#pun-category4.category > h2 > div.catleft').after('<img src="адрес изображения" style="margin-top:-7px;margin-left:-5px;margin-right:15px;margin-bottom:-9px"/>');

данный пример заточен под иконки размером 36х36, если будете использовать большего размера, то скорее всего придётся погонять отступы

<img src="адрес изображения" style="margin-top:-7px;margin-left:-5px;margin-right:15px;margin-bottom:-9px"/>

смотрим ПРИМЕР 1 и ПРИМЕР 2

тестировал в Mozilla, Opera, Google Chrome

Отредактировано Romych (Ср, 15 Сен 2010 00:22:17)

+3

8

Romych
Я бы тебе хотел сделать одно замечание.

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

$('div#pun-category4.category > h2 > div.catleft')

Вот относительно того, что я подчеркнул. Дело в том, что порядковый номер категорий на форуме получается не для всех одинаковым. Связано это с видимостью или не видимостью отдельных форумов для отдельных групп. Поэтому, если у тебя, как у администратора будет стоять первой "Администраторская", то для гостей и всех остальных первым будет тот форум, что у тебя идёт уже вторым. И иконки попросту подвинутся...

0

9

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

Вот относительно того, что я подчеркнул. Дело в том, что порядковый номер категорий на форуме получается не для всех одинаковым. Связано это с видимостью или не видимостью отдельных форумов для отдельных групп. Поэтому, если у тебя, как у администратора будет стоять первой "Администраторская", то для гостей и всех остальных первым будет тот форум, что у тебя идёт уже вторым. И иконки попросту подвинутся...

не пробовал вариант с скрытыми категориями, подумаю

хотя при сохранении смещение иконок, если и произойдёт, то это сразу обнаружится и поправимо

0

10

немного сократил код в скрипте
присвоил картинкам класс и задал общий стиль, так будет правильнее ;)

<script type="text/javascript">
$(document).ready(function(){
$('div#pun-category1.category > h2 > div.catleft ').after('<img class="categor" src="http://icons.iconarchive.com/icons/icons-land/points-of-interest/32/Theater-Yellow-2-icon.png" />');
$('div#pun-category2.category > h2 > div.catleft').after('<img class="categor" src="http://icons.iconarchive.com/icons/rokey/hardware/32/harddisc-icon.png" />');
$('div#pun-category3.category > h2 > div.catleft').after('<img class="categor" src="http://icons.iconarchive.com/icons/deleket/gloss-adobe/32/Adobe-Flash-Player-icon.png" />');
$('img.categor').css({'margin-top' : '-7px', 'margin-left' : '-5px', 'margin-right' : '15px', 'margin-bottom' : '-9px'});
  });
</script>

--

+1

11

спасибо вам большое :)

0

12

я тут в 7 посте рекомендовал поставить в html-верх скриптовую библиотеку jquery

и с удивлением сегодня обнаружил, что на сервисе mybb она уже установлена (видимо недавно) на всех форумах по-умолчанию и не требуется её подгружать извне
ура товарищи!!! свершилось!  :flag:
странно только, что это никак не афишировалось

0

13

Romych
Слушай, а ведь точно.

Может что-то готовится, какое-то обновление?

0

14

судя по всему jquery понадобилась Максу, теперь библиотека торчит рядом с https://forum.mybb.ru/js/swfobject.2.2b.js , которую Макс использует для рекламы,

а люди, которые используют облако тегов ошибочно подгружают swfobject.2.2b.js извне, не обращая внимания, что скрипт на сервисе уже давным давно есть

0

15

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

Вот относительно того, что я подчеркнул. Дело в том, что порядковый номер категорий на форуме получается не для всех одинаковым. Связано это с видимостью или не видимостью отдельных форумов для отдельных групп. Поэтому, если у тебя, как у

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

не пробовал вариант с скрытыми категориями, подумаю
            хотя при сохранении смещение иконок, если и произойдёт, то это сразу обнаружится и поправимо

Есть идея, устанавливать Иконки и планки под категории не по ID   категории, а по поиску названия категории, тогда вроде как и не смещацо будут при скрытых разделах для разных групп...? --

Отредактировано Deff (Чт, 21 Окт 2010 10:45:22)

0

16

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

Есть идея

См. 6 сообщение.

0

17

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

См. 6 сообщение.

:cool:  Cпс --

0

18

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

Есть идея, устанавливать Иконки и планки под категории не по ID   категории, а по поиску названия категории, тогда вроде как и не смещацо будут при скрытых разделах для разных групп...?

на jquery пашин вариант можно сделать короче
получится так:

<script type="text/javascript">
$(function(){
$('.category > h2 span:contains("Название категории")').before('<img class="categor" src="изображение иконка"  /> ');
$('img.categor').css({'margin-top' : '-7px', 'margin-left' : '-5px', 'margin-right' : '15px', 'margin-bottom' : '-9px'});
});
</script>

вот эту строку размножаем под каждую категорию:
$('.category > h2 span:contains("Название категории")').before('<img class="categor" src="изображение иконка"  /> ');

+2


Вы здесь » Единый форум поддержки » Корзина » Иконка рядом с названием категории