Если в окне "Структура" мы разбирали параметры, начертания и расположения, то раздел "Цвета" полностью отвечает за заполнение форума графическим контентом, то есть здесь мы уже сможем вставлять фоны, шапки и далее в том же духе.
1. Начать стоит с фона.
/* CS1 Background and text colours
-------------------------------------------------------------*/body {
background-color: #e8e9e9;
background-image: url("http://s52.radikal.ru/i136/1010/a7/bbbe49612ca5.jpg");
background-position: bottom center;
background-attachment: fixed;
overflow-x: hidden;
background-float: center
}
Данный код вы можете найти в самом начале окошка, либо вставить самим, если оного ещё не имеется.
background-image: url("http://s52.radikal.ru/i136/1010/a7/bbbe49612ca5.jpg"); - здесь у нас вставляется ссылка на фон. Если вы заполняете фон однотонным цветом, а не фоном, допускается вариант background-color: #цвет;
background-float: center - этот параметр отвечает за расположение фона по центру. Соответственно, расположение можно менять на left, right.
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 {
border-style: none;
color: #363636;
}
Из кода уже становится ясно, что цвет лучше указывать один.
3. И ещё один параметр, который указывает всё тот же цвет, но уже цвет ссылок:
/* CS1.2 */
#pun-ulinks .container {
color: #363636;
}
Он меняет цвет ссылок "Новые сообщения", "Активные темы" и т.д. По желанию сюда также можно добавить центрирование текста, размер и т.д.+
4. Следующий код, который мы видим, отвечает за надписи категорий, начертание и цвет текста и далее в том же духе.
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background-image: url(ФОН); height : 89px;
}Здесь можно указать всевозможные значения, выбрать шрифт, цвет и далее, а так же вставить фон.
5. Переходим к следующему участку кода:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
border-style: none;
color: red;
}
На первый взгляд весьма трудно определить, к чему именно он относится, тем более, что этот код меняет совсем незначительный элемент: строку просмотра тем. Когда вы заходите в определенную тему, внизу есть надпись "Просматривают такое-то количество гостей". Данный код отвечает за цвет текста этого элемента.
6. Следующий код позволяет вам поменять строку текста над формой быстрого ответа: "Напишите ваше сообщение и нажмите отправить"
/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
border-style: none;
color: red;
}
7. Для того, чтобы поменять заглавия в "Профиле", "Администрировании" и т.д., используйте этот код:
/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {
border-style: none;
color: #red;
}
8. А теперь нам предстоит отредактировать весьма важный элемент - блок цитаты и кода:
/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
background-color: transparent;
color: #5a5a5a;
}
.punbb textarea, .punbb select, .punbb input {
background: url(ссылка на фон) #цвет фоновой заливки;
color: #000;
border: 1px solid #цвет границы;
}
В первом коде фон цитаты и кода - прозрачный, но вы можете залить его любым другим цветом или вставить картинку. Следующая строка после фона - цвет текста. Её тоже имеет смысл изменять в зависимости от расцветки вашего форума.
Второй код отвечает за форму быстрого и расширенного ответа, а также за фон маленького сворачивающегося меню в каждой теме "Модерировать тему", "Выделить тему", "Закрыть" и т.д
9. Последний код в данном разделе отвечает за строку пользовательских ссылок, иными словами это "Форум", "Участники", "Поиск" и т.д.
/* CS1.8 */
#pun-navlinks .container {
background: url(ссылка на фон) repeat;
color: #000;
}
