Форум поддержки пользователей ZeroParking

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

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

Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Своя иконка для каждой категории (аналог IPB © Romych) <

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

Страница: 1

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

1

  • Автор: Romych
  • Странник
  • Romych
  • Зарегистрирован: 2010-02-14
  • Приглашений: 0
  • Сообщений: 107
  • Уважение: +67
  • Позитив: +4
  • Пол: Мужской
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2013-03-19 22:15:49

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

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

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

<script type="text/javascript">
$(document).ready(function(){
$('div#pun-category1.category > h2 > div.catleft ').after('<img src="http://icons.iconarchive.com/icons/icons-land/points-of-interest/32/Theater-Yellow-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/rokey/hardware/32/harddisc-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/deleket/gloss-adobe/32/Adobe-Flash-Player-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

http://s03.radikal.ru/i176/1009/1c/7050bf5520c2.gif

Отредактировано Romych (2011-01-26 01:43:35)

+2

2

  • Автор: bonham
  • Новичок
  • Зарегистрирован: 2010-09-08
  • Приглашений: 0
  • Сообщений: 1
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    4 часа 11 минут
  • Последний визит:
    2010-11-27 16:53:35

Прикольно! ;)

0

3

  • Автор: Инь
  • Новичок
  • Зарегистрирован: 2010-03-31
  • Приглашений: 0
  • Сообщений: 2
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    15 часов 6 минут
  • Последний визит:
    2011-01-25 12:46:38

супер!!! спс

Отредактировано Инь (2010-10-08 17:25:42)

0

4

  • Автор: ОнО ВаМ НаДо???ОоОоО
  • Форумчанин
  • ОнО ВаМ НаДо???ОоОоО
  • Зарегистрирован: 2010-10-08
  • Приглашений: 0
  • Сообщений: 18
  • Уважение: 0
  • Позитив: +3
  • Провел на форуме:
    6 часов 22 минуты
  • Последний визит:
    2011-05-14 14:15:04

спасибо

0

5

  • Автор: Yakushi Kabuto
  • Новичок
  • Yakushi Kabuto
  • Откуда: Москва
  • Зарегистрирован: 2010-10-01
  • Приглашений: 0
  • Сообщений: 1
  • Уважение: 0
  • Позитив: 0
  • Пол: Мужской
  • Возраст: 31 [1992-07-18]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2012-10-01 22:18:22

А можно ли сделать свою иконку для каждого форума в этом разделе? Наглядно. "7" это само название категории, а вот на место черных квадратов хотелось бы вставить иконку)) (Не зависимо, есть новые сообщения в теме или нет)

0

6

  • Автор: Алексей2
  • Новичок
  • Алексей2
  • Зарегистрирован: 2010-11-28
  • Приглашений: 0
  • Сообщений: 8
  • Уважение: -1
  • Позитив: +1
  • Провел на форуме:
    1 день 1 час
  • Последний визит:
    2011-07-03 17:27:48

Огомнейшее спасибо.

0

7

  • Автор: ensi gone forever
  • Новичок
  • Зарегистрирован: 2010-02-03
  • Приглашений: 0
  • Сообщений: 7
  • Уважение: 0
  • Позитив: +1
  • Провел на форуме:
    3 часа 51 минуту
  • Последний визит:
    2011-02-07 20:06:07
Yakushi Kabuto написал(а):

это само название категории, а вот на место черных квадратов хотелось бы вставить иконку)) (Не зависимо, есть новые сообщения в теме или нет)

да... меня тоже мучает этот вопрос)

0

8

  • Автор: Romych
  • Странник
  • Romych
  • Зарегистрирован: 2010-02-14
  • Приглашений: 0
  • Сообщений: 107
  • Уважение: +67
  • Позитив: +4
  • Пол: Мужской
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2013-03-19 22:15:49
Yakushi Kabuto написал(а):

А можно ли сделать свою иконку для каждого форума в этом разделе? Наглядно. "7" это само название категории, а вот на место черных квадратов хотелось бы вставить иконку)) (Не зависимо, есть новые сообщения в теме или нет)

ensi gone forever написал(а):

да... меня тоже мучает этот вопрос)

да не вопрос

Своя иконка для каждого форума на главной странице © Romych

в html-низ:

<script type="text/javascript">
$(function(){
$('div.tclcon> h3 >a:contains("Название форума")').before('<img class="gor" src="адрес картинки" /> ');
$('div.tclcon> h3 >a:contains("Название форума")').before('<img class="gor" src="адрес картинки" /> ');
$('img.gor').css('margin', '-7px 8px -5px -7px');
});
</script>

эту строчку размножаете в скрипте под каждый форум - $('div.tclcon> h3 >a:contains("Название форума")').before('<img class="gor" src="адрес картинки" /> ');

http://s49.radikal.ru/i123/1101/13/50af4eb95d26.png

желательно вставлять не слишком крупные изображения, тестировал с размерами 16х16, 24х24, 32х32

+1

9

  • Автор: ensi gone forever
  • Новичок
  • Зарегистрирован: 2010-02-03
  • Приглашений: 0
  • Сообщений: 7
  • Уважение: 0
  • Позитив: +1
  • Провел на форуме:
    3 часа 51 минуту
  • Последний визит:
    2011-02-07 20:06:07

Romych
а если стоит уже в дизайне иконки,их нужно убрать? или как?Оо вот у вас на пробнике виден квадратик, нужно чтобы вместо него была иконка своя.)

0

10

  • Автор: Toshiro-kun
  • Да, модератор я, угу
  • Toshiro-kun
  • Зарегистрирован: 2010-03-08
  • Приглашений: 0
  • Сообщений: 3766
  • Уважение: +1013
  • Позитив: +9
  • Пол: Мужской
  • Возраст: 33 [1990-08-29]
  • Провел на форуме:
    1 месяц 5 дней
  • Последний визит:
    2012-08-11 15:49:22

ensi gone forever

<style>
.punbb table Div.icon {float: left; display: block; width: 121px; height: 101px; border-style: none; background-image: url(старые); background-repeat: no-repeat; position: relative; margin-right: 0px;}
TR.inew Div.icon {
background: url(новые) no-repeat;}
TR.isticky Div.icon {
background: url(важные) no-repeat;}
TR.iclosed Div.icon {
background: url(закрытые) no-repeat;}
</style>

вставлять в HTML-верх

0

11

  • Автор: ensi gone forever
  • Новичок
  • Зарегистрирован: 2010-02-03
  • Приглашений: 0
  • Сообщений: 7
  • Уважение: 0
  • Позитив: +1
  • Провел на форуме:
    3 часа 51 минуту
  • Последний визит:
    2011-02-07 20:06:07

Toshiro-kun
это код обычных иконок?

0

12

  • Автор: Romych
  • Странник
  • Romych
  • Зарегистрирован: 2010-02-14
  • Приглашений: 0
  • Сообщений: 107
  • Уважение: +67
  • Позитив: +4
  • Пол: Мужской
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2013-03-19 22:15:49
ensi gone forever написал(а):

а если стоит уже в дизайне иконки,их нужно убрать? или как?Оо вот у вас на пробнике виден квадратик, нужно чтобы вместо него была иконка своя.)

уточняю, вам нужно чтобы вместо иконок - Нет новых сообщений, Есть новые сообщения, стояли ваши, и при чём для каждого форума своя?

0

13

  • Автор: Коша-сан
  • Форумчанин
  • Коша-сан
  • Откуда: из Дракенфурта
  • Зарегистрирован: 2008-08-17
  • Приглашений: 0
  • Сообщений: 692
  • Уважение: +91
  • Позитив: +80
  • Пол: Женский
  • Провел на форуме:
    8 дней 17 часов
  • Последний визит:
    2012-09-26 15:07:22

Romych

Именно это имеется в виду. Когда запихиваешь скрипт, появляется еще одна иконка рядом с уже существующей (см. http://favo.rolka.su/), а имелось в виду как бы замещение.

0

14

  • Автор: Romych
  • Странник
  • Romych
  • Зарегистрирован: 2010-02-14
  • Приглашений: 0
  • Сообщений: 107
  • Уважение: +67
  • Позитив: +4
  • Пол: Мужской
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2013-03-19 22:15:49
Коша-сан написал(а):

а имелось в виду как бы замещение.

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

вот к примеру для каждого форума своя иконка

<style>
#forum_f2 .icon{background-image: url(адрес изображения); background-repeat: no-repeat; } /* нет новых сообщений */
#forum_f2 .inew{background-image: url(адрес изображения); background-repeat: no-repeat; } /* есть новые сообщения */
</style>

красным id форума, синим соответственно изображение

так же и для каждой категории свою иконку можно используя css вставить иконку

<style>
#pun-category1 h2:before {content:url(адрес изображения);}
#pun-category2 h2:before {content:url(адрес изображения);}
#pun-category3 h2:before {content:url(адрес изображения);}
#pun-category4 h2:before {content:url(адрес изображения);}
#pun-category5 h2:before {content:url(адрес изображения);}
#pun-main h2 {padding: 0.01em 0.5em;}
</style>

бордовым порядковый номер категории (сверху вниз), синим опять таки адрес изображения

Отредактировано Romych (2011-01-28 21:55:40)

+1

15

  • Автор: Коша-сан
  • Форумчанин
  • Коша-сан
  • Откуда: из Дракенфурта
  • Зарегистрирован: 2008-08-17
  • Приглашений: 0
  • Сообщений: 692
  • Уважение: +91
  • Позитив: +80
  • Пол: Женский
  • Провел на форуме:
    8 дней 17 часов
  • Последний визит:
    2012-09-26 15:07:22

Romych
вот так совсем клево и что надо, спасибо  :cool:

0

16

  • Автор: Коша-сан
  • Форумчанин
  • Коша-сан
  • Откуда: из Дракенфурта
  • Зарегистрирован: 2008-08-17
  • Приглашений: 0
  • Сообщений: 692
  • Уважение: +91
  • Позитив: +80
  • Пол: Женский
  • Провел на форуме:
    8 дней 17 часов
  • Последний визит:
    2012-09-26 15:07:22

Romych
Еще такой вопрос. Я через стили вставила уголок http://forumupload.ru/uploads/0005/6e/de/2052-4.gif справа поверх бэкграунда категории: http://favo.rolka.su/ Впихнула в див с классом catright. Там есть еще catleft, куда я хотела всунуть левый уголок (у меня растягивающийся стиль), но все никак не получается, там марджины и паддинги переколбашивает. Может, как-то другим путем можно сделать уголки по обоим краям?

Отредактировано Коша-сан (2011-01-31 13:35:15)

0

17

  • Автор: Romych
  • Странник
  • Romych
  • Зарегистрирован: 2010-02-14
  • Приглашений: 0
  • Сообщений: 107
  • Уважение: +67
  • Позитив: +4
  • Пол: Мужской
  • Провел на форуме:
    1 день 4 часа
  • Последний визит:
    2013-03-19 22:15:49
Коша-сан написал(а):

Может, как-то другим путем можно сделать уголки по обоим краям?

не уверен, что выйдет на все 100%, но можно поэкспериментировать с псевдоклассами :first-child и :last-child

что-то типа

.catleft:first-child {background:url(http://forumupload.ru/uploads/0005/6e/de/2052-4.gif)no-repeat scroll -8px 0 transparent;padding-right: 46px; padding-top: 27px;}
.catright:last-child {background:url(http://forumupload.ru/uploads/0005/6e/de/2052-4.gif)no-repeat scroll 12px 0 transparent;padding-right: 46px; padding-top: 27px;}

+1

18

  • Автор: Дорсель
  • Форумчанин
  • Дорсель
  • Зарегистрирован: 2011-02-06
  • Приглашений: 0
  • Сообщений: 119
  • Уважение: +13
  • Позитив: +28
  • Пол: Женский
  • Провел на форуме:
    4 дня 10 часов
  • Последний визит:
    2013-06-20 23:28:47

Огрооооомное спасибо!))))

0

19

  • Автор: Laktonika
  • Форумчанин
  • Laktonika
  • Зарегистрирован: 2011-01-30
  • Приглашений: 0
  • Сообщений: 23
  • Уважение: +1
  • Позитив: +3
  • Провел на форуме:
    12 часов 18 минут
  • Последний визит:
    2012-09-17 15:25:18

Спасибо, долго искала)

0

20

  • Автор: строптивая
  • Форумчанин
  • строптивая
  • Зарегистрирован: 2011-04-26
  • Приглашений: 0
  • Сообщений: 24
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    15 часов 11 минут
  • Последний визит:
    2011-11-30 20:19:19

Здравствуйте! у меня не получается с кодами вставить картинку в место иконки не могли бы в мне помочь? хочу вот эту картинку вместо иконок http://s012.radikal.ru/i319/1104/b7/7ae0fc119018.gif :blush:

0

21

  • Автор: Deff
  • Помощник ZeroParking
  • Зарегистрирован: 2010-09-17
  • Приглашений: 0
  • Сообщений: 3019
  • Уважение: +912
  • Позитив: +117
  • Провел на форуме:
    1 месяц 4 дня
  • Последний визит:
    2014-03-14 16:00:36
Коша-сан написал(а):

ще такой вопрос. Я через стили вставила уголок  справа поверх бэкграунда категории: http://favo.rolka.su/

В HTML верх - или без тегов <style> в конец первого окна стиля

Код:
<style>
.category h2 .catleft{
float:left!important;
padding-top:0!important;
margin:-16px 25px 16px -25px!important;
position:relative!important;
z-index:100!important;
height:39px;
width:43px;
background-color: transparent;
background-image: url(http://savepic.net/1151150.gif);
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
}
</style>

0

22

  • Автор: HerrOberEgerMaster
  • Форумчанин
  • HerrOberEgerMaster
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 2010-05-19
  • Приглашений: 0
  • Сообщений: 138
  • Уважение: +7
  • Позитив: +2
  • Пол: Мужской
  • Возраст: 62 [1962-03-22]
  • Провел на форуме:
    3 дня 12 часов
  • Последний визит:
    2012-11-21 16:56:14
Romych написал(а):

Своя иконка для каждого форума на главной странице © Romych

Установил проверочный вариант.

<script type="text/javascript">
$(function(){
$('div.tclcon> h3 >a:contains("#Админская ")').before('<img class="gor" src=" http://forumupload.ru/uploads/000c/cb/e3/27641-1.gif " /> ');
$('img.gor').css('margin', '-7px 8px -5px -7px');
});
</script>

Не работает :( Форум http://bdsm.0pk.ru/ Проверял Оперой.
Очень хочется, чтобы заработало. Помогите, пожалуйста. Интересует вариант: вставляемое изображение рядом с иконкой есть/нет новых сообщений.

0

23

  • Автор: HerrOberEgerMaster
  • Форумчанин
  • HerrOberEgerMaster
  • Откуда: Санкт-Петербург
  • Зарегистрирован: 2010-05-19
  • Приглашений: 0
  • Сообщений: 138
  • Уважение: +7
  • Позитив: +2
  • Пол: Мужской
  • Возраст: 62 [1962-03-22]
  • Провел на форуме:
    3 дня 12 часов
  • Последний визит:
    2012-11-21 16:56:14

Разобрался  :jumping: был лишний пробел после #Админская

0

24

  • Автор: алинычаа
  • Форумчанин
  • Зарегистрирован: 2012-01-01
  • Приглашений: 0
  • Сообщений: 18
  • Уважение: 0
  • Позитив: +2
  • Провел на форуме:
    7 часов 13 минут
  • Последний визит:
    2012-02-17 21:15:42
Romych написал(а):

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

вот к примеру для каждого форума своя иконка

<style>
#forum_f2 .icon{background-image: url(адрес изображения); background-repeat: no-repeat; } /* нет новых сообщений */
#forum_f2 .inew{background-image: url(адрес изображения); background-repeat: no-repeat; } /* есть новые сообщения */
</style>

красным id форума, синим соответственно изображение

так же и для каждой категории свою иконку можно используя css вставить иконку

<style>
#pun-category1 h2:before {content:url(адрес изображения);}
#pun-category2 h2:before {content:url(адрес изображения);}
#pun-category3 h2:before {content:url(адрес изображения);}
#pun-category4 h2:before {content:url(адрес изображения);}
#pun-category5 h2:before {content:url(адрес изображения);}
#pun-main h2 {padding: 0.01em 0.5em;}
</style>

бордовым порядковый номер категории (сверху вниз), синим опять таки адрес изображения

куда пихать? в низ ил вверх?

0

25

  • Автор: Leonheart
  • Можно просто "Рой"
  • Leonheart
  • Откуда: ЕТП
  • Зарегистрирован: 2011-12-22
  • Приглашений: 0
  • Сообщений: 1787
  • Уважение: +450
  • Позитив: +104
  • Пол: Мужской
  • Возраст: 37 [1987-01-01]
  • Провел на форуме:
    19 дней 19 часов
  • Последний визит:
    2013-05-19 12:36:39

алинычаа, када вы ж уже запомните, шо все коды в тегах <style></style> ставяцо в html-верх, если нет доп. указаний к коду.  :glasses:

0

Страница: 1

Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Своя иконка для каждой категории (аналог IPB © Romych) <

Рейтинг форумов | Создать форум бесплатно