http://i28.fastpic.ru/big/2011/0920/de/ … 732fde.png

Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разных "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.

Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов.
Вставлять данные коды необходимо в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль

Если речь идет о css кодах, то прежде, чем начать прописывать настройки для каждого отдельного элемента форума необходимо будет проставить теги стиля, между которыми можно будет расположить css для отдельных элементов.
Код:

    <style type="text/css">
    тут будет код css
    </style>

Вписав в HTML-верх эти два тега, между ними можно будет вставлять все необходимые для нового дизайна css коды.
Принципиальное правило которое нужно учитывать: размещайте их всегда МЕЖДУ тегами <style type="text/css"> и </style>

Общие понятия о css
Расшифровка css-кодов и схема их написания.
Что представляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.

Селектор (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
Параметр - это свойство элемента. мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)
Аргумент - это значение свойства. мы указываем, какие именно изменения произойдут с выбранным свойством. (например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.)

Стандартный css код выглядит следующим образом:

    #селектор {параметр: аргумент;}

параметров у селектора может быть много, но нам не нужно каждый раз селектор, чтобы добавить параметры. делается это так:

    #селектор {параметр: аргумент;
    параметр: аргумент;
    параметр: аргумент;
    параметр: аргумент;
    параметр: аргумент;
    ....
    }

Вот пример того, как выглядит код для меню навигации

    #pun-navlinks {backgroud-color: #FF0000;}

    #pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}

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

Например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок:

    #pun-navlinks, #pun-ulinks {background-color: #FF0000; width: 400px; height: 200px;}

Параметры и значения CSS
О том, как производить изменения в выбранных селекторах.

Цвета в CSS
для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
Веб-названия для различных цветов можно посмотреть тут: Таблица HTML цветов (обновленная)
Например, вот так будет выглядит код для задания цвета:

    #селектор {параметр: #FF0000;}

Размеры в CSS
для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения

em - высота шрифта (текущий кегль)
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;

ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ

Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.

Например, так мы задаем ширину и высоту элемента

    #селектор {height: 200px; width: 70%;}

Параметры CSS

ФОН

background-color
Цвет фона элемента. Значением может быть веб-название цвета.

background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.

background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки

background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeat-x - размножается по горизонтлаи
repeat-y - размножанется по вертикали
repeat-xy - размножается в обоих направлениях.

background-position
Расположение фоновой картинки на странице
Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)

Пример:

    #селектор {
    background-color: #FF0000;
    background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg");
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-position: top left;
    }

расшифровать это можно так:

    #элемент форума {
    цвет фона: #красный; //(если картинка меньше, чем элемент форума, цвет будет такой)
    фоновая картинка: ссылка на картинку;
    прокрутка фоновой картинки: не прокручивается, фон зафиксировали;
    Повторение фона: Повторить по вертикали;
    позиция фона: начинается сверху слева;
    }

Границы (рамки)

border
Все параметры рамки, например, толщина, цвет и т.д.

border-color
Цвет рамки

border-width
Толщина рамки

border-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект впадающей рамки
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона

border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки

Пример №1:

    #селектор {border: #FF0000 dashed 2px;}

Все границы элемента красные, пунктиром и шириной в 2 пикселя

Пример №2:

    #селектор {border-color: #FF0000;
    border-width: 2px;
    border-style: none dashed none double;
    }

Все границы элемента красного цвета, шириной в 2 пикселя, левая граница пунктиром, а нижняя двойной линией

Пример №3

    #селектор {border-top: #FF0000 dashed 0px;
    border-bottom: #FF0000 dashed 0px;
    border-left: #FF0000 dashed 2px;
    border-right: #FF0000 dashed 2px;
    }

Справа и слева границы есть - они красные, пунктиром и толщиной 2 пикселя, а сверху и снизу их нет.

ШРИФТ И ТЕКСТ

color
Цвет шрифта в элементе

font-size
Размер шрифта.
Размер может быть установлен несколькими способами. Допускается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
Или можно использовать константы (стандартные размеры): xx-small, x-small, small, medium, large, x-large, xx-large.

font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсив

font-weight
Толщина начертания
Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

font-family
Семейство шрифта
Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Как это работает: Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

font
Все вышеперечисленные параметры шрифта вместе

Пример №1:

    #селектор {font: #FF0000 small bold;
    }

Красный маленький жирный шрифт.

Пример №2:

    #селектор {font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-style: italic;
    font-size: small;
    color: #FF0000;
    }

Шрифт Georgia (если нет такого на компе пользователя, отобразится Times New Roman, если не будет таймс нью роман, отобразится Times, если нет всех вышеупомянутых, отобразится serif).

text-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру

Пример:

    #селектор {text-align: center;
    }

text-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Пример:

    #селектор {text-decoration: underline;
    }

ССЫЛКИ

Если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву "a" (латинскую!!!).
Пример:

    #селектор a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении.
a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой
Пример:

    <style type="text/css">
    #селектор a:link, #селектор a:visited {color: green;}
    #селектор a:hover {color: red;}
    </style>

Этот код сделает ссылки в выбранном месте до и после посещения зелеными, а при наведении - красными.

ВАЖНО! Забегая вперед, следует отметить, что если вы не хотите назначать разное оформление ссылок для каждого из возможных селекторов форума, то следует пользоваться универсальным кодом:
цвет все ссылок в обычном состоянии:

    .punbb a:link, .punbb a:visited {color: ...;}

цвет всех ссылок при наведении:

    .punbb a:hover {color: ...;}

ОТОБРАЖЕНИЕ ЭЛЕМЕНТА

float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none - отображает объект вставленным в страницу
Пример (отображение слева):

    #селектор {float: left;
    }

display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемнт как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.
Пример (не отображать):

    #селектор {display: none;
    }

vertical-align
выравнивание элемента по вертикали
Значения:
top - по верхнему краю
bottom - по нижнему
middle - посередине
Пример (отображение по верхнему краю):

    #селектор {vertical-align: top;
    }

height
высота элемента
width
ширина элемента
См. пункт "Размеры в CSS".
Пример (высота - 20 пикселей, ширина - 400 пикселей):

    #селектор {
    height: 20px;
    width: 400px;
    }

ОТСТУПЫ

padding и margin
Это два на первый взгляд похожик параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
padding - все стороны отбивки сразу.
Значения - См. пункт "Размеры в CSS".
Пример:

    #селектор {
    padding-top: 20px;
    }

margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отсуп
margin-right - правый отсуп
margin - все стороны отступа сразу.
Значения - См. пункт "Размеры в CSS".
ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
Пример:

    #селектор {
    margin-top: -20px;
    }

Теги: css, дизайн, faq, урок,Дизайн поддержка

Подпись автора

    С уважением,
    Главный Администратор ForumD.ru,
    Маковецкая Герда
    gerdm@ya.ru
    RaidCall ID:1211377

+3

    Профиль Admin
    ЛС Admin
    E-mail Admin
    Удалить Сообщение 1
    Редактировать Сообщение 1
    Цитировать Сообщение 1

208.12.2010 06:46:11

    Автор: Admin
    Главный Администратор
    Аватар
    Должность:
    Несгибаемый диктатор
    Откуда: Москва
    Зарегистрирован: 18.02.2009
    Сообщений: 5235
    Уважение: + +922 -
    Позитив: +513
    Пол: Женский
    Возраст: 21 [1990-05-17]
    Призовые баллы: 1000
    Награды и подарки:
    8 наград, 12 подарков
    Последний визит:
    Сегодня 16:00:02

CSS селекторы элементов форума
О том, как называются селекторы вашего форума и примеры их изменения.

ГЛАВНАЯ СТРАНИЦА
Часть 1
https://forumupload.ru/uploads/0007/e3/f7/46121-1.jpg

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
https://forumupload.ru/uploads/0007/e3/f7/46121-2.jpg

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>

https://forumupload.ru/uploads/0007/e3/f7/46228-3.png

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

    #pun-main td {...}

Пример:

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

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

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

Часть 3
https://forumupload.ru/uploads/0007/e3/f7/46121-3.jpg

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 {...}

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

СТРАНИЦА СПИСКА ТЕМ
https://forumupload.ru/uploads/0007/e3/f7/46121-4.jpg

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

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>

СТРАНИЦА ТЕМЫ
https://forumupload.ru/uploads/0007/e3/f7/46121-5.jpg

Таблица с текстами и авторами сообщений состоит из множества второстепенных элементов. Вряд ли может понадобиться их индивидуальное оформление, как на скрине, однако, если вы радикально меняете стиль, их все придется обозначить в коде с одинаковыми параметрами, чтобы дизайн оставался в одном стиле. Напомню, что когда мы хотим придать одинаковый вид нескольким элементам, т.е. приписать им одинаковые параметры, их селекторы (названия), мы пишем через запятую перед фигурной скобкой.
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 {...}

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

ФОРМА ОТВЕТА (быстрый и обычный ответ)
https://forumupload.ru/uploads/0007/e3/f7/46238-1.png

Форма ответа также состоит из множества налагающихся друг на друга элементов.
Даже если вам не нужно все их раскрашивать в разные цвета, меняя внешний вид формы, вам придется написать одинаковые параметры для всех ее элементов.
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 {...}

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

ПРОФИЛЬ
https://forumupload.ru/uploads/0007/e3/f7/46122-1.jpg
СВОЙ ПРОФИЛЬ

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>

СТРАНИЦА УПРАВЛЕНИЯ ПРОФИЛЕМ

.....

1

00

////

0

/

0