Здравствуйте! Это мой первый урок, так что тапками не кидать. Все тут предельно просто, если вы думаете что все запутано, прокручивая колесико мышки, то вы сильно ошибаетесь. Делала урок никуда не заглядывая, только копировала из своего дизайна некоторые коды. Так, что урок полностью принадлежит мне- by .louie.
Удачи в CSS!

Урок №1
Для начала генерируем тут стиль http://mybb.ru/generator/
Потом вставляем получившийся код в  Стиль-Цвета style_cs.css. В вопросе "Хотите ли Вы использовать собственный стиль оформления?" Ставим "Да"
Сохраняем
Урок №2
Нужно убрать внешние рамки:
Во втором окошке, после

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #00000 #00000 #00000 #00000;

Вставляем

Код:
; border-style:none !important;

чтобы выглядело все вот так

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #00000 #00000 #00000 #00000; border-style:none !important;
  }

Внешних рамок нету.
Урок №3
Нужно убрать внешние рамки, для этого мы вот, что делаем:
После

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #97040A;

Ставим

Код:
; border-style:none !important;

Вот что должно выйти:

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #00000; border-style:none !important;
  }

Все до этого момента:

/* CS3 Links
-------------------------------------------------------------*/

Урок №4
Теперь нам надо найти этот элемент:

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {

После этого вставляем:

Код:
 background-color: transparent;

Вот что выходит:

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
background-color: transparent;
  color: #000000;
  }

Дальше место:

background-color: #00000;

Вставляем:

Код:
background-color: transparent;

Все до момента:

/* CS2 Border colours
-------------------------------------------------------------*/


Урок №5
Теперь нам надо уменьшить форум, для этого нам понадобится этот код.

/* A5.1 */
#pun {
  margin: 0px auto 30px auto;
  width : 900px;
  padding: 0px 15px 0px 15px;
}

Выделенное меняем на свое.
Урок №6
Теперь мы будем вставлять: лого (шапку), фон, копирайт и иконки. 
Место

/* CS1 Background and text colours
-------------------------------------------------------------*/

body {
background-color: #FAFCFF;
}

Вставляем это

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/
html, body {background-color: [b]#00000[/b]; background-image: url(фон); background-repeat: repeaty; background-attachment: fixed;
background-position: top center;
color: black;}
BODY {background:fixed;}

        background-attachment: scroll;
        background-position: top center;
}

Выделенный номер цвета меняем на свой-это цвет при фона переадресации
Теперь мы будем вставлять иконки, шапку и копирайт
Место:

/* CS4 Post status icons
-------------------------------------------------------------*/

div.icon {border-color: #E3C59D #C3A57D #B3956D #C3A57D}
tr.iredirect div.icon {border-color: #F6F8CF #F6F8CF #F6F8CF #F6F8CF}
div.inew {border-color: #F5E7BF #D5C79F #C5B78F #D5C79F}

#pun-main div.catleft, #pun-main div.catright {display: none}

Ставим это:

Код:
/* CS4 Post status icons
 -------------------------------------------------------------*/

Div.icon {background-image : url(Картинка иконки "Old"); background-repeat: no-repeat;}
TR.inew Div.icon {background-image : url(Картинка иконки "New"); background-repeat: no-repeat;}
TR.isticky Div.icon {background-image : url(Картинка иконки "Imp." или "Важная тема"); background-repeat: no-repeat;}
TR.iclosed Div.icon {background-image : url(Картинка иконки "Close" или "Закрытая тема"); background-repeat: no-repeat;}


#pun-main div.catleft, #pun-main div.catright {display: none}

/* CS5 Other
 -------------------------------------------------------------*/

#pun {background-color: none;}
#pun-title .title-logo {background-image : url("Шапка");
background-repeat : no-repeat; height : 300px;}
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 555px; top: 5px }


#pun-about p.container {background-image: url("Копирайт"); background-repeat: no-repeat; height: 120px;
background-position: top center;}




#pun-title .title-logo span {display: none;}

300px;} -в коде шапки. ее высота
height: 120px;- в коде копирайта. его высота.

Вот и все! Сложно? Правильно-нет. Спасибо за внимание : D

копирование на другие форумы/сайты запрещено!