Техническая поддержка SpyBB

Объявление

Ответы на часто задаваемые вопросы  |  FAQ по администрированию форума  |  FAQ по дизайну форума в CSS  |  Абсолютный помощник по дизайну  |  Навигатор по форуму

Перед регистрацией прочтите правила форума
При поиске ответа на заданный вопрос рекомендуем пользоваться «Поиском».
В случае проблемы с форумом, обязательно указывайте его адрес, иначе мы не сможем Вам помочь!

● 24 марта 2012г. - Закрепление первого сообщения
● 23 марта 2012г.: Изменения в форме ответа - Добавлен стандартный спойлер. Доработан функционал кнопок

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

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

Вы здесь » Техническая поддержка SpyBB » Оформление форума » Иконки тем, статистики и др.

Иконки тем, статистики и др.

Страница: 1
Тема закрыта

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

1

  • Автор: Good
  • Прощайте все
  • Зарегистрирован: 5 Май 2009
  • Приглашений: 0
  • Сообщений: 1584
  • Уважение: +218
  • Позитив: +71
  • Провел на форуме:
    20 дней 13 часов
  • Последний визит:
    21 Окт 2013 19:12:23

Ставить в HTML верх

Иконки активных и не активных тем:
Подходит для всех стилей, особенно для стилей типа Classic

<style>
.punbb table Div.icon {float: left; display: block; width: 30px; height: 30px;
border-style: none;
background-image: url(картинка нет новых сообщений);
background-repeat: no-repeat;
position: relative; margin-right: 10px;}
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>

Ширина иконки
Высота иконки
Иконки для каждого раздела свои

<style>
#pun-main .category Div.icon {float: left; display: block; border-style: none
none none none; height: 30px; width: 30px; background-repeat : no-repeat;
background-position: top center; background-color : transparent; position:
relative; margin-right: 10px;}

tr#forum_f10 div.icon {background-image: url(картинка нет новых сообщений);
}
tr#forum_f10 div.inew {background-image: url(картинка новое сообщение); }

tr#forum_f12 div.icon {background-image: url(картинка нет новых сообщений);
}
tr#forum_f12 div.inew {background-image: url(картинка новое сообщение); }
</style>

Выделенное номер раздела.
Размножайте столько раз, сколько разделов.

Иконки для каждой категории

<style>
#pun-main .category Div.icon {float: left; display: block; border-style: none
none none none; height: 30px; width: 30px; background-repeat : no-repeat;
background-position: top center; background-color : transparent; position:
relative; margin-right: 10px;}

#pun-category1 .container div.icon {background-image:
url(картинка нет новых сообщений); }
#pun-category1 .container div.inew {background-image:
url(картинка новое сообщение); }

#pun-category2 .container div.icon {background-image:
url(картинка нет новых сообщений); }
#pun-category2 .container div.inew {background-image:
url(картинка новое сообщение); }
</style>

Выделенное номер категории.
Размножайте столько, сколько категорий.

Если у вас возникло желание расположить иконки с права от названия разделов, поставьте в HTML верх этот код
Иконки с права

<style type="text/css">
#pun-main .category Div.icon{
float: right;
}
</style>

Если вы хотите совсем убрать иконки, поставьте этот код

<style type="text/css">
.tcl .intd .icon {
display : none;
}
</style>

Для того что бы отодвинуть текст описания форума от иконки,  добавте этот код.

<style>
.punbb td div.tclcon {
margin-left: 50px;
}
</style>

Расстояние от левого края

0

2

  • Автор: Good
  • Прощайте все
  • Зарегистрирован: 5 Май 2009
  • Приглашений: 0
  • Сообщений: 1584
  • Уважение: +218
  • Позитив: +71
  • Провел на форуме:
    20 дней 13 часов
  • Последний визит:
    21 Окт 2013 19:12:23

Ставим иконки в своём стиле

Админка - Стиль в нижнем окне находите пункт

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

div.icon {border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
tr.iredirect div.icon {border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7}
div.inew {border-color: #0080D7 #0065C0 #0058B3 #0072CA}

Вместо выделенного красным поставьте этот код

div.icon {
background: url(иконка не активная) no-repeat;
}

tr.inew div.icon {
background: url(иконка активная) no-repeat;
}

tr.iclosed div.icon {
background: url(иконка закрытая) no-repeat;
}

tr.isticky div.icon {
background: url(иконка важная) no-repeat;
}

Естественно пропишите в него адреса ваших иконок
Далее идёте в верхнее окно и находите пункты

/* C2.14 */ и /* C2.15 */
меняете их содержимое на это

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

/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 30px;
height: 30px;
padding-top: 1px;
margin-top: 1px;
}

Отступ текста от левого края
Ширина ваших иконок
Высота ваших иконок
Значения меняйте как вам надо

Пункт

/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }

удалите совсем.

0

3

  • Автор: Good
  • Прощайте все
  • Зарегистрирован: 5 Май 2009
  • Приглашений: 0
  • Сообщений: 1584
  • Уважение: +218
  • Позитив: +71
  • Провел на форуме:
    20 дней 13 часов
  • Последний визит:
    21 Окт 2013 19:12:23

Иконка в статистике

<style>
#pun-stats ul.container {
background: transparent url(КАРТИНКА) no-repeat 5px 30px;
padding-left: 70px;
}
</style>

Где
5px - левый отступ
30px - верхний отступ
padding-left: 70px - отступ текста от левого края

Значения подгоняйте как вам надо.

Иконки около названия тем в 4 столбце

<style>
td.tcr a{
background: transparent url(Адрес картинки) no-repeat 0px 2px;
padding-left: 16px;
</style>

0

4

  • Автор: Good
  • Прощайте все
  • Зарегистрирован: 5 Май 2009
  • Приглашений: 0
  • Сообщений: 1584
  • Уважение: +218
  • Позитив: +71
  • Провел на форуме:
    20 дней 13 часов
  • Последний визит:
    21 Окт 2013 19:12:23

Есть возможность выделить активные и не активные темы не иконками а цветом заголовков разделов.
Для этого ставим этот скрипт в HTML низ

<script type="text/javascript">
var rows=document.getElementsByTagName("tr")
var no=0
for (no=0; no<=(rows.length-1); no++)
{if (rows[no].className.indexOf("isticky")!=-1)
{rows[no].getElementsByTagName("a")[0].innerHTML="<font color='Цвет важной
темы'><b>"+rows[no].getElementsByTagName("a")[0].innerHTML+"</b></font>"}
else if (rows[no].className.indexOf("inew")!=-1)
{rows[no].getElementsByTagName("a")[0].innerHTML="<font color='Цвет активной
темы'><i>"+rows[no].getElementsByTagName("a")[0].innerHTML+"</i></font>"}
else if (rows[no].className.indexOf("iclosed")!=-1)
{rows[no].getElementsByTagName("a")[0].innerHTML="<font color='Цвет закрытой
темы'>"+rows[no].getElementsByTagName("a")[0].innerHTML+"</font>"}
}
</script>

Вместо выделенного вставляем код цвета

0

Тема закрыта
Страница: 1

Вы здесь » Техническая поддержка SpyBB » Оформление форума » Иконки тем, статистики и др.