Страница сообщений
Наследует все параметры страницы личного профиля.
Мышь |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Мышь » Уроки дизайна » FAQ по дизайну форума СSS
Страница сообщений
Наследует все параметры страницы личного профиля.
Страница Участники
Скрин 10
Стиль страницы
<style type="text/css"> #pun-userlist .fs-box { color : #FFFFFF; background-color : #FF0000; } #pun-userlist .usertable .container { background-color : #FF00FF; } </style>
_____________________________________________________________________________________________________________________________________________________
1. Окно с участниками(Скрин 10, элемент 1)
#pun-userlist .usertable table {...}
2.(Скрин 10, элемент 2)
#pun-userlist fieldset {...}
3.(Скрин 10, элемент 3)
#pun-userlist .fs-box {...}
Пример:
<style type="text/css">#pun-userlist .usertable table, #pun-userlist fieldset, #pun-userlist .fs-box {
color : #FFFFFF; background-color : #FF0000;
}
</style>
4. Поле вокруг таблицы с участниками(Скрин 10, элемент 4)
#pun-userlist .usertable .container {...}
Пример:
<style type="text/css">
#pun-userlist .usertable .container {
background-color : #FF00FF;
}
</style>
Общие коды
Есть некотырые парметры, которые чаще всего деляют одинаковыми для всех страниц и элементов форума. Наиболее часто встречающиеся:
1. Цвета всех ссылок форума
.punbb a:link, .punbb a:visited {color:...;} - цвет все ссылок в обычном сотсоянии .punbb a:hover {color: ...;} - цвет всех сслок при наведении
2. Курсор (только для IE)
HTML, BODY {cursor: url(...);} - где вместо троеточия - ссылка на курсор. .punbb a:hover {cursor: url("...");} - вид курсора при наведении на ссылку
3. Полоса прокрутки
HTML, BODY { scrollbar-face-color: #889B9F; scrollbar-shadow-color: #3D5054; scrollbar-highlight-color: #C3D6DA; scrollbar-3dlight-color: #3D5054; scrollbar-darkshadow-color: #85989C; scrollbar-track-color: #95A6AA; scrollbar-arrow-color: #C3D6DA; }
где
scrollbar-face-color - цвет бегунка
scrollbar-shadow-color - цвет рамки бегунка
scrollbar-highlight-color - цвет светлых граней бегунка, создающий 3D эффект
scrollbar-3dlight-color - цвет тени кнопок со стрелками
scrollbar-darkshadow-color - цвет тени от бегунка
scrollbar-track-color - цвет дорожки
scrollbar-arrow-color - цвет стрелок
Частные коды
Если вам необходим совсем экзотический дизайн форума, и вы хотите оформить по-разному все страницы форума, такая возможность существует.
Правда индвидуальный постраничный дизайн можно сделать только для средней част страницы - для основных таблиц (с категориями на главной и со списком тем на страницах подфорума).
Берем все коды для основной таблицы:
#pun .tcl {...} - левый столбец #pun .tc2 {...} - второй столбец #pun .tc3 {...} - третий столбец #pun .tcr - правый столбец #pun th {...} - заголовки столбцов .punbb Div.icon
Если вы хотите отдельно оформить таблицы с категориями, меняем в этих кодах #pun и .punbb на #pun-main .category
В результате получаем
#pun-main .category .tcl {...} #pun-main .category .tc2 {...} #pun-main .category .tc3 {...} #pun-main .category .tcr #pun-main .category th {...} #pun-main .category Div.icon
Если же мы хотим отдельно оформить таблицы с темами внутри подфорумов заменяем #pun и .punbb на #pun-main .forum
Получаем
#pun-main .forum .tcl {...} #pun-main .forum .tc2 {...} #pun-main .forum .tc3 {...} #pun-main .forum .tcr #pun-main .forum th {...} #pun-main .forum Div.icon
Существует возможность и более радикальной дифференциации дизайна. Так, например, можно отдельно оформить каждую категорию и какждый подфорум
Для категории: в том же коже заменяем #pun и .punbb на #pun-categoryx, где x - номер категории в порядке их создания.
Получаем, например:
#pun-main .category .tcl {...} #pun-category1 .tc2 {...} #pun-category1 .tc3 {...} #pun-category1 .tcr #pun-category1 th {...} #pun-category1 Div.icon
Если же речь идет о подфоруме, заменяем #pun и .punbb на #forum_fx.
Для того что узнать x для каждого подфорума. заходим на страницу этого подфорума. Ее адрес будет представлять собой нечто вроде http://forum.mybb.ru/viewforum.php?id=5
Берем последнее число адреса - 5 в нашем примере. Им и заменяем x .
Получаем
#pun-main .forum .tcl {...} #forum_f5 .tc2 {...} #forum_f5 .tc3 {...} #forum_f5 .tcr #forum_f5 th {...} #forum_f5 Div.icon
Вы здесь » Мышь » Уроки дизайна » FAQ по дизайну форума СSS