Тема: Стандартные значки форума
Ув. юзеры пожалуйста подскажите как изменить стандартные значки форума на свои(стиль Oxygen.Punbb1.3.4
Впринципе сам знаю где искать (в css) но не знаю как правильно оформить т.к в css не силён)
2 25.08.2009 10:56 (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 */
}4 08.09.2010 07:31 (29.09.2010 01:53 отредактировано U#0)
- 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] - идентификационный номер форума.
+ hcs
5 28.09.2010 12:01 (28.09.2010 21:28 отредактировано S1LVER)
- S1LVER
- Интересующийся
- Неактивен
Re: Стандартные значки форума
Что-то не изменяется ширина колонки с иконкой. При попытке изменить, все разъезжается 
Вот это поле разъезжается.
.brd .main-content .main-item .icon {
float:left;
height:55px;
margin-left:-53.700px;
margin-top:5px;
width:55px;
}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;
}
результат тоже нулевой. Помогите плиз. Заранее огромное спасибо