Расшифровка кода стиля.
I style_cs.css
управляет цветовыми сочетаниями и стилями шрифтов
1. CS1 Background and text colours
управляет цветовыми сочитаниями таблиц форума и текстов
а) Первое, что мы видим там, это код:
body {
background-color: #Цвет;
}
Мы можем вставить свой цвет, но можем вставить какую-либо картинку:
body {
background-image: url(http://Адрес картинки);
}
б) Потому уже идут блоки:
/* 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: #цвет;
}
это первый блок.
Он управляет основны цветом форума: фоновый цвет ячеек таблиц форума с количеством сообщений и тем, приветствие, низ форума, статистика форума, меня форума (где "профиль", "поиск" и т.д.)
background-color: #
этот тег устанавливает цвет фона этих элементов форума. но туда можно вставить фоовое изображение, а не цвет:
background-image: url(http://Адрес картинки);
Вот такой тег устанавливает цвет текста:
color: #
ВАЖНО! Цветом, который вы пропишите в этом теге, будет обладать только тест, находящийся в этих блоках.
ТЕКСТ можно менять по стилистике!
Дописываем:
color: #цвет; - задаете цвет текста
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.
Мы сделали цвет фона Белым, а текст Желтым именно в этом блоке, см. скриншоты:
Свернутый текст
Водим после изменений этого блока:
1 - меня форума отобразилось белым
2 - приветствие у нас тоже белое
3 - тест приветствия - желтый.
Свернутый текст
1 - текст, которым писано колычиство сообщений, желтый
2 - часть таблицы белая
(не обращайте внимание на высоту ячеек форумных таблиц, это с этим блоком не связано, потом расскажем, как это изменить)
Свернутый текст
1 - везде внизу форума текст тоже стал желтый
2- везде внизу форума основной цвет - белый
в) Следующий блок:
/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
background-color: #цвет;
color: #цвет;
}
меняет цвета таблиц форума и текста форума.
цвет как и всегда можно заменить на картинку:
background-image: url(http://Адрес картинки);
ТЕКСТ можно менять по стилистике!
Дописываем:
color: #цвет; - задаете цвет текста
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.
вот так получилось у нас:
Свернутый текст
1 - новый (желтый цвет)
2 - фоновый цвет (белый)
г) Следующий блок:
/* 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;
}
этот блог управляет категориями форума:
Свернутый текст
1 - ТЕКСТ.
color: #цвет; - задаете цвет текста
font-weight: normal; - меняете "normal" на "bold" - текст станет жирным.
font-style: normal; - меняете "normal" на "italic" - текст будет курсивом.
2 - ФОН.
color: #цвет; - можете задать цвет фона.
background-image: url(http://Адрес картинки); - ставит в качестве фона картинку.
д) Следующий блок:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-color: #цвет;
color: #цвет;
}
Корректирует шапку
Свернутый текст
1 - Текст
color: #цвет; - устанавливаете цвет шрифта.
дописываем по необходимости, если надо:
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.
2 - ФОН
background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение (например, шапку форума.)
е) далее следует такой блок:
/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
background-color: #FFFFFF;
color: #000000
}
Он управляет всяческими замечаниями и приписками форума, которые есть на движке mybb по умолчанию.
Вот пара примеров (я сделала цвет фона черным, а цвет теста белым):
Свернутый текст
1 - цвет текста: белый
2 - цвет фона: черный
опять же, возможно редактирование текста:
дописываем по необходимости, если надо.
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.
