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

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

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

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

Справка по дизайну форума в 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>
#viewprofile .container,
#viewprofile h2 span,
#viewprofile h2,
#viewprofile ul {
    color: #FF0000;
    background-color: #00FF00;
}
</style>

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

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

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

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

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

Пример:
<style>
#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

https://upforme.ru/uploads/0000/14/1c/15830/t911673.jpg

0

24

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

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

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

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