Скидываю просто чтобы не потерять и твои заметки, и статью х)
Свернутый текстНачинаем с верха наш урок - как поставить шапку а) по размеру форума; б) которая шире самого форума. Далее фон форума а) цвет; б) повторяющаяся картинка в) фиксированная картинка. Тело форума, ну тут варианты - цвет и картинка) Футер форума - цвет, картинка и как настроить при фиксированом фоне (как ты на амартии делал). Переходим к наполнению. Как установить иконки -слева или в центре. Цитаты - как сделать фон, фоновую картинку или рамку. Оформление провиля, как настроить, как сделать рамку и пр. Можно к уроку приложить описание основных кодо и как ими пользлваться, к примеру колор - это цвет, ставится через # или ргб)) как-то так)
О, я про категории забыл и поля ввода) и менюшки)
[mod]Введение[/mod]
Доброго времени суток, уважаемый читатель! На сей день мы, команда юного Зефира, дадим тебе более подробное описание на самом деле простых вещей css. Сразу скажу, что урок не для ленивых, и вы должны сразу решить для себя, хотите ли вы читать и практиковать свои навыки, али нет. Если да - то рады вас приветствовать, если нет, то на нет и суда нет. 
Итак, давай те же обсудим, что входит в наш большой урок.
1. Мы разберем на большом примере установку разных дизайнов на коды;
2. Вы сможете просто и наглядно увидеть, как работает этот код с помощью ссылки "Просмотреть код";
3. Шаблон кода, как и шаблон дизайна, свободен для использования;
4. Помимо слов, для вашего саморазвития будет создано приложение, в которое будет входить порядка 20 упражнений, в том числе и установка дизайнов;
5. Вы получите бесценный опыт в обращении с кодами.
Вам интересно? Тогда я вас люблю, продолжайте читать 
Мне дали немалый список того, что нам нужно пройти в ходе этого урока. Я решила пойти по порядку расположения на форуме - сверху вниз. Итак, читаем содержание:
1. как установить фон форума а) цвет; б) повторяющаяся картинка; в) фиксированная картинка;
2. как поставить шапку а) по размеру форума; б) которая шире самого форума;
5. как установить меню а) фон цветом; б) фон картинкой; в) прозрачный фон;
3. как установить и отрегулировать тело форума а) цветом; б) картинкой;
4. как установить категории а) скриптом; б) css-кодом;
5. как установить иконки а) обтекание слева; б) обтекание справа;
6. как установить футер/подвал форума а) цвет; б) картинка; и как настроить при фиксированом фоне;
7. цитаты - как сделать фон, фоновую картинку или рамку;
8. оформление профиля: как настроить, как сделать рамку и пр;
8. оформление полей ввода: как настроить, как сделать рамку, фон пр;
9. то, что может быть вам полезно.
Немало, согласитесь. И этот список исключительно от нашей Нафани, а ещё же есть я, автор сия текста. Так что настраивайтесь, включайте любимую музыку (я пишу эту статью под Billy Talent, например), и внимательно читайте всё, что будет описано ниже. Надеюсь, что на протяжение всего урока вам не будет скучно 
Ах да. в статье будет много котиков, я их фанат *-*
Для этого урока я подобрала и подправила фэнтезийный (с l2) шаблон, который мы и будем верстать. Он достаточно сложный, но просто для того, чтобы вам сейчас было трудно, а потом - просто Смотрим, в общем.
*тут таблица и 2 первью*
Настраиваемся, настраиваемся на волну и, глубоко вздохнув, читаем дальше.
[mod]Урок I. Учимся правильно составлять код.[/mod]
Не удивляйтесь, прошу вас. Подготовка кода в некоторой части даже более важная, чем графика.
От составленного кода зависит скорость загрузки страницы(количество строк/колонок), поэтому мы будем учиться сжимать код.
Также мы будем учиться правильно сортировать код для более быстрого и удобного редактирования.
Пока что это все задачи, которые я перед вами поставила. Наверняка песня проиграла буквально минуту, поэтому не тратьте время и руки в ноги - создаем тестовик. Все это умеют делать, надеюсь, что не нужно то объяснять.
Мой тестовик - https://dless.rusff.me/
Шаг 1. Заходим администрирование -> свой стиль. Удаляем всё второе окно стилей, а также блок A1 в первом окне. Примерно так должен выглядеть блок с кодом: *ссылка*. Естественно, жмем кнопку "Сохранить"
Шаг 2.Пришло время разбора кода от и до. Достаточно долгий шаг, набираемся терпения с:
Подсказка. Можете имзенять комментарии к блокам, называя их как удобно лично вам. Например, для html и body /* Фон */, для ссылок собственно /* Ссылки */ и тд.
/* A2.1 */
html, body {margin: 0; padding: 0}Первое, что мы видим. Это дело отвечает за отсутвие внешних и внутренних отступов для элементов, где они не нужны, то есть где нет значения. В этот же блок мы будем устанавливать нужные фоны и настройки дл них.
/* A2.2 */
.punbb * {margin: 0}Это дело отвечает за... в общем-то не знаю за что, выпендреж ума устраивать не будем. : ) Сюда же мы будем складывать и писать оформление ссылок, наиболее компактное, чем при обычных кодах майбба.
/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt { padding: 0; list-style: none; }Это дело убирает значки в списках (черные квадратики такие). Если интересно - пробуем, увидите, где и что убирают. Сюда мы приписывать ничего не будем, сносим пока что эту часть во второе окно стилей.
/* A2.4 */
.punbb img { border:none }Это убирает рамки у изображений. Тут тоже ничего не нужно, сносим во второе окно.
/* A2.5 */
.punbb .main table { table-layout: fixed; width: 100%; }Это дело устанавливает ширину блока категорий. Кому интересно - пошаманьте, увидите, за что именно отвечает.
/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}Это чекбоксы. Для непросвященных путь в google. А мы сносим это во второе окно.
* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * { height: 1.8em; vertical-align: middle }Это те же чекбоксы и радиобоксы. Непросвященные - марш в гугл. Сносим во второе окно.
Далее нас ждет текст. Одно из самых важных дел при верстке. Блоки для сноса во второе окно стилей здесь не указаны или указаны с припиской "Сносим во второе окно". Всё должно быть кроссбраузерно и по стандартам веба. Непросвященные в гугл, пожалуйста.
/* A3.1 */
body { font-size: 100.01%; }Устанавливает размер текста(в т.ч. и ссылок). Оставляем здесь, но сюда ничего не вписываем.
/* A3.2 */
.punbb { font: normal 68.75% verdana, arial, helvetica, sans-serif; }Устанавливает шрифт и размер для всего форума, зависит также и от значения боди.
/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup { font: 1em verdana, arial, helvetica, sans-serif }Устанавливает шрифт и размер для формы ответа.
/* A3.10 */
.punbb a { text-decoration: underline }Важная для нас часть - ссылки. Сюда мы будем приписывать стили для ссылок, в т.ч. и при наведении, и для каких-то определенных классов (например, для оформления ссылок в объяве или некоторых постах)
Далее идет блок A4. Не знаю, для чего этот блок предназначен. Можете удалить его и посмотреть, что без него происходит. Сносим во второе окно
А сейчас будем разбирать блок B1. Сразу по нему видно (post-content), что отвечает за отображение в темах. Давайте разбираться.
/* B1.1 */
.punbb .post-content {padding: 0; margin: 0; width: 100%; overflow: hidden;}Собственно, это часть отвечает за часть поста, где содержится сообщение, т.е. сюда не входит ни профиль, ни дата, ни рейтинг сообщения, ни ссылки. Для саморазвития - припишите значение фона red, посмеемся
/* B1.2 */
.punbb .post-sig dt { display: block; border-top: 1px solid #888; width: 250px; margin: 5px 0; }Эта часть кода - это подпись. Ширина, высота, цвет, расположение - всё регулируется здесь. Оставляем здесь
/* B1.3 */
.punbb .post-content p {margin: 0;padding: 0 0 1em 0; line-height: 150%; }Эта часть отвечает за стилизацию каждого абзаца в сообщении. Кто хочет что-то здесь менять - оставляйте, я же предпочту это снести.
/* B1.4 */
.punbb .post-content img { vertical-align: text-bottom }Тег .post-content img отвечает за изображения в посте. Установленный здесь css-параметр устанавливает расположение текста: он будет расположен по нижнюю границу изображения. Ну а вообще непонятно
/* B1.5 */
.punbb .post-content img.postimg {vertical-align: middle;}Хм. И тут я начал сомневаться насчет предыдущего своего высказывания, так как именно эта часть отвечает за изображения в посте. По css-параметру мы мгновенно определяем его правдоподобность: текст расположен по середине относительно изображения в посте. Итак, значит опровергаем предыдущий пункт. Кто догадается, за что он отвечает - 100 Зефирок от меня)
/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote { width: 100%; overflow: hidden;}Эта часть кода отвечает за цитаты в сообщениях.
/* B1.7 */
.punbb .post-content .scrollbox {width: 100%;overflow: auto;}Эта часть (по моим предположениям) отвечает по большей части за коды, ибо scrollbox - прокручиваемый контент.
/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {margin: 0.4em 1.8em 1.4em 1.8em;padding: 1em; border-style: solid; border-width: 1px; }Здесь мы будем оформлять цитаты и коды.
/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend { display: block; padding-bottom: 0.7em; font-size: 1.1em; font-weight: bold; font-style: normal; margin: 0; }Эта часть, не сложно догадаться, отвечает за названия блоков кода и цитаты: "Цитата", "Код", "Написал(а) кто-то"
B2 Information boxes
Я не знаю, за что это отвечает, ну да ладно. Кто знает - призовые 150 Зефирок. с:
.punbb .linkst {float: left; position: relative; width: 100%; font-size: 1.1em; height: 0; }
Заходим в темы и видим: "Страница 1 Ответить", за что и отвечает данный код
/* B3.2 */
.multipage { margin-top: 3em; }Этот код опускает страницу темы вниз. Для любопытных - поставьте значение 0 или любое другое.
/* B3.3 */
.linkst .pagelink {position: absolute; top: -4em; left: 1em; width: 24em; }
/* B3.4 */
.linkst .postlink { position: absolute; top: -4em; right: 1em; width: 16em; text-align: right; font-weight: bold; }Собственно расположение "Страница 1 Ответить"
/* B3.5 */
.punbb .linksb { text-align: right; padding: 0.4em 1em 0.5em 1em; font-size: 1.1em; }Это "Страница 1" в конце страницы, перед формой ответа
/* B3.6 */
.linksb .pagelink {float: left; width: 24em; text-align: left; }Это "Страница 1" в начале страницы, перед названием темы
/* B3.7 */
.linksb .postlink { float: right; width: 16em; font-weight: bold}Это "Ответить", а также статус для закрытых - "Тема закрыта"
/* B3.8 */
.subscribelink {clear:both; padding-top: 0.3em; padding-bottom: 0.5em; }Ссылка в конце страницы "Подписаться и отслеживать тему".
Блок C - это структура всего форума. Разберемся по уроку.
.punbb .formal .container {padding: 1.7em 2.3em 1.1em 2.3em;}
Этот блок отвечает за форму ответа: от надписи "Напишите сообщение и нажмите отправить" до кнопок "Отправить" и "Просмотреть".
/* C1.2 */
.punbb .formsubmit {padding: 0 0 0 1.7em;margin: 1em 0 0 0;}Этот блок находится внутри блока formal container, в нём находятся поле с кнопками "Ответить" и "Просмотреть".
/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {margin: 0 0.6em 0 0}Этот исключительно кнопки "Отправить" и "Просмотреть" и слова "Отправить" и "Просмотреть" находится в поле formsubmit.
/* C1.4 */
.punbb fieldset {border-style: solid;border-width: 1px;padding: 0 18px 0 18px;margin: 0 0 1em 0}Этот блок отвечает за поле сообщения, от "Напишите сообщение и нажмите отправить" до формы ответа (влюч.), если есть под формой ответа какие-то блоки, то они тоже включены сюда.
/* C1.5 */
.punbb fieldset legend {padding: 0;margin: 0 0 0 11px;font-size: 1.1em}Это блок с надписью "Напишите сообщение и нажмите отправить". Тут можно установить фон для неё или скрыть её вообще.
/* C1.6 */
.punbb fieldset legend span {padding: 0 5px;margin: 0 0 0 -15px;}Стили для самой надписи соответственно.
/* C1.7 */
.punbb fieldset fieldset {border-style: none;margin: 0;padding: 0 0 8px 0}Не знаю, для кого это написано, но тут дубляж. Может, кто-нибудь раскроет тайну?)
/* C1.8 */
.punbb .fs-box {padding: 1em 0 0.8em 0;}Это блок формы ответа и панели настроек(называйте её как хотите)
/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {padding: 0 0 0.8em 0}fs-box p - это блок формы ответа, почти textarea, если хотите так. Второе - это что-то непонятное.
/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {float: left;margin-right: 1em;}
/* C1.11 */
.punbb .inline .infofield {clear:both}
/* C1.12 */
.punbb .datafield br {display: none}
/* C1.13 */
.punbb .required label, .punbb .datafield span.input {font-weight: bold}
/* C1.14 */
.punbb .datafield span.input a {font-weight: normal;}
/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {display: block;padding: 0 12em 0 0;height: 100%; /* For IE */}...
/* C1.16 */
.punbb textarea, .punbb .longinput input {width: 64%;margin: 0;}Textarea - соответственно поле ввода сообщения, второе - непонятно.
/* C1.17 */
.punbb .hashelp {position: relative;}Это блок в filedset, но ещё до filedset container. Можете поставить фон, увидите, где это. с:
/* C2.1 */
.punbb .main .tcl {overflow: hidden;text-align: left;width: 50%;}Этот блок отвечает за ширину контейнера "Форум" на главной странице
/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {text-align: center;width: 10%;}Этот блок отвечает за колонки "Тем" - tc2, "Сообщений" - tc3 и за "Выбрать" при модерировании раздела.
/* C2.3 */
.punbb .main .tcr {overflow: hidden;text-align: left;width: 30%;}Этот блок отвечает за "Последнее сообщение" на главной странице
/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {width: 40%}Этот блок устанавливает на страницах участников, поиска и модерирования раздела первый столбик ("Имя", "Тема")
/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {text-align: left;width: 20%;}Этот блок устанавливает ширину столбов "Форум" и "Статус" на страницах поиска и участников.
/* C2.6 */
#pun-debug table .tcl {width: 15%;white-space:normal;}
/* C2.7 */
#pun-debug .tcr {width: 90%;white-space: normal;}Этот блок тоже отвечает за какую-то колонку, непонятненько)
/* C2.8 */
#pun-index .tcl h3 {font-size: 1.2em;font-weight: bold;}Этот блок отвечает за название форумов ("Знакомство с Зефиром", "Правила Зефира" и тд.)
/* C2.9 */
.punbb td span.youposted {font-weight: bold; margin-left: -1em;position: absolute;}Этот отвечает за неизвестный лично мне спан.
/* C2.10 */
.punbb td .modlist {display: block;padding-top: 0.3em}..
/* C2.11 */
.punbb .main td {border-style: solid none none solid;border-width: 1px 0 0 1px;padding: 0.8em 1em;}Этот блок отвечает за границы и отступы в ячейках таблиц на страницах
/* C2.12 */
.punbb .main th {border-style: none none none solid;border-width: 0 0 0 1px;padding: 0.4em 1em 0.4em 1em;}Этот блок отвечает за название ячеек (например, "Форум", "Тем", "Сообщений", "Последнее сообщение")
/* C2.13 */
.punbb .main .tcl {border-left-style: none;border-left-width: 0}Отвечает за стиль блоков под "Форум"
/* C2.14 */
.punbb tbody.hasicon td.tcl {padding-left: 3.2em}Отвечает за отступ слева для ячеек под "Форум"
/* C2.15 */
.punbb div.icon {border-style: solid;border-width: 0.6em 0.6em 0.6em 0.6em;height: 0;line-height: 0.0;margin-top: 0.1em;width: 0;}Здесь всё очевидно - этот блок отвечает за ячейку с иконкой
/* C2.16 */
.punbb table div.icon {font-size: 1.05em;position: absolute;margin-left: -2.2em;}Дополнительные стили для ячейки с иконкой. Собственно, можно их перенести в предыдущий блок - смертельного ничего не произойдет.
Блок C3 отвечает за оформление тем непосредственно
/* C3.1 */
.punbb .post .container {border-style: none solid solid solid;border-width: 1px;margin-top: -1px;padding-bottom: 1px;}Этот блок отвечает за блок с постом и блок с профилем
/* C3.2 */
.punbb .post h3 {border-style: solid solid none solid;border-width: 1px;}Блок H3 - это блок даты и номера поста
/* C3.3 */
.punbb .post h3 span {padding: 0.5em 1em;display: block;margin-left: 19em;border-left-style: solid;border-left-width: 1px}Спан включает в себя дату публикации поста и его номера в теме
/* C3.4 */
.punbb .post h3 strong {float: right;width: 5em;text-align: right;font-weight: normal;}Этот стиль написан для номера поста
/* C3.5 */
.punbb .post .post-author {float: left;width: 19em;margin-top: -1.5em;overflow: hidden;}Этот для профиля, сюда можно вставить фон и настраивать профиль как хочется
/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {padding: 0 1em 1em 1em;line-height: 140%;}Этот отвечает за текст в блоке профиля: его отступы и высоту строки
/* C3.7 */
.pa-author {font-size: 1.1em;font-weight: bold;}Стили для ника участника/гостя
/* C3.8 */
.pa-author a {text-decoration: none}Стили для ссылок в нике, то есть для участников
/* C3.9 */
li.pa-title {padding-bottom: 0.4em;font-weight: bold;}Это - оформление статуса
li.pa-online {line-height: 0.8em;border-left-style: solid;border-left-width: 0.7em;padding-left: 0.4em;margin-top: 0.7em;}
Этот блок создает квадратик слева от "Активен...", задает ему отступы и расположение
/* C3.11 */
.punbb .post-body {margin-left: 19em;border-left-style: solid; border-left-width: 1px; padding: 0 0 1px 0;}
/* C3.12 */
.punbb .post-box {padding: 1em;}
/*C3.13 */
.punbb fieldset .post-box {margin-bottom: 0.8em}Этот блок отвечает за пост непосредственно - его отступ слева и границы.
/* C3.14 */
.punbb .post-links {margin-left: 19em; border-left-style: solid;border-left-width: 1px;}Эти стили для ссылок "Профиль", "ЛС", "Е-майл" и пр.
/* C3.15 */
.punbb .post-links ul {padding: 0 1em 0 0;height: 2em;line-height: 2em;margin-left: -19em;border-top-style: dashed;border-top-width: 1px;background: transparent;text-align: right;}Этот блок задает расположение ссылок "Профиль", "ЛС" и пр.
/* C3.16 */
.punbb .post-links li {display: inline;padding-left: 1em;}Стили для каждой ссылки - расположение в строчку и отступ слева для каждой 1em
/* C3.17 */
.pl-email, .pl-website {float: left;}Стили для ссылок "E-mail" и "Вебсайт", настраивает обтекание слева
/* C3.18 */
.punbb .clearer {clear: both;height: 0;font-size: 0;}Блок для чистки, скажем так, страницы
Блок С4 отвечает за модераторское меню
/* C4.1 */
.punbb .modmenu .container {padding: 0.5em 1em;text-align: right;}Этот блок отвечает за стили для модераторского меню и ссылок RSS - Atom
/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {height: 1.8em;line-height: 1.8em;}
/* C4.3 */
.punbb .modmenu .container strong {float: left;}Отвечает непосредственно за выпадающее модераторское меню. Эти два блока можно объединить
/* C4.4 */
.punbb .modmenu input {margin-left: 1em;}..
Блок С5 отвечает за страницу "Информация"
/* C5.1 */
.punbb .info .container {padding: 0.8em 1em}Блок с текстом ошибки
/* C5.2 */
.punbb .info .container .backlink {padding-top: 0.8em;}...
Блок С6 отвечает как за странице сообщений, так и за профиль.
/* C6.1 */
#profile .container {padding-left: 18.6em;}Блок "Сообщения" на странице ЛС и блок с "Имя, пароль и e-mail" на странице профиля
/* C6.2 */
#profilenav {float: left; width: 14em;margin-left: -16.3em;display: inline;}Блок "Папки" и "Действия" на странице ЛС и блок "Профиль" на странице профиля
/* C6.3 */
#profilenav li {padding-bottom: 0.8em;font-weight: bold;}Соответственно пункты блоков - Входящие, отправленные, Основной, Персональный и тп.
/* C6.4 */
#viewprofile ul, #profilenav ul {border-style: solid;border-width: 1px;padding: 1.5em 18px 0.8em 18px;margin: 0 0 1em 0;}Блок с пунктами блоков соответственно (ul выше по званию, чем li)
/* C6.5 */
#viewprofile h2, #profilenav h2 {background: transparent;border: none;padding: 0 0 0 0;margin: 0 14px -0.6em 14px;}Названия "Папки", "Действия" и "Профиль" соответственно
/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {padding: 0 5px;position: relative;}Стили для самих слов "Папки", "Действия", "Профиль"
/* C6.7 */
#viewprofile li, #setmods dl {padding: 0 0 0 16em; margin-bottom: 0.2em;}
/* C6.8 */
#viewprofile li span {float: left;width: 14em;margin-left: -16em;padding: 0.5em 1em;font-weight: bold;}
/*C6.9 */
#setmods dt {float: left;width: 14em;margin-left: -16em;padding: 0.8em 1em;font-weight: bold;display: inline;}
/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {display: block;padding: 0.5em 1em;font-weight: normal;}
/* C6.11 */
.punbb img.avatardemo {float: right;margin: 0 0 0.8em 1.8em}Отображение профиля от лица гостя(viewprofile) и редактирования со страницы управления (setmods): С6.7 за расположение и отступы строк, С6.8 - С6.10 - за оформление и расположение спан-блоков, С6.11 - за аватар
Раздел С7 отвечает за страницу "Участники"
#pun-userlist .formal, #pun-userlist .formal .container {border-bottom: none;margin-bottom: 0;}
.formal отвечает за "Поиск пользователя", а formal container - за "Поиск и сортировка пользователей"
/* C7.2 */
#pun-userlist .usertable .container {padding: 0 2.3em 2.3em 2.3em;border-top: none;}Этот блок отвечает за блок со скрытым названием "Пользователи 1 to 1 of 1", короче - за список юзеров
* C7.3 */
#pun-userlist .usertable table {border-style: solid;border-width: 1px;}Собственно таблица юзеров
Блок D1 отвечает за лого, шапку и её настройки
ююю