В этом уроке вы научитесь собирать свой стиль mybb. Здесь приведены только основы, рассказать о том как создавать графику, как делать отдельные навороты - это не цель данного урока и при желании вы самостоятельно найдете интересующую вас информацию в интернете. Например, советую всем пользоваться справочником http://htmlbook.ru/css, где дается подробное объяснение всех css-свойств.
Итак, в этом уроке я расскажу принцип сборки таких дизайнов:

Что у них общего? У таких дизайнов нестандартная шапка, выходящая за пределы основной таблицы форума, а также есть низ. Ну и плюс таким способом проще всего собирать дизайны с рамками.
Начинать создавать дизайн я рекомендую с макета. Создаете в фотошопе документ 1600х1000, при помощи инструмента прямоугольник ("U") делаете по центру основное тело форума и делаете набросок того, как должен выглядеть форум. Помните, что ваш макет должен легко делиться на три части - шапку, фон и низ:

Правда, конкретно в этом примере фон сделан заливкой - так при сборке не возникнет проблем со стыками. А если вы задумали фон картинкой, то нужно либо делать бесшовник высотой с саму шапку, либо шапку и низ обрабатывать ластиком по нижнему и верхнему краям соответственно, убирая стык, и сохранять в png формате.

Итак, предположим, вы уже сделали это, разрезали ваш макет с помощью кропа на три части и получили шапку, фон и низ, а также сделали иконки форума (старые сообщения, новые сообщения, закрытая тема, важная тема - итого 4 штуки) и картинки категории. Начинаем сборку.
Создаем тестовый форум на сервисе mybb или rusff, на нем мы будем ставить все наши эксперименты. Только когда вас устроит результат, будете переносить готовый стиль на ваш основной форум.
Заходим Администрирование>>Свой стиль. Ставим галочку на ДА в пункте "Хотите ли Вы использовать собственный стиль оформления?" и сохраняем. Начинаем работать с чистым кодом стиля.

ВЫСТАВЛЯЕМ ШИРИНУ И РАСПОЛОЖЕНИЕ ТАБЛИЦЫ ФОРУМА

Ищем в первом окошке стиля:

Заменяем его на следующий код:

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  float: none;
  padding: 0px 0px 0px 0px;
  border: none;
  width: 850px;
  }
/* A5.2 */
.punbb {
  width: 100%;
  height: auto;
  }

Разберем теперь сам код.
Жирным выделено значение ширины вашего форума.
А эта часть ставит нашу таблицу по центру.

Если хотим расположить ее слева или справа, меняем float: none; на float: left; или float: right; соответственно.

Свойство margin поочередно устанавливает отступ от верхнего, правого, нижнего и левого  краев окна, поэтому необходимо прописать нужное значение в нужном месте.
Если хотим немного опустить таблицу форума вниз, в строке margin: 0px auto auto auto; вместо 0px ставим нужное вам значение.
Если нужно задать точный отступ от таблицы форума до левого или правого края окна, опять же, используем эту строку.
Например, 50px от левого края окна браузера - margin: 0px auto auto 50px;

ЗАДАЕМ РАЗМЕР ИКОНОК

Ищем опять же в первом окошке браузера

Заменяем это на следующий код:

/* C2.15 */
.punbb div.icon {
  float: left;
  display: block;
  width: 105px;
  height: 66px;
  padding-top: 2px;
  margin-top: 1px;
  background-position: center center;
}

float: left; указывает на то, что иконки будут слева. Хотите, чтобы иконки были как бы внутри форума, что очень часто встречается в стилях разных мастеров, замените его на float: right;
width: 105px; и height: 66px; - это ширина и высота вашей иконки. Прописывайте в зависимости от ваших заготовленных иконок.
Остальные параметры трогать не нужно, только при желании.

ЗАДАЕМ ВЫСОТУ ШАПКИ

Ищем в первом окошке стиля

И вместо height: 40px; прописываем высоту вашей шапки в пикселях.
Также меняем часть кода

на это

/* D1.4 */
#pun-title h1 span  {
  display: none;
  }

так мы уберем название форума из шапки

ВСТАВЛЯЕМ САМУ ШАПКУ, ФОН И НИЗ ФОРУМА

Теперь обращаемся ко второму окошку стиля.
Добавляем в него в самый верх следующий код

/*Убираем слово объявление из таблицы*/
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
/*Ставим шапку*/
body {
background-image: url("картинка");
background-repeat: no-repeat;
background-position: top center; 
background-color: transparent; 
}
/*Ставим фон*/
HTML {
background-color: фоновый цвет;
background-image: url("картинка");
background-repeat: repeat-xy; 
background-position: center top;
}
/*Ставим низ*/
#pun_wrap {  
background-image: url("картинка");
background-repeat: no-repeat; 
background-position: center bottom;
}

Все пояснения я уже включила в код, вам осталось только вставить ссылки на элементы. И не забудьте прописать цвет фона форума - подберите его таким образом, чтобы текст на нем выглядел читабельно и не было резкого контраста с самим фоном. Помните, что картинка фона грузится не сразу, а некоторые форумчане вообще картинки отключают, поэтому к выбору цвета нужно подойти серьезно.
Также, чтобы стало видно шапку, задник форума и низ, прописываем везде во втором окошке в блоке CS1 в свойстве  background-color значение transparent.

ДВИГАЕМ РЕКЛАМНЫЙ БАННЕР

Добавляем в конец второго окошка вот этот код и играемся со значениями left: 300px; top: 350px;

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 300px; top: 350px;}

ЦВЕТ ТЕКСТА НА ФОРУМЕ И КАТЕГОРИИ

Ищем во втором окошке стиля и заменяем все выделенное жирным на ваш цвет. Обычно я проставляю везде одинаковые значения. Также заменяем выделенное синим на background-color: transparent; Выделенное красным - это заливка цитат и кода, меняете на свой цвет.

Также если вам нужно поставить картинки категорий или вообще изменить сам стиль текста на категориях, ищете во втором окошке стиля код

/* CS1.3 */ 
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 { 
  background-color: #1474C3; 
  color: #fff; 
  }

Добавляем туда по своему вкусу

 font-size: 7pt; /*размер шрифта*/
  text-align: center;  /*выравнивание по центру, также можно поставить left или right*/
  text-transform: uppercase;  /*переводит буквы в ВЕРХНИЙ РЕГИСТР*/
  background-image: url("");  /*картинка категории*/
  background-position: top center;  /*выравнивание картинки категории*/
  background-repeat: no-repeat;  /*картинка категории не дублируется*/

УБИРАЕМ РАМКИ ФОРУМА

У вас могут остаться рамки таблицы форума, которые будут некрасиво выглядеть на вашем фоне. Чтобы их убрать, ищем во втором окошке стиля. Везде, кроме выделенного, я проставляю border-color: transparent;
Выделенное - это цвет рамок цитат и кода, меняем на свой вкус или тоже убираем.

ЦВЕТ И СТИЛЬ ССЫЛОК

Для изменения цвета и стиля ссылок находим во втором окошке код и заменяем выделенное жирным на выбранный вами цвет ссылок на форуме. Лучше всего, если он будет везде один

Если хотите, чтобы при наведении ссылки подчеркивались, в пункте

добавьте text-decoration: underline;
Если хотите, чтобы ссылки выделялись цветом при наведении, то добавьте в этот пункт   background: #цвет;

ВСТАВЛЯЕМ КАРТИНКИ ИКОНОК

Находим во втором окошке стиля код

Заменяем его на

/* CS4 Post status icons
-------------------------------------------------------------*/
/*Старые сообщения*/
Div.icon {
background-image : url('картинка');
background-repeat: no-repeat;
}
/*Новые сообщения*/
TR.inew Div.icon {
background-image : url('картинка');
background-repeat: no-repeat;
}
/*Важные темы*/
TR.isticky Div.icon {
background-image : url('картинка');
background-repeat: no-repeat;
}
/*Закрытые темы*/
TR.iclosed Div.icon {
background-image : url('картинка');
background-repeat: no-repeat;
}

Вставляем ссылки на свои иконки.

НАСТРАИВАЕМ ССЫЛКИ "ФОРУМ", "УЧАСТНИКИ" И Т.Д.

Когда я собираю стиль таким образом, то всегда настраиваю расположение меню форума, так как очень часто оно наезжает на саму шапку.
В первом окошке стиля ищем

Заменяем его на

/* D3.2 */
#pun-navlinks .container {
  padding-top: 5px;
  padding-left: 2px;
  height: 15px;
  width: 850px; /*должно соответствовать ширине форума*/
  font-weight: bold; /*делает ссылки жирными*/
  text-align: center; /*выравнивает по центру*/
  position: absolute!important; 
  z-index: 1; top: 430px!important; /*должно соответствовать высоте шапки, впрочем настраиваете на свой вкус*/
}

Также сразу настроим меню пользователя - это ссылки "Новые сообщения", "Активные темы" и т.д.
Находим в первом окошке

Заменяем код на

/* D4.2 */
#pun-ulinks .container {
  padding-left: 2px;
  height: 15px;
  width: 850px; /*должно соответствовать ширине форума*/
  text-align: center; /*выравнивает по центру*/
  position: absolute!important; 
  z-index: 1; top: 450px!important; /*должно соответствовать высоте шапки +15-20 пикселей, впрочем настраиваете на свой вкус[i]*/
  font-size: 10px; /*[/i]меняет размер шрифта*/
  }

Также можно поэксперементировать с остальными параметрами - text-align: center; padding-left: 2px; height: 15px;
На этом вроде бы и все, у нас есть готовый стиль. Надеюсь, что вам помог мой урок.