Отлично, надеюсь hanuka тоже за, чтобы не терять время сразу выложу вступление.
Давайте определимся, в какое время вы сможете появляться на форуме, чтобы в это время урок шел активно.
Фотошоп надеюсь, есть у всех? Вам понадобиться завести свои текстовики. Надеюсь с этим проблем не возникнет? Регистрировать все умеем форумы? Лучше всего на http://mybb.ru/
Я буду показывать на примере тут. А вы делать то, что я говорю, у себя на форуме. Советую всегда держать открытым блокнот (стандартный, есть у всех на компьютере), и записывать туда все шаги или делать пометки. Чтобы потом не искать это в уроке. У меня целая папка таких пометок, иногда не помнишь, как правильно пишется код, особенно в начале, и легче его просто скопировать.

Начнем с разбивания самого форума на части, с точки зрения дизайна. Если брать поверхностно, не углубляясь в детали, форум состоит из:
Шапка – на картинке желтым
Тело форума - на картинке  белым
Задний фон форума - на картинке розовым

Часто весь дизайн и делают только из этих элементов.

Если более детально разбирать главную страницу форума, то мы еще обращаем внимание на:
Навигация
Категории
Разделы
Низ форума

Ну, детали мы уже будем разбирать после. Пока остановимся на первом варианте.

И так.
1 шаг. Создаем тестовик, киньте сюда ссылки, чтобы я смотрела, как идет работа. 
2 шаг. Заходим на форум. Советую сразу сменить пароль от аккаунта на свой. Открываем страницу «Администрирование». Идем в «свой стиль» и ставим галочку у «Да» на вопрос «Хотите ли Вы использовать собственный стиль оформления?»

Первое окно мы почти не трогаем, там нам нужна будет только шапка. Будем разбирать второе окно.

Чтобы было все наглядней. Сделаем весь форум как чистую страницу. Для этого копируем этот код и вставляем заместо того что во втором окне Цвета style_cs.css.

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

body {
	background-color: #F3F3F3;
}

/* 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: #F3F3F3;
  color: #000000;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #F3F3F3;
  color: #000000;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #F3F3F3;
  color: #F3F3F3;
  font-weight: normal;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #F3F3F3;
  color: #000000;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #F3F3F3;
  color: #000000
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #F3F3F3;
  color: #000000
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #E3E3E3;
  color: #000000
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #F3F3F3;
  color: #000000;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

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

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

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

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

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #F3F3F3;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #F3F3F3;
  }

/* CS2.5 */
.punbb th {
  border-color: #F3F3F3
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #D3D3D3 #FFFFFF #FFFFFF #D3D3D3;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #D3D3D3
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #FFFFFF
  }

.punbb .divider {
  border-color: #D3D3D3 #FFFFFF #FFFFFF #FFFFFF
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #F3F3F3;
  }

.punbb .post-sig dt {
  border-top-color: #F3F3F3 !important;
  }


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

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #000000;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #000000
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #000000;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

/* CS3.3 */
#pun-navlinks a {
  color: #000000;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #000000;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: none;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

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

div.icon { }
tr.iredirect div.icon { }
div.inew { }

Все получилось? Вопросы?

Ну раз вас двое, я особо спешить не буду. будем стараться чтобы все все понимали.

Для начала давайте разберем, что вообще такое код и с чем его едят. Мы не будем углубляться в хтмл и цсс, я сама не знаю многих нюансов, но основу вы знать должны, этого вам вполне хватит, чтобы делать хорошие дизайны на майбб. Попробую объяснить понятным языком. 
Код дизайна мы строим через  CSS. Состоит он из элементов форума и указания свойств и значений для этих элементов. Разделы форума (категории, пост, навигация и тд) у нас в коде указаны как /* номер */, у каждого элемента есть свое название (те самые непонятные punbb ul, .punbb dl,  и пр.) и главное в дизайне, знать какое название, за какой элемент отвечает. Тогда уже можете задавать этому элементу нужные для нас свойства.
Теперь о свойствах. Например, мы знаем, какое название отвечает за нужный нам элемент, и хотим задать ему ширину и цвет (что и есть свойства).
Любе свойство обязательно должен иметь ; в конце, и двоеточие после названия. Выглядит это так: 
Код Css: значение;
например  width: 800px; где width это код css отвечающий, за какое либо свойство (в данном случае за ширину), 800px это значение которое мы указываем свойству. Значение может быть как код цвета, цифра в пикселях, или процентах, так и определенные коды.
Обязательно все свойства берутся в такие рамочки {}, иначе работать не будет. Выглядит это так:
*номер раздела*
Название элемента {свойства}

Например:
/* CS3.3 */
#pun-navlinks a {
  color: #000000;
  }

Где /* CS3.3 */ - раздел, в данном случае раздел навигации. #pun-navlinks a  – название элемента, в данном случае ссылки в навигации. color: #000000; - свойства. В данном случае цвет ссылок.

Это мы изучили общее строение кода. Все необходимые свойства и элементы мы будем изучать по ходу урока. Не забываем записывать их в блокнотик.

Пс: Свойства CSS можно применять далеко не ко всем элементам форума, для этого мы используем хтмл теги. Которые вставляем в хтмл верх и хтмл низ в настройках форума. Это конечно скрипты и таблицы. Но к ним мы перейдем не скоро.

Понятно как это работает? Есть вопросы?

hanuka
Нет конечно. Большинство кода просто на латинице, ничего не несут. А такое как ширина, высота и пр, это легко запомнится, или всегда в помощь блокнот, обязательно веди записи с пометками.

Отредактировано Sharell' (2012-06-23 19:50:05)

Давайте раз особых вопросов не вызвала вводная. Перейдем сразу к обучению. Arashi подтягивайтесь.

Первый код, который мы выучим – ширина. Нужно задать ширину форума. Чтобы получилось так: Ссылка

Ширина любого элемента, будь то колонка таблицы, или ширина форума,  задаётся с помощью кода: width
Ширина указывается как в пикселях (что такое пиксели знаем?) так и процентах. Я предпочитаю указывать в пикселях так точнее. Целиком это выглядит так:  width: 800px;

За сам форум у нас отвечает раздел  /* A5.1 */ в первом окне.
Элемент #pun. Он там один.
Задаем ему свойства
{
margin: auto;
position: relative;
width: 800px;
}

Что у нас получилось:

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

Два первых значения вам не нужно менять, можно ставить всегда так, пока в другую группу не перейдете. Подробнее расскажу ниже. Записали в блокнотик:
/* A5.1 */
#pun (тело форума)
{width: 800px; - ширина форума. }

Получилось?