Теперь немножечко каснемся пошагового разбора элементов дизайна.
Структура адаптирована, так что ползать по ней, изменяя что-то, стоит только в крайнем случае, и если вы считаете себя неплохо разбирающимся в этом. Но я думаю, что если бы вы разбирались, то не стали бы читать ту чушь, которую я написала.
шаг 1. ширина форума
Изменяем структуру под свой дизайн только в одном случае: если нам нужно настроить ширину форума. И всё. Для этого мы заходим в /* A5.1 */, там даже подписано, что тут изменяем ширину форума, а не где-то еще.

Вот там, где выделено красным, изменяем ширину. Именно такой ширины должны быть ваша шапка, если она не широкоформатная, и тело форума.
шаг 2. цвет текста на всем форуме
Теперь мы уже заходим в цвета, и самый первый пункт отвечает именно за это /* CS1.1 Цвет текста на форуме */. Меняем цвет, на тот который вам нужен здесь:

Примечание 1: Запомните, что color - это цвет текста, а background-color - это цвет фона. И не путайте никогда.
шаг 3. фон форума
Следующий пункт называется /* CS1.2 Боди или фон форума */ и отвечает он, вы уже догадались, именно за фон.

background-color: #ffffff - берите капелькой в фотошопе с вашего фона, если он картинкой, цвет и вставляйте сюда. Не красиво получится, если пока будут грузится картинки, вместо, например, кожи будет выскакивать красный или синий цвет.
background-image: url(адрес) - ну тут, я думаю, все понятно. Вставляем адрес заготовленной картинки и сохраняем. Если вы хотите сделать этот элемент просто фоном, то ничего в адрес вставлять, конечно, не нужно.
Примечание 2: Помните, что фон форума, если вы хотите его сделать картинкой, как, например, узор, дерево, кожа и другое, должны быть бесшовными. Пример.
Примечание 3: Большие элементы дизайна, такие как фон, шапка, футер следует сохранять в формате .jpeg. Вы не проиграете в качестве! Зато выиграете в весе изображений, а следовательно и в быстроте загрузки. А это один из важнейших требований к дизайну.
Если вам когда-нибудь понадобится сделать полноформатную шапку, то вы тоже будете работать именно с боди, но об этом я расскажу в другом уроке.
шаг 4. шапка форума
Следующий элемент в установленном коде - /* CS1.3 Шапка */. Шапка чаще всего соответствует ширине форума (#pun) - см. шаг 1. 

background-image : url(адрес); - адрес шапки
background-repeat : no-repeat; - шапка не дублируется ни по горизонтали, ни по вертикали, то есть изображается только один раз, а не так как бесшовный фон.
border: none; - нет рамок
height: 408px; - высота шапки
width: 812px; - ширина шапки
Примечание 4: Если же вам нужна широкая шапка и, плюс к этом, бесшовный фон можно попробовать прописать шапку большего размера. Тогда в ширине нужно указывать именно тот размер и двигать шапку с помощью элемента margin-left: -200px, который следует прописать до закрывающейся фигурной скобки, сохраняя разделяющие точки с запятыми, но из-за этого может возникнуть полоса прокрутки, так что будьте осторожны.
шаг 5. тело форума
Далее у нас идет /* CS1.4 Пан или "тело" форума */.

Если вам не нужна здесь картинка, то просто поставьте код цвета background-color: #ffffff. Если нужна, то поставьте адрес заготовленной картинки.
Примечание 5: Так же как и фон, пан должен быть бесшовным.
шаг 6. футер
Футером называют окончание форума в самом низу, где чаще всего указывают копирайт мастера, который сделал дизайн.

Адрес устанавливаем на нужное нам место, значения высоты и ширины подстраиваем под свое, но, стоит запомнить, что значение у футера дается чуть меньше, чем есть на картинке.
margin - элемент, который отвечает за отступы. Чтобы не прописывать margin-top, margin-right, margin-left, margin-bottom, здесь все прописано в одном. Эти значения тоже двигайте и настраивайте под себя.
Примечание 6: Если вам ну никак не удается настроить футер, не отчаивайтесь - поставьте картинку/баннерную кнопку в хтмл низ и сам футер немного опустится, закрыв отступ.
шаг 7. ссылки верхней навигации
Следующий элемент отвечает за два ряда ссылок, располагающихся вверху форума. navlinks - это форум, пользователи, поиск, профиль и так далее, а ulinks - это новые сообщения, активные темы, мои сообщения и так далее. Можно удалить этот пункт вообще, если вам не нужно двигать их с форума. Если нужно, то изменяйте значения  top и left до того, пока не встанет как нужно вам в обоих случаях.

Сейчас, как известно, с моей легкой руки *_*, на майбе вошли в моду, так называемые ленты, на которых дизайнеры располагают ссылки навигации. Есть два способа настроить их.
1 способ:
background-image: url(); - сюда вставляете картинку ленты и все, радуемся.
Чем плох этот способ? Всем хорош, только если вы захотите на ленту поставить еще и вторую строчку ссылок "новые сообщения и тд", то это сделать нельзя.
2 способ:
идете в настройки, в хтмл вверх. вставляете это:

<table border=0 width="989px" height="94px" style="text-align: justify; position: absolute; margin-left: -92px; top: -50px; " border: none><tr align=center><td><img src="адрес"></td></tr></table>

width="989px" height="94px" - ширина и высота полоски,
margin-left: -92px; top: -50px; - отступы слева и сверху соответственно
адрес - это адрес вашей ленты, естественно заменить
Тогда в CS1.6 не нужно прописывать картинку, там придется только лишь воспользоваться top и left, чтобы подвинуть ссылки на ленту.
шаг 8. все ссылки на форуме
Весь второй раздел цветов посвящен ссылкам. /* CS2.1 */ и /* CS2.2 */ - ссылки на всем форуме, /* CS2.3 */ и /* CS2.4 */ - ссылки верхней навигации, с которыми мы начинали работу в шаге 7. Причем /* CS2.1 */ и /* CS2.3 */ - это ссылки без наведения на них, /* CS2.2 */ и /* CS2.4 */ - при наведение. Тут, как обычно, все дело касается вашей безграничной фантазии. Хотите фон под ссылки? Прописываем background-color. Так же можно поэкспериментировать с текстом.
Например, text–decoration – оформление текста. Сейчас он стоит на none, но может принимать значения:
underline – подчеркнутый снизу текст
overline – подчеркнутый сверху текст
line–through – зачеркнутый текст
blink – мигающий текст
Еще есть элемент text–transform – управляет размером символов и может принимать следующие значения:
none – обычный текст
capitalize – каждое слово начинается с заглавной буквы.
uppercase – только большие буквы
lowercase – маленькие буквы
Вообще о форматирование любого текста я постараюсь написать как-нибудь целый урок, посвященный этому, а пока поедем дальше.
шаг 9. иконки
/* CS3 Иконки старых, новых, важных, закрытых тем */ отвечает, как не трудно догадаться за иконки тем. Какие тут могут быть настройки? Ну, во-первых, это расположение. Оно изменяется здесь:

float: right;

И может принимать значение еще и left. Он изменяется один раз. Во-вторых, это размеры ширины и высоты, которые нужно изменить на четырех элементах подряд. Конечно, в третьих, это адреса самих картинок. Если что, там все подписано, и сориентироваться не должно составить труда.
шаг 10. категории
Тут все так же предельно просто.

#pun-category1.category h2 {
background: url(адрес);
height: 80px;
width: 200px;
font-size:0 !important;
margin-left: 320px;}

#pun-category1.category h2 { - выделенная цифра означает номер категории по порядку.
height: 80px; width: 200px; - высота и ширина картинки
font-size:0 !important; - отсутствие текста
margin-left: 320px; - это отступ слева, который следует двигать и настраивать.
Примечание 7: Копируете весь пункт столько раз, сколько у вас категорий, изменяя лишь номер по порядку.
шаг 11. статистика
Самым первым здесь следует, если конечно вам это нужно, изменить маленькую картинку у статистике, на которой часто пишут 24. Здесь ничего не трогайте, там все настроено, только поставьте адрес.
Далее картинкой можно заменить слово "статистика", если особенно вы заменили категории. Тут кроме адреса следует еще сменить height: 80px; width: 200px; margin-left: 320px; то есть высоту картинки, ширину картинки и отступ слева.
шаг 12. цитаты и коды
Так как мы уже немного понимаем, то мы запросто можем изменить цвет на другой. Можно вообще использовать картинку, для этого прописываем адрес. Картинка может быть любой, не важно. Но если вы используете картинку с рамкой или еще какую нибудь, которая не должна множится так как вам не нравится, например так, важно дописать ширину - width: 535px. Не забываем про знаки препинания и все получится. Если не хотите картинку, можно ее убрать и сделать рамку в обводку или просто рамку в пиксель, как вам нравится.
Для этого идем в структуру (то есть первое окошко), находим пункт /* B1.8 */. Кто знает английский или цсс, тот понимает, как переводится слово border (рамка). Кроме этого мы ничего там изменять не будем. border-style сейчас стоит на none, но можно прописать и другие стили рамок: solid, double, groove, ridge, inset, outset, dotted, dashed. Их вид:

border-width: 1px - это ширина рамки в один пиксель. Единицу можно изменять.
Дальше в коде идут закругленные края кода и цитаты. Если вам не нравится - это можно убрать.
шаг 13. форма ответа
В части /* CS5.4 Область для ввода текста в форме ответа и админке */ все так же просто.

.punbb textarea, .punbb select, .punbb input {
background-color: #ffffff;
color: #000000}

Это область, в которой пишут сообщения до отправки. Она же есть в админке. Изменяем цвет фона и цвет текста. Помним же где какой?
шаг 14. верхний баннер
Изменяем значения left и top, то есть отступы слева и сверху.
шаг 15. что делать если форум вылазит за рамку?
По просьбам трудящихся добавлю пункт, из-за отсутствия которого у многих начинается паника. У вас такое случилось? Успокойтесь. Вы все сделали правильно! Дышите глубже.
Чтобы рамка была за пределами форума, а текст не заезжал, я делаю так:

/* A5.1 */
#pun {
  margin: auto;
  width : 800px;
  position: relative;}

/* A5.2 */
.punbb {
  float: auto;
  height: auto;
  width: 96%;
  padding-left: 10px;
  }

то что нужно будет поменять/настроить:
красным - ширина форума, синим - ширина тела по отношению к форуму в процентах. но если оставить так, то отступ появится лишь по умолчанию справа, поэтому добавлено то, что выделено зеленым. это ширина отступа справа. НО! есть одно но: нужно на эту же ширину отступа двигать потом шапку и футер, добавив margin-left: -10px;
Все остальное, что есть в кодах - не трогаем)

Хотела прописать акции, в итоге просидела весь вечер с шаблоном анкеты