Здесь поэтапно будет рассказано о правильном обращении со структурой форума.
Нас ждёт первое окошко Структура style.css Именно по названию можно увидеть, что с помощью этого окна задаётся структура всего форума, то есть все таблички, бордеры, отступы и всё прочее менять можно только здесь.
I. Так, сначала смотрим на вот эту часть:
/* A3 Text setup
-------------------------------------------------------------*//* 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.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
font-size: 1em;
font-weight: normal;
}/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
font-size: 1.1em;
}/* A3.6 */
.punbb pre {
font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
}
Эта часть отвечает за шрифты форума, а также за их размеры. Хочу обратить внимание на то, что шрифты вы конечно же можете поставить любые, даже один шрифт на всём форуме, но несколько разных шрифтов всегда лучше чем один, но на всём форуме.
Поэтому эту часть советую вам не трогать, если только вы не гуру в подборе шрифтов, иначе убьёте больше времени на подбор шрифтов, чем на создание стиля : )
II. Всё, что идёт после первого пункта трогать не рекомендую; а переходим мы сразу к регулировке ширины и отступов для нашего форума.
Вот так выглядет часть, отвечающая за ширину и отступы:
/* A5 Basic page layout and borders
-------------------------------------------------------------*//* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 780px;
}
Где margin: 0px auto auto auto; - регулирует отступы относительно страницы, а width : 780px; - ширину. Как видите, ширина у меня указана в пикселях, но вполне можно задать её и в процентах (помним, что максимальное допустимое значение в процентах – 100%, так что не надо писать 780%)
III. Эта часть регулирует положение сообщения о переадресации. /* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}
В принципе, если для вас переадресация важна, то менять настройки следует так: margin: 50px 20% 12px 20%; - положение сообщения относительно границ монитора; width: auto; - ширина сообщения обычно указывается автоматически и зависит от выбранного стандартного оформления.
IV. Эта часть отвечает за бордеры форума (кому ещё неизвестно, бордеры – рамки, или их ещё называют обводкой). Как знаю я, сейчас очень популярным стало либо убирать бордер, либо делать его как своеобразный контур, поэтому расскажу о возможном изменении бордера для разных случаев.
/* A5.9 */
.punbb .container {
border-style: none;
border-width: 1px;
}
border-style: none; - как следует из названия, это стиль бордера. Стилей несколько:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона
Здесь всё просто, и вам останется выбрать стиль на ваш вкус.
border-width: 1px; - толщина бордера.
V. Вот эта часть, в принципе, регулирует те же бордеры, но уже относительно категорий, полей профилей и других элементов.
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: solid;
border-bottom: none;
border-width:1px;
}
Параметры здесь указываются те же, что и для других любых границ.
VI. Итак, мы уже разобрались с текстом и стандартными настройками и бордерами. Приближаемся к части с буквой «В», эта часть отвечает за общие настройки и буквально переводится как «Основное содержание». Здесь нам понадобится всего лишь один параметр:
/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px solid #888;
width: 250px;
margin: 5px 0;
}
Этот параметр регулирует отображение границ между постами, а так же между подписями участников. Понятное дело, что здесь ни в коем случае нельзя все эти параметры делать одного цвета, потому что всё сольётся в один фон и выйдет фигня.
border-top: 1px solid #888; - вот эта строка отвечает за стиль границы (со стилями мы уже разбирались), за размер а также за цвет. Ваша воля выбирать любой цвет, но говорю сразу - выбирайте контрастные цвета, они должны быть видны.
width: 250px; - ширина границы. Предупреждаю: если сделать её больше 500 пикселей, выйдет одна сплошная линия. Так что значения желательно делать меньше.
VII. Ну вот, с предыдущей частью мы тоже закончили, следующая помогает настроить форум согласно своим вкусам, и поэтому называется «специфической».
/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
background-color: transparent;
text-align: center;
width: 10%;
}/* C2.3 */
.punbb .main .tcr {
background-color: transparent;
overflow: hidden;
text-align: left;
width: 30%;
}
Вот эти параметры отвечают за строку "Форум -- Тем-- Сообщений -- Последнее сообщение". В принципе, меняют их достаточно редко, но если вы вдруг надумали их изменить, то в этих кодах вам нужно поменять часть: width: 30%;. Обратите внимание, что размеры нужно указывать в пикселях, если ширина вашего форума тоже в пикселях, и наоборот - используйте проценты, если ширина указана в процентах. Строка: text-align: left; - относится к расположению текста (центр, слева, справа).
VIII. Продолжаем разбираться со строкой "Форум -- Тем-- Сообщений -- Последнее сообщение". Теперь, если вам нужно поменять цвет бордера, находите:
/* C2.12 */
.punbb .main th {
padding: 7px 1em 7px 1em;
border-left: 1px solid #цвет;
border-bottom: 2px solid #цвет;
border-top: 1px solid #цвет;}
Думаю, всем понятно, что вместо слова нужно подставить нужный вам цвет.
Обращаю внимание на то, если вам нужно их удалить, то параметр будет выглядеть так:
/* C2.12 */
.punbb .main th {
border-style: none none none none;
border-width: 0 0 0 0px;
padding: 0.4em 1em 0.4em 1em;
}
IX. Ну вот, мы молодцы и освоили практически всё, что нужно знать о структуре. Осталось несколько немаловажных параметров, один из которых - иконки сообщений. Как знаете, их пять: нет новых сообщений, есть новые сообщения, перенесённая тема, важная тема и закрытая тема. И все они должны помимо того, чтобы выглядеть красиво, ещё и располагаться правильно. В этом нам помогут такие параметры:
/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}
Этот параметр регулирует отступ иконок, то есть чем больше значение, тем больше будет отступ между иконкой и границей форума. Значения указываются в пикселях. И обязательное правило: отступ должен быть либо такой же, как ваша иконка, а лучше даже больше, но ни в коем случае не меньше, иначе иконка "вылезет".
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 30px;
height: 30px;
margin-right: 7px;
}
Этот параметр обязательно нужно заполнить, теперь объясню почему. float: left; - отвечает за расположение иконок. Можно поставить их либо влево, либо вправо. width: 30px; height: 30px; - думаю, уже поняли. Размеры ваших иконок. Если вы вовсе не поменяете их, или поставите неверные, то иконки либо будут обрезаться, либо получатся громадными. margin-right: 7px; - отвечает за расположение иконки относительно названия форума или темы.
