ГЛАВНАЯ СТРАНИЦА

Часть 1[/size]

стиль этой части

Код:

<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
#pun {background-color: transparent; width: 76%;}
#pun-title table {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/header.gif);
height : 132px; 
}
#pun-title .title-logo {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat; height : 132px;
}
#pun-title .title-logo span {display: none;}
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {color: green;}
#pun-navlinks a:hover, #pun-navlinks a:hover span { 
color: red;
#pun-ulinks .container {
background-color : #00FFFF !important;
}
#pun-ulinks a {
color : #00FFFF
}
#pun-announcement h2 {background-color: #FF0000; color: red}
#pun-status .container { color : red;
background-color : #9900CC;
}
#pun-crumbs1 .container,  #pun-crumbs2 .container{
color : red; background-color : #00FFFF !important;
}
</style>

1. Основной фон

HTML, BODY {...}

Пример:

<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("ССЫЛКА НА ВАШЕ ФОНОВОЕ ИЗОБРАЖЕНИЕ"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
</style>

расшифровка:

<style type="text/css">
Основной фон {цвет: #желый; картинка: ссылка на фоновую картинку; повторять?: НЕ повторять; прокручивать?: нет, зафиксировать; позиция: сверху по центру;}
</style>

2. Фон под форумными таблицами

#pun {...}

Пример:

<style type="text/css">
#pun {background-color: transparent; width: 76%;}
</style>

расшифровка:

<style type="text/css">
#фон под таблицами {цвет: прозрачный; ширина: сузить до 76%;}
</style>

3. Шапка форума
Шапка представляет из себя таблицу, на которой помещен логотип и рекламный баннер mybb.

#pun-title table {...}

Пример:

<style type="text/css">
#pun-title table {background-image: url(ссылка на фоновое изображение);
height: 132px;
}
</style>

расшифровка:

<style type="text/css">
#шапка {фоновая картинка: url(ссылка на фоновую картинку);
высота: 132 пикселя;
}
</style>

4. Логотип форума
Логотип в css форумов - это часть шапки. В остальном лого - это красивая картинка с названием форума.
Обычно лого заранее встраивают в фоновую картинку шапки, чтобы не маяться с css-кодом.
Продвинутые дизайнеры предпочитают логотип вставлять отдельно, к тому же, можно удобно менять фон шапки (на праздники, к примеру), а картинку-лого оставлять нетронутой.

#pun-title .title-logo {...}

Пример:

<style type="text/css">
#pun-title .title-logo {background-image: url(ссылка на картинку лого);
background-repeat: no-repeat; height: 132px;
}
</style>

расшифровка:

<style type="text/css">
#логотип {фоновая картинка: url(ссылка на картинку лого);
повторять?: НЕ повторять; высота: 132 пикселя;
}
</style>

Так же к логотипу относится и текстовое название форума. Те, кто ставят Лого, обычно отключают этот текст:

<style type="text/css">
#pun-title .title-logo span {display: none;}
</style>

расшифровка:

<style type="text/css">
#текст логотипа {отображение: НЕ отображать;}
</style>

5. Меню навигации

#pun-navlinks .container {...}

Пример:

<style type="text/css">
#pun-navlinks .container {
padding-top: 4px; background-color: #C0C0C0;
background-image: url(ссылка на фоновое изображение);
font-weight: bold;
text-align: center;
}
</style>

расшифровка:

<style type="text/css">
#меню навигации {
отступ сверху: 4 пикселя; цвет фона: #серый;
фоновая картинка: url(ссылка на фоновую картинку);
"жирность" шрифта: жирный;
расположение текста: по центру;
}
</style>

ВАЖНО!
Ссылки в меню навигации специфичны, поэтому код для них отличается от того, что приводился выше (см. "Параметры и значения CSS > ССЫЛКИ")

<style type="text/css">
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {color: green;}
#pun-navlinks a:hover, #pun-navlinks a:hover span {color: red;}
</style>

Каждая ссылка меню навигации так же имеет свой собственный код:
Форум

Код:

li#navindex a span {...}

Участники

Код:

li#navuserlist a span {...}

Поиск

Код:

li#navsearch a span {...}

Профиль

Код:

li#navprofile a span {...}

Сообщения

Код:

li#navpm a span {...}

Администрирование

Код:

li#navadmin a span {...}

Выход

Код:

li#navlogout a span {...}

и т.п.
Подробнее о настройке ссылок на одном из примеров (замена ссылок на картинки) можно посмотреть тут: Замена ссылок основного меню (c) Lazary

6. Пользовательское меню

#pun-ulinks .container {...}

Пример:

<style type="text/css">
#pun-ulinks .container {
background-color: #00FFFF !important;
}
#pun-ulinks a {
color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css">
#пользовательское меню {
фоновый цвет: #голубой;
}
#ссылки пользовательского меню {
цвет: #голубой;
}
</style>

7. Заголовок объявления

#pun-announcement h2 {...}

Пример:

<style type="text/css">
#pun-announcement h2 {background-color: #FF0000; color: red;}
</style>

расшифровка:

<style type="text/css">
#заголовок объявления {цвет фона: #красный; цвет текста: красный;}
</style>

8. Объявление

#pun-announcement .container {...}

Пример аналогичен предыдущим

9. Окно статуса

#pun-status .container {...}

Пример аналогичен предыдущим

10. Название форума

#pun-crumbs1 .container {...}

Часть 2

стиль этой части

Код:

<style type="text/css">
#pun-main h2 { 
color : green;
background-color : transparent; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun th {
color: red; background-color : #FF00FF; background-image : url(http://i17.photobucket.com/albums/b80/Zebra_/Senzanome.jpg);
}
Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
#pun .tcl, #pun .tcr {width: 20%;}
#pun  .tc2, #pun .tc3 { color: red;
background-color : #FF0000;
}
.modlist {display: none;}
#pun-main td {
border-color : #00FFFF;
}
</style>

1. Категории форума

#pun-main h2 {...}

Пример:

<style type="text/css"> #pun-main h2 {
color: green;
background-color: transparent; background-image: url(ссылка на картинку);
}
</style>

расшифровка:

<style type="text/css"> #категории форума {
цвет текста: зеленый;
цвет фона: прозрачный; фоновая картинка: url(ссылка на картинку);
}
</style>

2. Шапка форумных таблиц (Строка "Форум-Тем-Сообщений-Последнее сообщение")

#pun th {...}

Пример:

<style type="text/css"> #pun th {
color: red; background-color: #FF00FF; background-image: url(ссылка на картинку);
}
</style>

расшифровка:

<style type="text/css"> #шапка форумных таблиц {
цвет текста: красный; цвет фона: #розовый; фоновая картинка: url(ссылка на картинку);
}
</style>

3. Иконки сообщений
Иконка "Нет новых сообщений"
Div.iconИконка "Новое сообщение"

TR.inew Div.icon {...}

Иконка "Выделенная тема"

TR.isticky Div.icon {...}

Иконка "Закрытая тема"

TR.iclosed Div.icon {...}

Иконка "Перенесенная тема"

TR.iredirect Div.icon {...}

Пример:

<style type="text/css">TR.inew Div.icon {
background-image: url(ссылка на картинку);
background-repeat: no-repeat;
}
</style>

расшифровка:

<style type="text/css">иконка "нет новых сообщений" {
картинка иконки: url(ссылка на картинку);
повторять?: не повторять;
}
</style>

ВАЖНО!
В некоторых стилях форума данные коды для иконки могут не сработать. В таком случае код иконки "Нет новых сообщений" следует прописать так:

.punbb table Div.icon {float: left; display: block; width: 30px; height: 30px; border-style: none none none none;}

расшифровка:

иконка "нет новых сообщений" {расположение: слева; отображение: в рамке; ширина: 30 пикселей; высота: 30 пикселей; стиль границ: нет границ;}

4. Список форумов (первый столбец форумных таблиц)

#pun .tcl {...}

Пример:

#pun .tcl {width: 20%;}

расшифровка:

#список форумов {ширина: 20 процентов;}

5. Количество тем (второй столбец форумных таблиц)

#pun .tc2 {...}

Пример:

<style type="text/css">#pun  .tc2 {color: red;
background-color: #FF0000;
}
</style>

расшифровка:

<style type="text/css">#количество тем {цвет текста: красный;
цвет фона: #красный;
}
</style>

6. Количество сообщений (третий столбец форумных таблиц)

#pun .tc3 {...}

Пример аналогичен предыдущим

7. Последнее сообщение (четвертый столбец форумных таблиц)

##pun .tcr {...}

Пример аналогичен предыдущим

8. Список модераторов форума

.modlist {...}

Пример:

<style type="text/css">.modlist {display: none;}</style>

расшифровка:

<style type="text/css">список модераторов {отображение: не отображать;}</style>

1. Границы форумных таблиц

#pun-main td {...}

Пример:

<style type="text/css">#pun-main td {
border-color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css">#границы форумных таблиц {
цвет границ: #голубой;
}
</style>

Часть 3

стиль этой части

Код:

<style type="text/css">
#pun-stats .container {
color : red;
background-color : #FF00FF;
}
li#onlinelist {
border-top-style : solid; border-top-width : 2px; border-top-color : #00FFFF; background-color: #FFCCCC;
}
li#onlinelist div {
text-align : center; color: green; background-color: #CC66FF;
}
#pun-about p.container {text-align : center; color: green; background-color: #CC66FF;}
#html-footer .container {background-color: #00FF00; color: #FF0000;}
</style>

1. Статистика форума

#pun-stats .container {...}

Если не работает, то пишем это:

#pun-stats .statscon {...}

Пример:

<style type="text/css">#pun-stats .container {
color: red;
background-color: #FF00FF;
}
</style>

расшифровка:

<style type="text/css">#статистика {
цвет текста: красный;
цвет фона: #розовый;
}
</style>

2. Пользователи он-лайн (строчка "активны (гостей: Х, пользователей Х) ...")
Эта часть по умолчанию принимает те же значения, что стоят в статистике, но можно задать ей другой стиль.

li#onlinelist {...}

Пример:

<style type="text/css"> li#onlinelist {
border-top-style: solid; border-top-width: 2px; border-top-color: #00FFFF; background-color: #FFCCCC;
}
</style>

расшифровка:

<style type="text/css"> пользователи он-лайн {
стиль верхней границы: линия; ширина верхней границы: 2 пикселя; цвет верхней границы: #голубой; фоновый цвет: #светло-розовый;
}
</style>

3. Посетители за 24 часа (строчка "сегодня были (пользователей Х) ...")

li#onlinelist div {...}

Пример:

<style type="text/css">li#onlinelist div {
text-align: center; color: green; background-color: #CC66FF;
}
</style>

расшифровка:

<style type="text/css">посетители за 24 часа {
выравнивание текста: по центру; цвет текста: зеленый; цвет фона: #фиолетовый;
}
</style>

4. Название форума внизу.

#pun-crumbs2 p.container {...}

Пример:

<style type="text/css">#pun-crumbs2 p.container {
color: red; background-color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css">#название форума внизу {
цвет текста: красный; цвет фона: #голубой;
}
</style>

5. Копирайт сервиса (строка "Powered by ...")

#pun-about p.container {...}

Пример аналогичен предыдущим

6. HTML низ
В этом окне отображается все, что вы вводите в поле HTML-низ в настройках (кроме скриптов).

#html-footer .container {...}

Пример аналогичен предыдущим

СТРАНИЦА СПИСКА ТЕМ

стиль этой части

Код:

<style tye="text/css">
#pun-main h1 {
color : green;
background-color : #FF00FF; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun-main .pagelink, #pun-main .postlink {color: red;}
#pun-main .modmenu p.container {
color : red; background-color: #00FFFF;
}
#pun-main .modmenu p.container strong {color: red;}
#pun-main .modmenu .container a:link, #pun-main .modmenu .container a:visited {
color : yellow;
}
</style>

Страница списка тем наследует большинство параметров главной страницы - ширину и цвет столбцов, обрамление таблицы, иконки.
Однако некоторые элементы все же определяются отдельно:

1. Заголовок (название) форума

#pun-main h1 {...}

Пример:

<style type="text/css"> #pun-main h1 {
color: green;
background-color: #FF00FF; background-image: url(ссылка на картинку);
}
</style>

расшифровка:

<style type="text/css"> #заголовок форума {
цвет текста: зеленый;
цвет фона: #розовый; фоновое изображение: url(ссылка на картинку);
}
</style>

2. Нумерация страниц

#pun-main .pagelink {...}

Пример аналогичен предыдущим

3. Ссылки "Начать тему" и "Начать опрос"

#pun-main .postlink {...}

Пример аналогичен предыдущим

4. Строка модерирования

#pun-main .modmenu p.container {...}

Пример:

<style type="text/css"> #pun-main .modmenu p.container {
color: red; background-color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css"> #строка модерирования {
цвет текста: красный; цвет фона: #голубой;
}
</style>

СТРАНИЦА ТЕМЫ

стиль этой части

Код:

<style type="text/css">
#pun-main .post h3 {border-color : #00FFFF;
 background-color : #00FFFF;
}
#pun-main .post h3 span, #pun-main .post .permalink, #pun-main .post h3 strong  { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
#pun-main .post-author ul {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
#pun-main .post .container {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
#pun-main .post-body { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
#pun-main .post-content {
background-color : #FFFF33; color : #00FFFF;
}
#pun-main .quote-box, #pun-main .code-box {color: #00FF00; background-color: #FFFFFF;}
#pun-main .post-links li,  #pun-main .post-links ul {
 background-color : #FFCCFF;
}
</style>

Таблица с текстами и авторами сообщений состоит из множества второстепенных элементов. Вряд ли может понадобиться их индивидуальное оформление, как на скрине, однако, если вы радикально меняете стиль, их все придется обозначить в коде с одинаковыми параметрами, чтобы дизайн оставался в одном стиле. Напомню, что когда мы хотим придать одинаковый вид нескольким элементам, т.е. приписать им одинаковые параметры, их селекторы (названия), мы пишем через запятую перед фигурной скобкой.
1. Шапка постов

#pun-main .post h3 {...}

Пример:

<style type="text/css">#pun-main .post h3 {border-color: #00FFFF;
background-color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css">#шапка постов {цвет границ: #голубой;
цвет фона: #голубой;
}
</style>

2. Шапка постов-2

#pun-main .post h3 span {...}

Пример аналогичен предыдущим
3. Дата сообщения

#pun-main .post .permalink {...}

4. Номер сообщения

#pun-main .post h3 strong {...}

5. Информация об авторе

#pun-main .post-author ul {...}

Пример:

<style type="text/css"> #pun-main .post-author ul {border-color: #00FFFF;
color: #000000; background-color: #FF9966;
}
</style>

расшифровка:

<style type="text/css"> #информация об авторе {цвет границ: #голубой;
цвет текста: #черный; цвет фона: #оранжевый;
}
</style>

Каждая строка из информации об авторе имеет свой код.
Ник
.pa-author {...}
Статус
.pa-title {...}
Регистрация
.pa-reg {...}
Cообщений
.pa-posts {...}
Аватар
.pa-avatar {...}
Репутация
.pa-reputation {...}
IP
.pa-ip {...}
Активен
.pa-online {...}
Именно за счет этих кодов осуществляется окантовка профиля. Подробнее об этом можно почитать здесь

6. "Задник" информации об авторе
В том случае, если мало полей профиля под аватаром, у вас может остаться "незакрашенное" пространство

#pun-main .post .container {...}

Пример:

<style type="text/css"> #pun-main .post .container {border-color: #00FFFF;
color: #000000; background-color: #FF9966;
}</style>

расшифровка:

<style type="text/css"> #"задник" профиля {цвет границ: #голубой;
цвет текста: #черный; цвет фона: #оранжевый;
}</style>

8. Контейнер сообщения

#pun-main .post-body {...}

Пример:

<style type="text/css"> #pun-main .post-body {border-color: #00FFFF;
color: #000000; background-color: #FFCCCC;
}
</style>

расшифровка:

<style type="text/css"> #посты {цвет границ: #голубой;
цвет текста: #черный; цвет фона: #светло-розовый;
}
</style>

7, 9. Содержимое (текст) постов

#pun-main .post-content{...}

Пример:

<style type="text/css"> #pun-main .post-content {
background-color: #FFFF33; color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css"> #содержимое поста {
цвет фона: #желтый; цвет текста: #голубой;
}
</style>

10. Контейнер кода

#pun-main .code-box {...}

Пример аналогичен предыдущим

11. Контейнер цитаты

#pun-main .quote-box {...}

Пример аналогичен предыдущим

12. Ссылки под сообщением (ЛС, Удалить, Редактировать, Пофиль и т.д.)

#pun-main .post-links li {...}

Пример аналогичен предыдущим

13. Строка с ссылками под сообщениями

#pun-main .post-links ul {...}

Пример аналогичен предыдущим

ФОРМА ОТВЕТА (быстрый и обычный ответ)

стиль этой части

Код:

<style type="text/css">
#pun-main .formal .container, #pun-main fieldset, #pun-main .fs-box {
background-color : #00FF00; color: red;
}
#pun-main .formsubmit input {
background-color : #FFCCCC;
}
#pun-main .formal textarea {background-color : #FFCCCC;}
</style>

Форма ответа также состоит из множества налагающихся друг на друга элементов.
Даже если вам не нужно все их раскрашивать в разные цвета, меняя внешний вид формы, вам придется написать одинаковые параметры для всех ее элементов.
1. Подписка на тему (Ссылка "Подписаться и отслеживать тему")

#pun-main .subscribelink {...}

Пример:

<style type="text/css">#pun-main .subscribelink {color: #FF0000;}</style>

расшифровка:

<style type="text/css">#подписка {цвет: #красный;}</style>

2. Контейнер всей формы ответа

#pun-main .formal .container {...}

3. Контейнер с надписью "напишите ваше сооб..."

#pun-main fieldset {...}

4. Кнопки BB-кодов

Для всей строчки кнопок:

#form-buttons table {...}

Для ячеек кнопок

#form-buttons td {...}

Для каждой кнопки в отдельности:

Шрифт: #button-font
Размер: #button-size
Жирный: #button-bold
Наклонный: #button-italic
Подчеркнутый: #button-underline
Зачеркнутый: #button-strike
Выравнивание по левому краю: #button-left
Выравнивание по центру: #button-center
Выравнивание по правому краю: #button-right
Ссылка: #button-link
E-mail: #button-email
Изображение: #button-image
Видео-ролик: #button-video
Скрытый текст: #button-hide
Цитата: #button-quote
Код: #button-code
Цвет: #button-color
Смайлик: #button-smile
Виртуальная клавиатура: #button-keyboard
Прикрепить изображения: #button-imageup

Примеры составления css-кодов для кнопок вы можете посмотреть тут: Кнопки для формы ответа

5. Контейнер, содержащий кнопки и форму для ввода содержимого поста

#pun-main .fs-box {...}

Пример для 2, 3 и 5:

<style type="text/css">#pun-main .formal .container, #pun-main fieldset, #pun-main .fs-box {
background-color: #00FF00; color: red;
}
</style>

расшифровка:

<style type="text/css">#все контейнеры формы ответа {
цвет фона: #зеленый; цвет текста: красный;
}
</style>

6. Кнопки "Отправить" и "Посмотреть"

#pun-main .formsubmit input {...}

Пример:

<style type="text/css">#pun-main .formsubmit input {
background-color: #FFCCCC;
}
</style>

расшифровка:

<style type="text/css">#кнопки под формой ответа {
цвет фона: #светло-розовый;
}
</style>

7. Поле для ввода содержимого поста

#pun-main .formal textarea {...}

Пример аналогичен предыдущим

ПРОФИЛЬ

Часть 1. СВОЙ ПРОФИЛЬ

стиль этой части

Код:

<style type="text/css">
#profilenav .container {background-color: #FFCC99;}
#profilenav, #profilenav h2, #profilenav h2 span, #profilenav ul  {
color : #FFFFFF; background-color : #FF0000;
}
#profilenav li {
background-color : #FF00FF;
}
#profilenav li а:link,  #profilenav li a:visited{
color : #FF00FF;
}
#profilenav li a:hover {color: #00FF00;}
#profilenav fieldset, #profilenav .fs-box {background-color: #00FFFF;}
</style>

1. Контейнер профиля

#profilenav .container {...}

Пример:

<style type="text/css">#profilenav .container {background-color: #FFCC99;}</style>

2. Навигационный контейнер профиля

#profilenav {...}

Пример см. ниже
3. Заголовок навигационного контейнера

#profilenav h2 {...}

Пример см. ниже
4. Текст заголовка навигационного контейнера

#profilenav h2 span {...}

Пример см. ниже
5. Контейнер списка ссылок

#profilenav ul {...}

Пример:

<style type="text/css">#profilenav, #profilenav h2, #profilenav h2 span, #profilenav ul  {
color: #FFFFFF; background-color: #FF0000;
}
</style>

расшифровка:

<style type="text/css">#навигационный контейнер профиля и его заголовок  {
цвет текста: #белый; цвет фона: #заленый;
}
</style>

6. Меню ссылок для навигации по профилю

#profilenav li {...}

Пример:

<style type="text/css">#profilenav li {
background-color: #FF00FF;
}
#profilenav li а {
color: #[color=green]FF00FF;
}
#[color=red]profilenav li a:hover {color: #00FF00;}
</style>

расшифровка:

<style type="text/css">#меню ссылок профиля {
цвет фона: #розовый;
}
#ссылки меню профиля {
цвет: #[color=green]розовый;
}
#[color=red]ссылки профиля при наведении курсора {цвет: #розовый;}
</style>

7. Контейнер поля с личными данными

#profilenav fieldset{...}

Пример см. ниже
8. Поле с вводом личных данных

#pun-main .fs-box {...}

Пример:

<style type="text/css">#profilenav fieldset, #profilenav .fs-box {background-color: #00FFFF;}</style>

расшифровка:

<style type="text/css">#контейнер поля и само поле для личных данных {цвет фона: #голубой;}</style>

Часть 2.СТРАНИЦА УПРАВЛЕНИЯ ПРОФИЛЕМ.

стиль этой части

Код:

<style type="text/css">
#pun-main .fs-box .submitfield input {
background-color : #00FFFF;
}
#setmods dl {
color : red; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

1. Кнопки

#pun-main .fs-box .submitfield input {...}

Пример:

<style type="text/css">#pun-main .fs-box .submitfield input {
background-color: #00FFFF;
}
</style>

расшифровка:

<style type="text/css">#кнопки {
цвет фона: #голубой;
}
</style>

2. Названия модерируемых форумов

#setmods dl {...}

Пример:

<style type="text/css"> #setmods dl {
color: red; background-image: url(ссылка на картинку);
}
</style>

расшифровка:

<style type="text/css"> #названия форумов {
цвет текста: красный; фоновая картинка: url(ссылка на картинку);
}
</style>

Часть 3. СТРАНИЦА ЧУЖОГО ПРОФИЛЯ.

1. Контейнер профиля

#viewprofile .container {...}

Пример см. ниже
2. Текст заголовка профиля

#viewprofile h2 span {...}

Пример см. ниже
3. Заголовок профиля

#viewprofile h2 {...}

Пример см. ниже
4. Контейнер данных профиля

#viewprofile ul {...}

Пример:

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

расшифровка:

<style type="text/css"> #контейнер профиля и его заголовок {
цвет текста: #красный; цвет фона: #зеленый;
}
</style>

5. Название поля

#viewprofile li span {...}

Пример:

<style type="text/css">#viewprofile li span {
color: red; background-color: #00FF00; background-image: url(ссылка на картинку);
}
</style>

расшифровка:

<style type="text/css">#название поля {
цвет текста: красный; цвет фона: #зеленый; фоновая картинка: url(ссылка на картинку);
}
</style>

6. Личные данные

#viewprofile li strong {...}

Пример:

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

расшифровка:

<style type="text/css">#личные данные {
цвет текста: #белый; цвет фона: #красный;
}
</style>

СТРАНИЦА ЛИЧНЫХ СООБЩЕНИЙ наследует все параметры страницы профиля.

СТРАНИЦА СПИСКА ПОЛЬЗОВАТЕЛЕЙ

стиль этой части

Код:

<style type="text/css">
#pun-userlist .fs-box  {
color : #FFFFFF; background-color : #FF0000;
}
#pun-userlist .usertable .container {
background-color : #FF00FF;
}
</style>

1. Контейнер списка

#pun-userlist .usertable table {...}

Пример см. ниже
2. Контейнер сортировки

#pun-userlist fieldset {...}

Пример см. ниже
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>

расшифровка:

<style type="text/css">#список и сортировка  {
цвет текста: #белый; цвет фона: #красный;
}
</style>

4. Контейнер таблицы списка участников (поле вокруг списка)

#pun-userlist .usertable .container {...}

Пример:

<style type="text/css">
#pun-userlist .usertable .container {
background-color: #FF00FF;
}
</style>

расшифровка:

<style type="text/css">
#контейнер списка участников {
цвет фона: #розовый;
}
</style>