Единый форум поддержки

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

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

Вы здесь » Единый форум поддержки » Справочная » FAQ по дизайну форума в CSS

FAQ по дизайну форума в CSS

Страница:   1 2
Тема закрыта

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

21

  • Автор: Zebra
  • Гуру идиотов
  • Zebra
  • Зарегистрирован: Сб, 4 Ноя 2006
  • Сообщений: 942
  • Уважение: +1143
  • Позитив: +60
  • Пол: Женский
  • Последний визит:
    Ср, 22 Авг 2018 21:33:05

1. Окно профиля (Скрин 9, элемент 1)

Код:
#viewprofile .container {...}

2. Cлово профиль (Скрин 9, элемент 2)

Код:
#viewprofile h2 span {...}

3. (Скрин 9, элемент 3)

Код:
#viewprofile h2  {...}

4. (Скрин 9, элемент 4)

Код:
#viewprofile ul {...}

Пример:
<style type="text/css"> #viewprofile .container, #viewprofile h2 span, #viewprofile h2, #viewprofile ul {
color : #FF0000; background-color : #00FF00;
}
</style>

5. Название поля (Скрин 9, элемент 5)

Код:
#viewprofile li span {...}

Пример:
<style type="text/css">#viewprofile li span {
color : red; background-color : #00FF00; background-image : url (http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

6. Личные данные (Скрин 9, элемент 6)

Код:
#viewprofile li strong {...}

Пример:
<style type="text/css">#viewprofile li strong {
color : #FFFFFF; background-color : #FF0000;
}
</style>

0

22

  • Автор: Zebra
  • Гуру идиотов
  • Zebra
  • Зарегистрирован: Сб, 4 Ноя 2006
  • Сообщений: 942
  • Уважение: +1143
  • Позитив: +60
  • Пол: Женский
  • Последний визит:
    Ср, 22 Авг 2018 21:33:05

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

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

0

23

  • Автор: Zebra
  • Гуру идиотов
  • Zebra
  • Зарегистрирован: Сб, 4 Ноя 2006
  • Сообщений: 942
  • Уважение: +1143
  • Позитив: +60
  • Пол: Женский
  • Последний визит:
    Ср, 22 Авг 2018 21:33:05

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

СКРИН №10

0

24

  • Автор: Zebra
  • Гуру идиотов
  • Zebra
  • Зарегистрирован: Сб, 4 Ноя 2006
  • Сообщений: 942
  • Уважение: +1143
  • Позитив: +60
  • Пол: Женский
  • Последний визит:
    Ср, 22 Авг 2018 21:33:05

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

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

25

  • Автор: Zebra
  • Гуру идиотов
  • Zebra
  • Зарегистрирован: Сб, 4 Ноя 2006
  • Сообщений: 942
  • Уважение: +1143
  • Позитив: +60
  • Пол: Женский
  • Последний визит:
    Ср, 22 Авг 2018 21:33:05

Общие коды

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

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

+2

26

  • Автор: Zebra
  • Гуру идиотов
  • Zebra
  • Зарегистрирован: Сб, 4 Ноя 2006
  • Сообщений: 942
  • Уважение: +1143
  • Позитив: +60
  • Пол: Женский
  • Последний визит:
    Ср, 22 Авг 2018 21:33:05

Частные коды

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

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

Код:
#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 для каждого подфорума. заходим на страницу этого подфорума. Ее адрес будет представлять собой нечто вроде https://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

+5

Тема закрыта
Страница:   1 2

Вы здесь » Единый форум поддержки » Справочная » FAQ по дизайну форума в CSS