Я хотела бы предложить вашему вниманию краткое, на сколько это возможно, руководство. Оно поможет новичкам освоить функцию "Свой Стиль".
[ex]Данное руководство является авторским. Копируя его давайте ссылку на проект Forum Design![/ex]
Начнём с верхнего окошка Стиля, а точнее с пункта Структура style.css
Немного прокручиваем и видим вот такой кусочек кода:
/* 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
}
Это шрифты вашего форума. Можете поменять все, как вам нравиться или оставить как есть.
Далее не трогаем и прокручиваем вниз, пока не наткнёмся на вот такие буковки:
/* A5.2 */
.punbb {
float: left;
width: 100%;
height: auto;
}
Это размер и положение вашего форума.
float: left; - положение. Можно заменить на right; или center;, тогда ваш форум соответственно передвинется в право или встанет по центру станицы.
width: 100%; - ширина форума. Можно указать в процентах, как в примере, или же в пикселях (что в большинстве случаев гораздо удобнее). В последнем случаи это будет выглидеть так : width: 900px;
На заметку: 900px - самый распространённый и часто используемый размер форума.
Это:
/* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}
Положение сообщения о переадресации.
margin: 50px 20% 12px 20%; - пункты, регулирующие, на каком расстоянии оно будет расположено касательно границ монитора.
width: auto; - ширина. auto; устанавливает автоматическую ширину, которая будет меняться в зависимости от ширины самого форума.
На заметку: Эти понкты лучше не менять, так как мониторы и разрешения у всех разные.
Итак, один из самых излюбленных кусочков многих админов:
/* A5.9 */
.punbb .container {
border-style: solid;
border-width: 1px;
}
Границы форума.
border-style: solid; - как именно будет обведена таблица форума (штрих, жирной или тонкой полоской и тд)
border-width: 1px; - ширина обводки (не советую делать слишком большую, так как это будет бросаться в глаза)
Вот этот пункт:
/* 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;
}
Регулирует тоже самое, только относительно внутренних границ (категорий, форумов, профиля и тд). Все изменяем соответственно с пунктом выше.
Листаем вниз. Следуйщий пункт не заставил нас долго ждать и показался уже после 3 абзацев. Что ж, приступим к нему:
/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px solid #888;
width: 250px;
margin: 5px 0;
}
Он не мало важен, так как регулирует, как будет отображаться границы между постом и подписью пользователя.
solid #888; - цвет этой самой границы.
width: 250px; - её ширина.
На заметку: Ни в коем случаи не делайте эту границу такого же цвета, как и фон. получиться смазано и разобрать что где будет невозможно. Так же мы не рекомендуем делать разделительную линию стишком длинной, будет смотреться неаккуратно.
Далее прокрутим достаточно большую часть кода, пока не наткнёмся на вот это:
/* C2 Table layout
-------------------------------------------------------------*/
Абзацы этого раздела регулируют положение и размер граф "Форум", "Тем", "Сообщений" и, конечно же, "Последнее сообщение".
Преступим:
Это:
/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}
Отображение графы "Форум".
text-align: left; - положение. Напоминаю, что можно поменять на right; или center; соответственно.
width: 50%; - ширина этой графы.
На заметку: Ширину этих граф лучше не менять.
Это:
/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
text-align: center;
width: 10%;
}
Графы "Тем и "Сообщений".
text-align: center; - как вы уже, наверняка, знаете, расположение.
width: 10%; - высота.
А эта, и , слава Богу, последняя, графа - "Последнее Сообщение":
/* C2.3 */
.punbb .main .tcr {
overflow: hidden;
text-align: left;
width: 30%;
}
text-align: left; - расположение.
width: 30%; - ширина.
Далее опускаемя, пока не увидим вот такую штуку:
/* C2.14 */
.punbb tbody.hasicon td.tcl {
padding-left: 3.2em
}
Это отступ для иконки. точнее то расстояние, которое будет пропущено между границей форума и текстом описания.
На заметку: Это расстояние должно быть больше иконки, тогда она не будет перекрывать текст.
Теперь:
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 30px;
height: 30px;
padding-top: 1px;
margin-top: 1px;
}
Это в свою очередь расположение, высота и длинна иконок.
width: 30px;
height: 30px; - меняем на нужный.
Далее нет особо необходимых пунктов, их мы прокручиваем и видим это:
/* D1.2 */
#pun-title h1 {
display : block;
height : 40px;
padding: 2em 1em 0 1em;
}
height : 40px; - высота вашего логотипа.
Это тоже оче6нь важный пункт
#pun-title TABLE {
border: none;
height: 105px;
width: 100%;
border-top: solid 1px #636496
}
Высота графы, в которой расположен ваш логотип (шапка)
На заметку: Высота этой графы должна соответствовать высоте логотипа (шапки).
В принципе это всё. Так как наше руководство краткое. Всех заморочек я не расписывала.
Отредактировано Meiveda (15.07.10 22:47)
