1

Тема: Стандартные значки форума

Ув. юзеры пожалуйста подскажите как изменить стандартные значки форума на свои(стиль Oxygen.Punbb1.3.4

Впринципе сам знаю где искать (в css) но не знаю как правильно оформить т.к в css не силён)

Поделиться

2 (25.08.2009 10:57 отредактировано Дачник)

Re: Стандартные значки форума

coderz, Ты про синие ромбики, которые "загораются" при новых сообщениях?
Если да, то вот? добрый человек с этого форума подсказал мне решение.
Старый стиль я закомментировал.

/* Status indicators
----------------------------------------------------------------*/

.brd .main-content .main-item .icon {
/*    border-color: #EDF1F5 #DDE0E4 #C6CBD3 #BABFC6 */
    position: relative;
    left: -0.9em;
    border: none;
    width: 30px;
    height: 30px;
    }

.brd .main-content .main-item .icon {
    background: url(icon/icon.png) no-repeat;
}

.brd .main-content .redirect .icon {
/*    border-color: #f4f4f4 #f4f4f4 #f4f4f4 #f4f4f4 */
    background: url(icon/redirect.png) no-repeat;
    }

.brd .main-content .sticky .icon {
/*    border-color: #D7E5F3 #C3CFDC #9FB3C7 #90A2B4 */
    background: url(icon/sticky.png) no-repeat;
    }

.brd .main-content .closed .icon {
/*    border-color: #ACACAC #979797 #898989 #7A7A7A */
    background: url(icon/close.png) no-repeat;
    }

.brd .main-content .sticky .closed {
/*    border-color: #D7E5F3 #C3CFDC #898989 #7A7A7A */
    background: url(icon/sticky_close.png) no-repeat;
    }

.brd .main-content .new .icon {
    background: url(icon/new.png) no-repeat;
/*    border-color: #2B75AD #235E8C #1F537B #266799 */
    }

Поделиться

3

Re: Стандартные значки форума

Большое спасиббоо!)

Поделиться

4 (29.09.2010 01:53 отредактировано U#0)

Re: Стандартные значки форума

Начнём с теории:
Через пробел, в листах стилей описываются контекстные идентификаторы и классы.
Для описания соединённых идентификаторов и классов, пробелы не используются.
Именно по этому приведённый ниже код не отобразит картинку картину предназначенную именно для важной, закрытой темы:

.brd .main-content .sticky .closed .icon {
    background: url(icons/sticky_closed.png) no-repeat;
    }

Перейдём к практике:
1. В Oxygen.css задать параметры иконок, изменив стиль ".brd .main-content .main-item .icon".
Заменить 999-1007 строки:

.brd .main-content .main-item .icon {
    border-style: solid;
    border-width: 0.5833em;
    height: 0;
    width: 0;
    float: left;
    margin-top: 0.667em;
    margin-left: -2.417em;
    }

на:

.brd .main-content .main-item .icon {
    border: none;
    float: left;
    width: 32px; /* Ширина иконки */
    height: 32px; /*Высота иконки */
    margin-top: 5px; /* Отступ от верхнего края */
    margin-bottom: 5px; /* Аналогичный запас снизу */
    margin-left: -34px; /*Смещение иконки влево, должно быть на 2 пикселя больше ширины самой иконки */
    }

2. В Oxygen_cs.css задать фоновые изображения для всех возможных типов иконок.
Заменить 362- 387 строки:

/* Status indicators
----------------------------------------------------------------*/

.brd .main-content .main-item .icon {
    border-color: #EDF1F5 #DDE0E4 #C6CBD3 #BABFC6;
    }

.brd .main-content .redirect .icon {
    border-color: #f4f4f4 #f4f4f4 #f4f4f4 #f4f4f4;
    }

.brd .main-content .sticky .icon {
    border-color: #D7E5F3 #C3CFDC #9FB3C7 #90A2B4;
    }

.brd .main-content .closed .icon {
    border-color: #ACACAC #979797 #898989 #7A7A7A;
    }

.brd .main-content .sticky .closed .icon {
    border-color: #D7E5F3 #C3CFDC #898989 #7A7A7A;
    }

.brd .main-content .new .icon {
    border-color: #2B75AD #235E8C #1F537B #266799;
    }

на:

/* Иконки фрумов
----------------------------------------------------------------*/
.brd .main-content .icon {
    background: url(icons/forum.png) no-repeat; /* Прочитанный форум */
    }
.brd .main-content .icon.new {
    background: url(icons/forum_new.png) no-repeat; /* Непрочитанный форум */
    }
.brd .main-content .icon.redirect {
    background: url(icons/forum_redirect.png) no-repeat; /* Перенаправление */
    }

/* Иконки тем без сообщений пользователя
----------------------------------------------------------------*/
.brd .main-content .icon.normal {
    background: url(icons/main.png) no-repeat; /* Прочитанная тема */
    }
.brd .main-content .icon.normal.new {
    background: url(icons/main_new.png) no-repeat; /* Непрочитанная тема */
    }
.brd .main-content .icon.sticky {
    background: url(icons/sticky.png) no-repeat; /* Важная, прочитанная тема */
    }
.brd .main-content .icon.sticky.new {
    background: url(icons/sticky_new.png) no-repeat; /* Важная, непрочитанная тема */
    }
.brd .main-content .icon.closed {
    background: url(icons/closed.png) no-repeat; /* Закрытая, прочитанная тема */
    }
.brd .main-content .icon.closed.new {
    background: url(icons/closed_new.png) no-repeat; /* Закрытая, непрочитанная тема */
    }
.brd .main-content .icon.sticky.closed {
    background: url(icons/sticky_closed.png) no-repeat; /* Важная, закрытая, прочитанная тема */
    }
.brd .main-content .icon.sticky.closed.new {
    background: url(icons/sticky_closed_new.png) no-repeat; /* Важная, закрытая, непрочитанная тема */
    }

/* Иконки тем с сообщениями пользователя
----------------------------------------------------------------*/
.brd .main-content .icon.posted {
    background: url(icons/posted_main.png) no-repeat; /* Прочитанная тема */
    }
.brd .main-content .icon.posted.new {
    background: url(icons/posted_main_new.png) no-repeat; /* Непрочитанная тема */
    }
.brd .main-content .icon.posted.sticky {
    background: url(icons/posted_sticky.png) no-repeat; /* Важная, прочитанная тема */
    }
.brd .main-content .icon.posted.sticky.new {
    background: url(icons/posted_sticky_new.png) no-repeat; /* Важная, непрочитанная тема */
    }
.brd .main-content .icon.posted.closed {
    background: url(icons/posted_closed.png) no-repeat; /* Закрытая, прочитанная тема */
    }
.brd .main-content .icon.posted.closed.new {
    background: url(icons/posted_closed_new.png) no-repeat; /* Закрытая, непрочитанная тема */
    }
.brd .main-content .icon.posted.sticky.closed {
    background: url(icons/posted_sticky_closed.png) no-repeat; /* Важная, закрытая, прочитанная тема */
    }
.brd .main-content .icon.posted.sticky.closed.new {
    background: url(icons/posted_sticky_closed_new.png) no-repeat; /* Важная, закрытая, непрочитанная тема */
    }

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

3. В Oxygen.css отключить отображение точки у тем с сообщениями пользователя, изменив стиль ".brd .main-content .main-item .hn .posted-mark".
Заменить 1009- 1015 строки:

.brd .main-content .main-item .hn .posted-mark {
    position: absolute;
    font-size: 2em;
    width: 1em;
    left: -0.5em;
    top: 0;
    }

на:

.brd .main-content .main-item .hn .posted-mark {
    position: absolute;
    font-size: 2em;
    width: 1em;
    left: -0.5em;
    top: 0;
    display: none;
    }

4. В Oxygen.css отключить пояснения (Важно, Закрыто) перед названием темы, изменив стиль ".brd .main-content .main-item .item-status".
Заменить 956- 958 строки:

.brd .main-content .main-item .item-status {
    font-weight: bold;
    }

на:

.brd .main-content .main-item .item-status {
    font-weight: bold;
    display: none;
    }

Если ... голова, рукам покоя не даёт - можно добавить индивидуальные стили иконок для каждого форума.

5. В Oxygen_cs.css задать фоновые изображения для каждого форума.
После таблицы стилей из 2 пункта, добавить:

/* Индивидуальные иконки фрумов
----------------------------------------------------------------*/
#forum[ID].main-item .icon { background: url(icons/forums/forum[ID].png) no-repeat; } /* Прочитанный форум */
#forum[ID].main-item .icon.new { background: url(icons/forums/forum[ID]_new.png) no-repeat; } /* Непрочитанный форум */

* [ID] - идентификационный номер форума.

Поделиться

5 (28.09.2010 21:28 отредактировано S1LVER)

Re: Стандартные значки форума

Что-то не изменяется ширина колонки с иконкой. При попытке изменить, все разъезжается  sad

Вот это поле разъезжается.

http://www.goldencentury.org/upicture/2012514978.jpg

.brd .main-content .main-item .icon {
float:left;
height:55px;
margin-left:-53.700px;
margin-top:5px;
width:55px;
}

Поделиться

6

Re: Стандартные значки форума

Очень прошу помочь разобраться с иконками целый день проковырялся все бестолку. Делаю все как описано в этой теме меняю Oxygen.css и Oxygen_cs.css папку с иконками ложу в корень и иконки не отображаются. Также пробовал сделать как в теме dl oxygen изменял Oxygen_cs.css

/* Status indicators
----------------------------------------------------------------*/
.brd .main-content .main-item .icon {
    position: relative;
    left: -0.5em;
    border: none;
    width: 30px;
    height: 30px;
}
.brd .main-content .main-item .icon {
    background: url(icon/icon.png) no-repeat;
}

.brd .main-content .redirect .icon {
    background: url(icon/redirect.png) no-repeat;
    }

.brd .main-content .sticky .icon {
    background: url(icon/sticky.png) no-repeat;
    }

.brd .main-content .closed .icon {
    background: url(icon/close.png) no-repeat;
    }

.brd .main-content .sticky .closed {
    background: url(icon/sticky_close.png) no-repeat;
    }

.brd .main-content .new .icon {
    background: url(icon/new.png) no-repeat;
    }

результат тоже нулевой. Помогите плиз. Заранее огромное спасибо

Поделиться

7

Re: Стандартные значки форума

а для версии форума 1.4.2 есть различия
например css всего один Oxygen.min.css
пробую изменить иконки, классы по смыслу нашел, они называются без .brd
прописал по примеру пункта 2 пути к иконкам, но вместо иконок черные квадраты sad

Сайт NlCK

Поделиться

8

Re: Стандартные значки форума

Убери бордер. Файрбаг в помощь.

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

9

Re: Стандартные значки форума

В моем случае border нет
Вот стандартный код

.main-content .main-item .icon
{border-color:#edf1f5 #DDE0E4 #c6cbd3 #BABFC6}

Вот как пробовал я

Вар1
.main-content .icon {
    background:url("images/cancel.png") no-repeat; /* Прочитанный форум */
    }
Вар2
.main-content .main-item .icon {
    background:url("images/cancel.png") no-repeat; /* Прочитанный форум */
    }

В результате вижу черные квадраты, прошу помощи.

Сайт NlCK

Поделиться

10

Re: Стандартные значки форума

скорее всего у вас нет картинки или путь к ней не правильный

PunBB Extensions | Перед созданием темы => ФАК | Профессиональная разработка сложных сайтов

Расширения распространяются по Creative Commons Attribution-NonCommercial 4.0

Сайт KANekT

Поделиться

11

Re: Стандартные значки форума

Черные квадраты - это бордеры черного (по-умолчанию) цвета.
Вот стандартный код:

.main-content .main-item .icon {
    border-style: solid;
    border-width: 0.5833em;
    float: left;
    height: 0;
    margin-left: -2.417em;
    margin-top: 0.667em;
    width: 0;
}

Файрбаг поставил?

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

12

Re: Стандартные значки форума

Файрбаг поставил?

я не пользуюсь файер фоксом, у меня хром

я и без него ща разбирусь, надеюсь smile

Сайт NlCK

Поделиться

13

Re: Стандартные значки форума

в хроме встроено средство для разработчиков вот смотри какие стили элемент наследует.

Добавлено спустя 1 минуту 47 секунд:

разбираться без файрбага - это бессмысленная трата времени. точно также как искать ошибку в коде без дебаггера.

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

14

Re: Стандартные значки форума

есть расширение
http://punbb.informer.com/forums/topic/ … con-topic/

Добавлено спустя 6 минут 14 секунд:

но он не может задать каждому форуму свой значок
делаю как в пункте 5 - не выходит big_smile

Сайт NlCK

Поделиться

15

Re: Стандартные значки форума

кто сделал индивидуальные иконки, поделитесь css smile

Сайт NlCK

Поделиться

16

Re: Стандартные значки форума

у меня вообще таких строчек нету!

.brd .main-content .main-item .item-status

Версия PunBB
PunBB 1.4

Поделиться

17

Re: Стандартные значки форума

так вы в теме 1.3. в 1.4 верстка была существенно переработана и очищена.

вроде как .brd вообще удален.

PunBB Extensions | Перед созданием темы => ФАК | Профессиональная разработка сложных сайтов

Расширения распространяются по Creative Commons Attribution-NonCommercial 4.0

Сайт KANekT

Поделиться

18

Re: Стандартные значки форума

разобрался
вот для punbb 1.4

вот отдельная картинка для форума с ID 9
#forum9.main-item .icon { background:transparent url(images/iclosed.png) no-repeat; } 
#forum9.main-item .icon.new { background:transparent url(images/iclosed.png) no-repeat; }

Сайт NlCK

Поделиться

19

Re: Стандартные значки форума

Странно что до сих пор никто адекватное расширение не написал...

Поделиться

20

Re: Стандартные значки форума

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

Сайт 1c2b

Поделиться

21

Re: Стандартные значки форума

Тоже поддерживаю данную идею.

Поделиться

22

Re: Стандартные значки форума

Мужики, подскажите. Сделал как предлагал U#0,  все работает отлично. Хотелось бы еще воткнуть напротив "активные темы" там квадраты ранее были, сейчас чисто.

Поделиться