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

Страница: 1

Тема закрыта

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

Поделиться1Ср, 8 Ноя 2006 13:01:03

Автор: Zebra
Гуру идиотов
Зарегистрирован: Сб, 4 Ноя 2006
Сообщений: 942
Уважение: +1143
Позитив: +60
Пол: Женский
Последний визит:
Ср, 22 Авг 2018 21:33:05

Первый способ:

Некоторые часто хотят сделать вместо иконок новых/нет новых/ и т.д. сообщений на главной странице индивидуальные не меняющиеся иконки для каждого подфорума.
Как это сделать?

Как всегда пишем стандартные теги для кодоав css(Вместо точек будем вставлять коды):

<style type="text/css">
.....................
.....................
</style>

1. Для начала пишем код:

#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: ...; width: ...;}

Вместо троеточий вставляем максимальную высоту и ширину тех иконок, которые будем вставлять для разделов.

2. Далее берем следующий блок:

tr#forum_fx Div.icon, tr#forum_fx TR.iclosed Div.icon, tr#forum_fx TR.iredirect Div.icon, tr#forum_fx TR.inew Div.icon {background-color : transparent; background-image: url(http://time.3bb.ru/uploads/time/2_br_redirect.gif); background-repeat : no-repeat; background-position: top center;}

Размножаем его копипэйстом, столько раз, сколько у нас подфорумов.

3. Теперь идем на главную страницу.

Наводим мышку на первый подфорум.
В строке браузера отразится его адрес.
Например, он может выглядеть вот так:
http://forum.mybb.ru/viewforum.php?id=2
(Чтобы было понятно - это над Пуском)
Берем ту цифру, которая идет после "=". В данном случае - 2.

4. В первом блоке ВСЕ X замеянем на это число.
Получаем:

tr#forum_f2 Div.icon, tr#forum_f2 TR.iclosed Div.icon, tr#forum_f2 TR.iredirect Div.icon, tr#forum_f2 TR.inew Div.icon {background-color : transparent; background-image: url(http://time.3bb.ru/uploads/time/2_br_redirect.gif); background-repeat : no-repeat; background-position: top center;}

Вместо троеточия в скобках вставляем адрес иконки для первого раздела.

5.Снова идем на главную:
Наводим мышку на второй раздел. Смотри адрес и берем цифру после =. В следующем блоке ВСЕ X заменяем на это число. В скобках ставим адрес уже для картинки второго раздела. И так до конца.

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

Пишем:

Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}

TR.inew Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}

TR.iclosed Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}

Втoрой способ проще:

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

tr#forum_f2 div.icon {background-image: url(Ваша ссылка на картинку); }
tr#forum_f2 div.inew {background-image: url(Ваша ссылка на картинку); }</style>

div.icon = обычная иконка
div.inew = иконка при появлении новых сообщений

tr#forum_f2 = номер Раздела форума иначе id форума котрый высвечивается в Адресной строке браузера когда Вы входите в раздел форума вот.

Пример: http://help.spybb.ru/viewtopic.php?id=87
Тут id=87 значит в код нужно вписать 87
40px - высота и ширина иконки

копируете(размножаете) две части столько сколько у Вас форумов., остальное как обычно.

Отредактировано Lexx (Вт, 26 Июн 2007 00:23:22)

Поделиться2Вт, 21 Ноя 2006 14:28:40

Автор: Zebra
Гуру идиотов
Зарегистрирован: Сб, 4 Ноя 2006
Сообщений: 942
Уважение: +1143
Позитив: +60
Пол: Женский
Последний визит:
Ср, 22 Авг 2018 21:33:05

Некотрые решения по коду может помогут:

Внимание! Если у вас по каким-то причинам возникли проблемы со следующим:

#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: 40px; width: 40px; background-repeat : no-repeat; background-position: top center; background-color : transparent;}

Попробуйте его заменить на:

#pun-main table Div.icon {padding-left: 35px; padding-top: 15px; padding-bottom: 20px;} - является стабильным сейчас и рабочим параметром

#pun-main table div.tclcon {padding-left: 35px; padding-top: 15px; padding-bottom: 20px;} - если не поможет передыдущий пробуйте этот.

1. в коде иконки float: left замени на float: none;
Далее пишешь

#pun-main table div.tclcon {margin-left: ...px;}

Подставляешь разные значения вместо троеточия пока не добъешься нужного отступа.

#pun-stats .container hr {display: none;}

2. если сделал , но не пашет, то напиши

#pun-main table Div.icon {float: none !important;}

3. Если ещё проблемы, тогда еще пишем

#pun-main .category table div.tclcon {margin: ...px;}

Отредактировано Lexx (Вт, 26 Июн 2007 00:29:40)

Поделиться3Чт, 14 Дек 2006 22:23:31

Автор: Снежка*
Заслуженный
Зарегистрирован: Ср, 8 Ноя 2006
Сообщений: 149
Уважение: +5
Позитив: 0
Пол: Женский
Последний визит:
Вт, 20 Мар 2007 13:33:10

Выучите или запомните-это важно:

большинство иконок именно скриптом если менять, так вот они хорощо работают со стилями которые начинаются c приставки Mybb, Myff, Spybb.......... в стандартных стилях;пример : Mybb Orange

Поделиться4Чт, 21 Дек 2006 18:27:44

Автор: Снежка*
Заслуженный
Зарегистрирован: Ср, 8 Ноя 2006
Сообщений: 149
Уважение: +5
Позитив: 0
Пол: Женский
Последний визит:
Вт, 20 Мар 2007 13:33:10

Пояснение

что-то вы тут такое мудрите... <style> по пять раз пишете... зачем?

в общем, у меня стоит вот так в хтмль-верх:

tr#forum_fN Div.icon, tr#forum_fN.iclosed Div.icon, tr#forum_fN.iredirect Div.icon, tr#forum_fN.inew Div.icon {background-color : transparent; background-image: url(адрес картинки-иконки для данного раздела, т.е. форума); background-repeat : no-repeat; background-position: top center;}

Div.icon {
background-image : url(адрес иконки темы без новых сообщений);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(адрес иконки темы с новыми сообщениями);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(адрес иконки выделенной темы);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(адрес иконки закрытой темы);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(адрес иконки перемещенной темы (кстати, нифига не пашет));
background-repeat: no-repeat;
}
</style>

там где N - это номер форума, для которого на главной странице форуме будет своя иконка, эти строчки копируются столько раз, скольким форумам надо назначить свою, уникальную картинку, и меняется номер форума. Если какому-то форуму не назначить картинку, у него будет отображаться иконка "тема с новыми сообщениями" или "тема со старыми сообщениями".

Блок с иконками ДЛЯ ТЕМ вставляется ОДИН раз.

Отредактировано Снежка* (Чт, 21 Дек 2006 18:30:21)

Поделиться5Чт, 22 Фев 2007 16:47:41

Автор: Zebra
Гуру идиотов
Зарегистрирован: Сб, 4 Ноя 2006
Сообщений: 942
Уважение: +1143
Позитив: +60
Пол: Женский
Последний визит:
Ср, 22 Авг 2018 21:33:05

FAQ по дизайну форума в CSS

Поделиться6Вт, 27 Мар 2007 13:23:14

Автор: Bench
Cтарожил
Зарегистрирован: Сб, 4 Ноя 2006
Сообщений: 763
Уважение: +315
Позитив: +344
Пол: Мужской
Последний визит:
Вс, 28 Янв 2024 23:31:27

Иконка в блоке статистики:

#pun-stats ul.container {
background: transparent url(http://gorod.4bb.ru/uploads/gorod/2_Go_go.gif) no-repeat 40px 40px;
background-repeat: no-repeat;
padding-left: 51px;

Работает только в ИЭ.

Поделиться7Сб, 31 Мар 2007 13:05:21

Автор: Evil_man
Cтарожил
Зарегистрирован: Пн, 2 Окт 2006
Сообщений: 1010
Уважение: +58
Позитив: 0
Пол: Мужской
Последний визит:
Пт, 29 Апр 2011 20:48:29

Когда делаешь иконку, в css к ней укажи параметры width и height. width - ширина иконки, height - высота, указывается в пикселях (px)
Например, для иконки старых сообщений размером 100 на 100 пикселей будет так

Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat; width: 100px; height: 100px;}

Иконки либо рисуешь сам, либо где заказывешь, либо плагиатишь.

Отредактировано Evil_man (Сб, 31 Мар 2007 13:06:17)

Поделиться8Ср, 4 Апр 2007 08:28:41

Автор: Evil_man
Cтарожил
Зарегистрирован: Пн, 2 Окт 2006
Сообщений: 1010
Уважение: +58
Позитив: 0
Пол: Мужской
Последний визит:
Пт, 29 Апр 2011 20:48:29

Для кнопки отправить скрипта пока не придумали, вроде. Для кнопки вверх надо адрес картинки вставлять в скрипт.

<script type="text/javascript">
var text="<a href=\"javascript:scroll(0,0);\"><img src=\"адрес картинки\"></a>"

pa=document.getElementById("pun-crumbs2")
pa.style.position = "relative"
pa.innerHTML += "<div style=\"position:absolute; z-index:2; right: 10px; top: 10px;\">"+text+"</div>"
</script>

Кнопки цитировать и т.д закажи где либо, форумов по их изготовлению очень много.

Кстати, аватар-то зачем сплагиатил?

Отредактировано Evil_man (Ср, 4 Апр 2007 08:29:41)

Поделиться9Вт, 29 Май 2007 22:04:58

Автор: Evil_man
Cтарожил
Зарегистрирован: Пн, 2 Окт 2006
Сообщений: 1010
Уважение: +58
Позитив: 0
Пол: Мужской
Последний визит:
Пт, 29 Апр 2011 20:48:29

При использовании своего стиля(Администрирование - Стиль) делайте так:

В верхнем окне css находишь строчку /* C2.13 */ и заменяешь до /* C3 Topics.... на это:

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

/* C2.13 */
.punbb .main .tcl {
border-left-style: none;
border-left-width: 0
}

* html .tclcon {height: 1px}

/* C2.14 */
.punbb td div.tclcon {
margin-left: 50px;
}

/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 65px;
height: 65px;}

Жирным - размер иконки. После этого в нижнем окне находишь нужные строки иконок и вставляешь картинки, это уже как в FAQ

В нижнем окошке сss заменяете стандартную строчку следующей:

K!sel написал(а):

/* CS4 Post status icons
-------------------------------------------------------------*/

#pun-main .category Div.icon {
float: none;
display: block;
border-style: none none none none;
height: 30px; width: 30px;
background-repeat : no-repeat;
background-position: top center;
background-color : transparent;
}
#pun-main .category table div.tclcon {margin-right : 40px;}
#pun-main table div.tclcon {padding-left: 35px; }

div.icon {background-image: url(сылка на катринку); }
div.inew {background-image: url(сылка на катринку); }

Или так:

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

/* CS4 Post status icons
-------------------------------------------------------------*/

#pun-main table Div.icon {padding-left: 35px; padding-top: 15px; padding-bottom: 20px;}
Div.icon {
background-image : url(ссылка на картинку);
background-repeat: no-repeat;
}

TR.inew Div.icon {
background-image : url(ссылка на картинку);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(ссылка на картинку);
background-repeat: no-repeat;
}

TR.iclosed Div.icon {
background-image : url(ссылка на картинку);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(ссылка на картинку);
background-repeat: no-repeat;
}

Выносим благодарность следующим лицам: Zebra, K!sel, Lion, LeDa, Karpoff, Evil_man, Lili1, Lexx , Alex Gt

Отредактировано Lexx (Вт, 26 Июн 2007 00:39:46)

Поделиться10Ср, 20 Июн 2007 18:25:20

Автор: $-Frost-$
Заслуженный
Зарегистрирован: Ср, 16 Май 2007
Сообщений: 334
Уважение: +50
Позитив: +40
Пол: Мужской
Последний визит:
Вт, 9 Янв 2018 14:02:19

вот
<style type="text/css">
#pun-main .postlink {margin-top: -9px;}
</style>
должно помочь... но на все 100 не уверен