1. Начнем с размеров форума.
/* A5.1 */
#pun {
margin: auto;
width : 65%;
padding: 0px 50px 0px 50px;
position: relative;
}
Выделенное красным-размер форума, он может быть в пикселях и в процентах. Вы можете сами регулировать значения. У меня стоит в процентах, есть вы хотите в пикселях, то вместо вот этого:
width : 65%;
Вставляете вот это:
width : 900px;
Размеры также регулируются.
2. Затем, когда отрегулировали размер форума, можно заняться шапкой, за это отвечает
/* D1.4 */
#pun-title h1 span {
display: none;
}
#pun-title h1 span {
font-size: 1.5em;
}
#pun-title table {
background-image : url(http://pic.ipicture.ru/uploads/090906/L7PbQKV9Rj.jpg);
background-repeat : no-repeat;
background-position: bottom center;
border: none;
height: 350px;
width: 820px;
}
Итак, рассмотрим подробно)
Это у нас изображение шапки:
background-image : url(ссылка на картинку);
Этот пункт отвечает за повторять шапку или нет:
background-repeat : no-repeat;
Позиция шапки: Справа, слеза, по центру)
background-position: bottom center;
Размер шапки:
height: 350px;
width: 820px;
Красным- высота
Зеленым-ширина
Также можете поставить значения в пикселях)
3. После того как отрегулировали шапку, можно заняться и остальным. Сделаем полоски для форума.
Что они из себя представляют?
Такие полоски очень меняют форум и украшают его.
Полоска меню навигаций, где находятся "Форум, Участники, Правила, Регистрация и т.д..."
За это отвечает:
/* D3.2 */
#pun-navlinks .container {
padding: 0.7em 1em;
}
Чтобы увеличить размер полоски, вам просто нужно добавить
Выделенное красным менять на свое значение)
И вторая полоска это поле заголовка категорий и статистики.
Css A5.10 отвечает за это:
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: none solid solid none;
border-width: 0 1px 1px 0;
}
Чтобы увеличить размер полоски, вам просто нужно добавить
Выделенное красным менять на свое значение)
И вторая полоска это поле заголовка категорий и статистики.
Css A5.10 отвечает за это:
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: none solid solid none;
border-width: 0 1px 1px 0;
}
Чтобы увеличить размер полоски, вам просто нужно добавить
height: 40px;
Выделенное красным менять на свое значение)
4. После полосок можно заняться Иконками.
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
height: 70px;
width: 70px;
margin-left: 3px;
margin-right: 10px;
}
Рассмотрим подробно:
Выделенное красным- Высота иконки.
Выделенное Зеленым-Ширина иконки.
Выделенное желтым- Отступ слева
Выделенное синим-Отступ справа
5. Также, еще одна главная деталь, такая как позиция форума.
/* A5.1 */
#pun {
margin: 30px;
position: relative;
}
Форум слева:
#pun {
float: left;
}
Форум справа:
#pun {
float: right;
}
Когда разобрались со структурой, можно заняться и основным оформление форума.
1. Фон форума
body {background: url(
ссылка на картинку
) repeat; background-attachment: fixed; }
Выделенное красным-Ссылка на картинку, которая будет стоять у вас на заднем фоне.
Выделенное фиолетовым-Повторять или не повторять картинку, если вы хотите, чтобы ваша картинка не повторялась, то просто поставьте no repeat
2.
/* 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: #основной цвет форума;
color: #текст форума;
}
Выделенное красным: Основной цвет форума
Выделенное синим: Текст форума
3.
/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
background-color: #Цвет фона таблицы;
color: #текст;
}
Выделенное красным: Цвет фона таблицы
Выделенное синим: Цвет текста в ней
4.
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background-color: #заголовки форума;
color: #цвет заголовков форума;
font-weight: normal;
font-style: normal;
Выделенное красным: Заголовки форума, или полоска категорий и статистики.
Если вы хотите вставить картинку, а не просто цвет, то вместо
{
background-color: #заголовки форума;
Вставить:
{
background: url(ссылка на картинку) no-repeat;
Выделенное красным: Ссылка на картинку, которую хотите вставить в заголовки форума
Выделенное жирным: Повторять или не повторять картинку, если вы хотите, чтобы ваша картинка повторялась, то вставьте просто repeat
