Страница сообщений
Наследует все параметры страницы личного профиля.
FAQ по дизайну форума СSS
Сообщений 21 страница 25 из 25
Поделиться212008-12-12 22:59:45
- Администратор
- Зарегистрирован: 2008-12-05
- Приглашений: 0
- Сообщений: 652
- Уважение: +87
- Позитив: +66
- Пол: Мужской
- Возраст: 34 [1989-11-19]
- Провел на форуме:
14 дней 21 час - Последний визит:
2022-03-01 23:06:28
Поделиться222008-12-12 23:01:51
- Администратор
- Зарегистрирован: 2008-12-05
- Приглашений: 0
- Сообщений: 652
- Уважение: +87
- Позитив: +66
- Пол: Мужской
- Возраст: 34 [1989-11-19]
- Провел на форуме:
14 дней 21 час - Последний визит:
2022-03-01 23:06:28
Страница Участники
Скрин 10
Поделиться232008-12-12 23:03:36
- Администратор
- Зарегистрирован: 2008-12-05
- Приглашений: 0
- Сообщений: 652
- Уважение: +87
- Позитив: +66
- Пол: Мужской
- Возраст: 34 [1989-11-19]
- Провел на форуме:
14 дней 21 час - Последний визит:
2022-03-01 23:06:28
Стиль страницы
Код:
<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>
Поделиться242008-12-12 23:05:09
- Администратор
- Зарегистрирован: 2008-12-05
- Приглашений: 0
- Сообщений: 652
- Уважение: +87
- Позитив: +66
- Пол: Мужской
- Возраст: 34 [1989-11-19]
- Провел на форуме:
14 дней 21 час - Последний визит:
2022-03-01 23:06:28
Общие коды
Есть некотырые парметры, которые чаще всего деляют одинаковыми для всех страниц и элементов форума. Наиболее часто встречаются:
1. Цвета всех ссылок форума
Код:
.punbb a:link {color:...;} - цвет всех ссылок в обычном сотсоянии
.punbb a:visited {color:...;} - цвет всех ссылок по которым вы уже перешли(желательно делать такими же как и в обычном состояние)
.punbb a:hover {color: ...;} - цвет всех ссылок при наведении
.punbb a:active {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 - цвет стрелок
Поделиться252008-12-12 23:09:38
- Администратор
- Зарегистрирован: 2008-12-05
- Приглашений: 0
- Сообщений: 652
- Уважение: +87
- Позитив: +66
- Пол: Мужской
- Возраст: 34 [1989-11-19]
- Провел на форуме:
14 дней 21 час - Последний визит:
2022-03-01 23:06:28
Частные коды
Если вам необходим совсем экзотический дизайн форума, и вы хотите оформить по-разному все страницы форума, такая возможность существует.
Правда индвидуальный постраничный дизайн можно сделать только для средней част страницы - для основных таблиц (с категориями на главной и со списком тем на страницах подфорума).
Берем все коды для основной таблицы:
Код:
#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://help.bestff.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