Мышь

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

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


Вы здесь » Мышь » Уроки дизайна » FAQ по дизайну форума СSS


FAQ по дизайну форума СSS

Сообщений 21 страница 25 из 25

21

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

Наследует все параметры страницы личного профиля.

0

22

Страница Участники

Скрин 10

http://forumupload.ru/uploads/0000/17/3d/170-1.jpg

0

23

Стиль страницы

Код:
<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>

0

24

Общие коды

Есть некотырые парметры, которые чаще всего деляют одинаковыми для всех страниц и элементов форума. Наиболее часто встречающиеся:

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  - цвет стрелок

0

25

Частные коды

Если вам необходим совсем экзотический дизайн форума, и вы хотите оформить по-разному все страницы форума, такая возможность существует.
Правда индвидуальный постраничный дизайн можно сделать только для средней част страницы - для основных таблиц (с категориями на главной и со списком тем на страницах подфорума).

Берем все коды для основной таблицы:

Код:
#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

0


Вы здесь » Мышь » Уроки дизайна » FAQ по дизайну форума СSS