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

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