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

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

#element1 {parameter: argument;}

#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

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

Код:
#pun-navlinks {backgroud-color: #FF0000;}

где #pun-navlinks - название элемента, background-color - свойство, ЦВЕТ ФОНА в даном случае, а #FF0000 - само название цвета.

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

Пример:

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

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

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

Таким образом, например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок.
Далее следует список наиболее часто используемых ПАРАМЕТРОВ. Вы не обязаны прописывать их все для каждого элемента, а только те, которые собрались менять.

CSS селкторы для всех элементов форума.

Главная страница - верх.

Скрин 1

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

Код:
<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("https://forumstatic.ru/files/0013/59/fe/47953.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
#pun {background-color: transparent; width: 76%;}
#pun-title table {background-image : url(https://forumstatic.ru/files/0013/59/fe/47953.jpg);
height : 132px;
}
#pun-title .title-logo {background-image : url(https://forumstatic.ru/files/0013/59/fe/47953.jpg);
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(https://forumstatic.ru/files/0013/59/fe/47953.jpg);
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. Основной фон (Скрин 1, элемент 1)

Код:
HTML, BODY {...}

Пример:

Код:
<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("https://forumstatic.ru/files/0013/59/fe/47953.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
</style>

Если не отображается фоновая картинка делаете так пример(ссылка Ваша на картинку, спасибо Admin):

Код:
<style type="text/css">
HTML, BODY {background-image: url("https://forumstatic.ru/files/0013/59/fe/47953.jpg")!important; background-repeat: repeat !important;}
</style>

2. Фон под таблицами (Скрин 1, элемент 2)

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

Код:
#pun {...}

Пример:

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

3. Шапка форума (Скрин 1, элемент3)

Шапка - это таблица, на которой расположены логотип форума и баннер. Баннер мы не под каким видом трогать не можем. Мы можем оформить таблицу под логотип и расширить ее.

Код:
#pun-title table {...}

Пример:

Код:
<style type="text/css">
#pun-title table {background-image : url(https://forumstatic.ru/files/0013/59/fe/47953.jpg);
height : 132px;
}
</style>

4. Логотип форума (Скрин 1, элемент4)

Код:
#pun-title .title-logo {...}

Пример:

Код:
<style type="text/css">
#pun-title .title-logo {background-image : url(https://forumstatic.ru/files/0013/59/fe/47953.jpg);
background-repeat : no-repeat; height : 132px;
}
</style>

Если из под логотипа выглядывает название форума текстом введите:

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

5. Меню навигации (Скрин 1, элемент 5)

Код:
#pun-navlinks .container {...}

Пример:

Код:
<style type="text/css">
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(https://forumstatic.ru/files/0013/59/fe/47953.jpg);
font-weight: bold;
text-align: center;
}
</style>

ВАЖНО: если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву a . Это изменитт вид ссылки во всех состояниях.

В нашем случае это будет выглядеть так:

Код:
#pun-navlinks a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении, добавляя вместо a:

a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой

Пример:

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

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

Так как ссылки в меню навигации специфичны, полный код для них будет выглядеть так:

Код:
<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#navextra1 a  {...}

- Участники

Код:
li#navuserlist a span {...}

- Поиск

Код:
li#navsearch a span {...}

- Профиль

Код:
li#navprofile a span {...}

- Сообщения

Код:
li#navpm a span {...}

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

Код:
li#navadmin a span {...}

- Выход

Код:
li#navlogout a span {...}

6. Пользовательские ссылки (Скрин 1, элемент 6)

Код:
#pun-ulinks .container {...}

Пример:

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

Ссылки:

Код:
<style type="text/css">
#pun-ulinks a {
color : #00FFFF
}
</style>

7. Заголовок объявления (Скрин 1, элемент 7)

Код:
#pun-announcement h2 {...}

Пример:

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

8. Объявление (Скрин 1, элемент 8)

Код:
#pun-announcement .container {...}

9. Окно статуса (Скрин 1, элемент 9)

Код:
#pun-status .container {...}

Пример:

Код:
<style type="text/css">
#pun-status .container { color : red;
background-color : #9900CC;
}
</style>

10. Название форума (Скрин 1, элемент 10)

Код:
#pun-crumbs1 .container {
...}

Пример:

Код:

<style type="text/css">
#pun-crumbs2 .container {
color : red; background-color : #00FFFF !important;
}
</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. Окно статистики (Cкрин 3, элемент1)

Код:
#pun-stats .container {...}

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

Код:
#pun-stats .statscon {...}

Пример:

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

2. Средняя часть статистики (Cкрин 3, элемент2)

Элементы 2 и 3 по умолчанию принимают те же параметры внешнего вида, что и элемент 1. Вряд ли возникнет необходимость оформлять их в отличном цвете, как на скрине, однако их коды могут понадобиться для выравнивания элементов внутри них и оформления текста, а также для того, чтобы при желании скрыть их.

Код:
li#onlinelist {...}

Пример:

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

3. Нижняя часть статистики(Cкрин 3, элемент3)

Код:
li#onlinelist div {...}

Пример:

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

4. Название форума внизу.(Cкрин 3, элемент4)

Код:
#pun-crumbs2 p.container {...}

Пример:

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

5. Строка Powered by (Cкрин 3, элемент5)

Код:
#pun-about p.container {...}

6. HTML низ (Cкрин 3, элемент6)

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

Код:
#html-footer .container {...}

Пример:

Код:
<style type="text/css">#html-footer .container {background-color: #00FF00; color: #FF0000;}</style>

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

Скрин 5

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

Код:
<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. (Скрин 5, элемент 1)

Код:
#pun-main .post h3 {...}

Пример:

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

2. (Скрин 5, элемент 2)

Код:
#pun-main .post h3 span {...}

3. Дата сообщения (Скрин 5, элемент 3)

Код:
#pun-main .post .permalink {...}

4. Номер сообщения (Скрин 5, элемент 4)

Код:
#pun-main .post h3 strong {...}

Пример:

Код:
<style type="text/css">#pun-main .post h3 span, #pun-main .post .permalink, #pun-main .post h3 strong  { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC;
}
</style>

5. Информация об авторе (Скрин 5, элемент 5)

Код:
#pun-main .post-author ul {...}

Пример:

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

Каждая строка об авторе имеет свой специфический код. На тот члучай, если вам захочется скрыть или переоформить некоторые элементы - вот их полный список.

Ник

Код:
.pa-author {...}

Статус

Код:
.pa-title {...}

Регистрация

Код:
.pa-reg {...}

Cообщений

Код:
.pa-posts {...}

Аватар

Код:
.pa-avatar {...}

Репутация

Код:
.pa-reputation {...}

IP

Код:
.pa-ip {...}

Активен

Код:
.pa-online {...}

6. (Скрин 5, элемент 6)

В том случае, если у вас нехватает каки-то полей профиля под аватаром, у вас может остаться незакрашенное пространство

Код:
#pun-main .post .container {...}

Пример:

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

8. Ячейка для текста сообщения (Скрин 5, элемент 8)

Код:
#pun-main .post-body {...}

Пример:

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

7, 9. Текст сообщения и фон под ним(Скрин 5, элементы 7, 9)

Код:
#pun-main .post-content{...}

Пример:

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

10. Блок кода. (Скрин 5, элемент 10)

Код:
#pun-main .quote-box {...}

11. Блок цитаты (Скрин 5, элемент 11)

Код:
#pun-main .code-box {...}

Пример:

Код:
<style type="text/css"> #pun-main .quote-box, #pun-main .code-box {color: #00FF00; background-color: #FFFFFF;}</style>

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

Код:
#pun-main .post-links li {...}

13. Полоса с ссылками под сообщениями (Скрин 5, элемент 13)

Код:
#pun-main .post-links ul {...}

Пример:

Код:
<style type="text/css"> #pun-main .post-links li,  #pun-main .post-links ul {
background-color : #FFCCFF;
}
</style>

Страница своего профиля

Скрин 7

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

Код:
<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. Окно с профилем (Скрин 7, элемент 1)

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

Пример:

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

2. (Скрин 7, элемент 2)

Код:
#profilenav {...}

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

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

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

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

5. (Скрин 7, элемент 5)

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

Пример:

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

6.Меню ссылок для навигации по профилю (Скрин 7, элемент 6)

Код:
#profilenav li {...}

Пример:

Код:
<style type="text/css">#profilenav li {
background-color : #FF00FF;
}
</style>

Ссылки для навигации по пофилю

Код:
#profilenav li а {...}

Пример:

Код:
<style type="text/css">#profilenav li а {
color : #FF00FF;
}
</style>

Или:

Код:
<style type="text/css">#profilenav li а:link,  #profilenav li a:visited{
color : #FF00FF;
}
</style>

Код:
#profilenav li a:hover {color: #00FF00;}

7. Поле с личными данными (Скрин 7, элемент 7)

Код:
#profilenav fieldset{...}

8. (Скрин 7, элемент 8)

Код:
#pun-main .fs-box {...}

Пример:

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

Страница чужого профиля

Скрин 9

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 (https://forumstatic.ru/files/0013/59/fe/47953.jpg);
}
</style>

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

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

Пример:

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

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

Скрин 10

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

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