Итак эта инструкция поэтапного строительства дизайна.
Вначале мы возьмем стандартный стиль оформления. Берите самый простой для начала.
Начнем с того, что все элементы дизайна ставятся в хтмл-верх!
чтобы добавить в любое (почти) место картинку вставляйте в код такой тег:
background-image : url(ссылка);

Этот код заливает полностью форум определенным цветом:

<style type="text/css">
#pun {background-color:blue;}
</style>

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

<style type="text/css">
#pun {background-color:blue;background-image : url(ссылка);}
</style>

border-color: - Это цвет рамок на форуме
color: - цвет текста
pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited - это цвета ссылок

Начнем с того что сделаем форум прозрачным, для этого входим в администрирование, настройки и вставляем этот код в хтмл верх:

<style type="text/css">
.punbb .main .container,
.punbb td.tc3,
.punbb .section .container,punbb td.tc2,.punbb td.tcr,#pun .tc2   {background-color: transparent; }
</style>

Отлично теперь можно начать делать верхушку форума, а именно Шапку.Некоторые предпочитают обходится и без нее, но мы разъесняем все в подробностях!

<style type="text/css">
#pun-title table {background-image : url(ссылка на шапку);
height : 132px;
}
</style>

Далее приступим к тому что сделаем себе другой задний фон:

<style type="text/css">
HTML, BODY {background-image: url("ссылка")!important; background-repeat: repeat !important;}
</style>

Если вы хотите сделать себе стоячий задний фон, то код будет такой:

<style type="text/css">
HTML, BODY {background-image: url("ссыль"); background-attachment: fixed;}
</style>

Итак все сделали, теперь подгоним форум по своему желанию, то есть сделаем его меньше либо наоборот шире 83 меняйте на свое.

<style type="text/css">
#pun {
width : 83%;
}
</style>

Теперь если кто-то хочет то может с помощью этого скрипта изменить размер текста на всем форуме, меняет на свое подходящее число

<style type="text/css">
body {
font-size: 150%;
}
</style>

С помощью этого кода можно изменить стиль шрифта на форуме, вместо Century Gothic пишем свой стиль шрифта.

<style>
BODY A{font-family : "Century Gothic";}
</style>

Поменять на главной 1,2,3,4 столбцы форума), а именно залить их своим цветом

<style type="text/css">
#pun  .tcl { color: цвет текста;
background-color : цвет фона;}
#pun  .tc2 { color: цвет текста;
background-color : цвет фона;}
#pun  .tc3 { color: цвет текста;
background-color : цвет фона;}
#pun  .tcr { color: цвет текста;
background-color : цвет фона;}
</style>

С помощью этого кода вы сможете вставить свою картинку в название категорий на главной страничке:

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

Для наибольшей красоты поставим свою картинку и в строке Форум - Тем - Сообщений - Последнее сообщение

<style type="text/css"> #pun th {
color: red; background-color : #FF00FF; background-image : url(ссыль);
}
</style>

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

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


Сделаем рамку между столбцами)

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

Подвинем слегка верхнюю рекламу. Внимание если вы удалите рекламу, ваш форум заблокируют или же удалят! Рекламу можно только слегка отодвинуть в сторону.(Она должна находиться в обозрении шапки)
меняйте эти цифры на свои:
left: 510px - в лево 510 пикселей (510 и 190 меняйте по своему усмотрению)
top: 190px - вниз 190 пикселей
(510 и 190 меняйте по своему усмотрению)

<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 510px; top: 190px
}
</style>

Этот код сделает картинку около статистики.

<style type="text/css">
#pun-stats ul.container {
background-image:url(ссыль); padding-left:80px; height : 192px; background-repeat: no-repeat}
</style>

Нижние цветовыделение(Администратор, модератор и т.п. которые рассполагаются снизу!)

<script type="text/javascript">
var text="<center><font color=Red> Администратор </font> | <font color=Blue> Координатор </font>  |  <font color=Green> Модератор </font></center>"
pa=document.getElementById("pun-stats")
pa.style.position = "relative"
pa.innerHTML = "<div style=\"position:absolute; z-index:2; center: 10px; top: 40px; width: 100%;\">"+text+"</div>"+ pa.innerHTML
</script>

Надеюсь эта инструкция пошла вам на пользу! Теперь вы знаете порядок оформления форума.