Мне интересно узнать какие именно дизайны тебе нравятся. Пока я пишу урок полазай по форумам и приведи мне несколько примеров дизайнов с описанием того, что именно тебе в них нравится.

Дизайны очень хорошие ))) Мне самой некоторые нравятся.

Так, начнем наше обучение.

Замена фона форума.

Заходим в свой стиль и будем работать со вторым окошком стиля. Первый отвечает за структуру форума, текст и т.д. А второе за цвета и прочие элементы. Вот с ним пока и будем работать. Не зная лишний раз лучше не чего не менять в первом окне, иначе весь форум скособочится, а нам этого не надо.

Мы видим такой код:

-background-color: #номер цвета
вместо номера цвета вставляем цвет, например, #e4cdb9
Это цвет фона который мы видим при переадрисации.
-background-image : url("ссылка");
заливаем через любой фотохостинг наш фон и вставляем ссылку
- background-repeat: repeat;
будет повторяться фон или нет
Если ставить "repeat", то он просто будет множиться как по вертикали, так и по горизонтали, и фоном будет залит весь форум. Если поставим "repeat-y", то фон будет множиться только по вертикали, если "repeat-x", то по горизонтали. Если не хочешь, чтобы он повторялся, то ставим: no-repeat.
-background-position : top center;}
откуда будет множиться фон.
center - по центру
right - с правого края
left - с левого края

Это еще не все. Вот тебе задание. Для того что бы поменять фон нужно сделать в фотошопе графические элементы для дизайна. В нашем случае это фон-шапка (если делаем слитный с фоном) и сам фон форума. Я обычно делаю шапку 1450х500 и фон 1450х200(или 300) пикселей. Если не поняла, то могу позже сделать шаблоны.

К этому мы перейдем чуть позже. Какого размер делала желтую середину форума? Она должна быть в длинну 800 пикселей, потому что ширину этой части форума будем делать 800px.

Для фона тела форума (вставь это)

body {background-color: #2ab2ba;
background-image : url("ссылка на фон");
background-repeat: repeat;
background-position : top center;}

#pun { background-image : url("ссылка");
background-color : #;
background-position : center;}

Для шапки

#pun_wrap {background-image: url("ссылка"); background-repeat: no-repeat; background-position: center top; }

Теперь полезем в первое окно стиля все это настраивать

/* A5 Basic page layout and borders - отвечает за размер форума

Видим /* A5.1 */ здесь будем менять ширину форума, это то о чем ты меня спрашивала

меняем на это:

#pun {
  margin: 0px;
  position: relative;
  } 
  width: 800px;
  margin: auto;
  }

margin - линия отступа
width - ширина элемента

Больше в этом пункте не чего не трогаем.

Дальше отредактируем размер шапки.

/* D1 Logo and description - отвечает за наше лого (или шапку)

Работать будем с /* D1.4 */

#pun-title h1 span  {
   display: none;
  }

#pun-title TABLE {
  border: none;
  height: 500px;
  width: 800px;
  float: none;
    background-position : top center;  
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%;
}

height: 500px;- длинна
width: 800px - ширина

В шапке меня смущает стандартный шрифт фотошопа. Он все портит, а вот расположение девушки и цвет очень даже нравится.

Попробуй вместо всего первого пункта вставить это.
body {background-color: #2ab2ba; - цвет фона переадресации
background-image : url("ссылка");
background-repeat: repeat;
background-position : top center;}
#pun { background-image : url("ссылка");
background-color : #;
background-position : center;}
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span,  .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {background-color: transparent;
color: #085056;}
#pun-stats h2,.punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, #pun-stats .statscon, li#onlinelist, li#onlinelist div {
background-color: transparent;
color: #d5ebf1;
font-weight: bold;
font-style: normal;}
.punbb .quote-box, .punbb .code-box {
background-color: transparent;
color: #d5ebf1;}
#pun-navlinks .container, #pun-ulinks .container {
background-color: transparent;
color: #444f77;
text-align: center;}
.offline li.pa-online strong {
color: #444f77;
font-weight: normal}
.punbb textarea, .punbb select, .punbb input {
background-color: transparent;
color: #444f77;}
#pun_wrap {background-image: url("ссылка"); background-repeat: no-repeat; background-position: center top; }

/* CS1 Background and text colours нужно было убрать то, что у тебя было и поставить то что я дала, только со своими значениями. А так у тебя получились лишние коды и от этого дизайн стал выглядеть так.

Я завтра посмотрю еще раз что там у тебя с кодами. Сейчас уже спать собираюсь.

Иконки пока не ставь.

CS2 Border colours

управляет цветовыми сочетаниями границ форума.
а) Первый блок раздела:

1 - цвет верхних границ
2 - цвет правых боковых границ
3 - цвет нижних границ
4 - цвет левых боковых границ

б)  Следующий блок:

Управляет цветом черты под нижней границей форума

в) Следующий блок:

Он управляет рамкой внизу и справа от полоски с названиями категорий

г) Далее идет блок

управляет внутренними рамками форумных таблиц

д) следующий блок

Это полоски разделяющие : названия секций!

Это для того что бы знать о этой части дизайна, но границы мы будем убирать совсем. Они нам совершенно не к чему.

Для этого вместо цвета и его номера вставляем это transparent;
Везде где написано #цвет

Почему у тебя шапка так обрезалась, было же все нормально?