Инструкция по дизайнерству

С помощью инструкции по дизайнерству вы можете полностью изменить вид (оформление) форума.
Интерфейс форума состоит из отдельных элементов, созданных HTML-кодами. Вы. пользуясь исключительно CSS-кодами. можете в значительной степени изменить вид форума, что касается дизайна и графического оформления - фоны, фоновые рисунки, обрамления, выравнивание текста, все параметры шрифтов и многое другое.

Работа с дизайном форума представляет собой написание css-кодов для отдельных элементов.

Незначительные изменения в дизайне
Если вносимые изменения в текущий стиль незначительны, то можно вставить css-коды в поле НТМЛ-верх («Администрирование» → «Настройки» → «HTML-верх»). При этом прописывать css-код для каждого отдельного элемента форума необходимо внутри тегов стиля.
Пример:

Вместо многоточия, можно будет вставлять все необходимые для нового дизайна css-коды.
Правило, которое нужно учитывать: вы можете прописать коды для многих элементов или только для одного, но чтобы они работали, размещайте их между тегами <style type="text/css"> и </style>.

Значительные изменения или создание нового стиля
Если планируемые изменения значительны, то лучше использовать функцию «Свой стиль». Пройдите в админ-панель «Администрирование» → «Стиль» и включите использование своего стиля. CSS-код нужно прописывать в самом низу верхнего поля «Структура style.css» без тегов <style type="text/css"> и </style>. Подробнее о создании уникального стиля форума.

Основы CSS

Что представляет собой css-код? Он состоит из селектора, параметра и аргумента.
Стандартный css код выглядит следующим образом:

#element1 {parameter: argument;}

#element1 — имя элемента, который оформление которого задаётся css-кодом.
parameter — любое свойство этого элемента. Например, фон, высота, ширина, цвет, и т.д.
argument — значение свойства. Например, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

Вот пример того, как выглядит код для меню навигации форума:

#pun-navlinks {backgroud-color: #FF0000;}

где: #pun-navlinks - название элемента, background-color - свойство (цвет фона), #FF0000 - цвет.

Мы можем прописать в одном css-коде несколько параметров для одного элемента. Например, фон, высоту и ширину. Параметры между собой разделяются точкой с запятой, а параметр и его значение — двоеточием.
Пример:

#pun-navlinks {background-color: #FF0000; width: 5%; height: 8px;}

Если вы хотите придать одинаковый вид сразу двум или более элементам, т.е. прописать для них одинаковые параметры, названия этих элементов пишутся через запятую перед фигурной скобкой.

#pun-navlinks, #pun-ulinks {background-color: #ССС; width: 100%;}

Так мы придадим одинаковые фон и ширину меню навигации и меню пользовательских ссылок.

Для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо, значения представляют собой число и двухбуквенное обозначение единицы измерения:
em — текущий кегль (высота шрифта);
ех — высота буквы х для текущего кегля;
рх — пикселы (относительно координат окна).
in — дюймы;
cm — сантиметры;
mm — миллиметры;
pt — пункты;
% — процент от родительского элемента.

Например, вот так мы задаем ширину и высоту элемента, размер шрифта, внутренний отступ:

#elm {height: 10px; width: 7%; font-size: 1.2em; padding: 5mm;}

Часто используемые css-коды

background-image — фоновая картинка, значения:url ("...") — где в скобках адрес картинки. Пример:

#element1 {background-image: url("http://i.liveforums.ru/f/ru/liveforums/live.jpeg");}

background-repeat — определяет, будет ли размножаться фоновая картинка, значения: no-repeat — не размножается, repeatx — размножается по горизонтали, repeaty — размножается по вертикали, repeatxy — размножается в обоих направлениях. Пример:

#element1 {background-repeat: no-repeat;}

background-position — расположение фоновой картинки на странице, значения: сначала указывается расположение по вертикальной оси: top, center или bottom; затем по горизонтальной: left, center или right. Пример:

#element1 {background-position: top center;}

border — все параметры рамки, например, тип, толщина, цвет и т.д. Типы: dotted — задает пунктирную рамку из точек, dashed — задает штрих — пунктирную рамку, solid — задает одинарную сплошную рамку, double — задает двойную сплошную рамку, groove — создает трехмерный эффект, ridge — создает трехмерный эффект возвышающейся рамки, inset — создает трехмерный эффект заглубленности фона, outset — создает трехмерный эффект выпуклости фон. Пример:

#element1 {border: solid #FF0000 2px;}

color — цвет шрифта в элементе. Пример:

#element1 {color: #FF0000;}

float — отображение растекающегося объекта, значения: left — отображает растекающийся объект на левой стороне, right — отображает растекающийся объект на правой стороне, none отображает объект вставленным в страницу. Пример:

#element1 {float: left;}

font-size — размер шрифта, значения: выше, а также: xx-small, x-small, small, medium, large, x-large, xx-large. Пример:

#element1 {font-size: small;}

font-style — начертание шрифта, значения: normal — соответствует основному начертанию, italic — курсив, oblique — чуть менее наклонный, чем курсив. Пример:

#element1 {font-style: italic;}

font-weight — толщина начертания, значения: normal — обычный шрифт, bold — полужирный число от 100 (минимальная жирность) до 900 (максимальная). Пример:

#element1 {font-weight: 200;}

font-family — семейство шрифта. Пример:

#element1 {font-family: sans serif;}

display — способ отображения элемента, значения: none — элемент вообще не виден, block — выдает элемент в рамке, list-item — выдает элемент как часть списка и присваивает ему маркер, inline — выводит объект в одну строку. Пример:

#element1 {display: none;}

height — высота элемента и width — ширина элемента, значения: см. выше. Пример:

#element1 {height: 20px; width: 400px;}

padding и margin — это два на первый взгляд похожик параметра, но между ними есть разница: padding — отступа от границы во внутрь материнского объекта, margin - внешний отступ от границы дочернего объекта. Значения: см. выше. Пример:

#element1 {padding: 20px;}
#element1 {margin: -20px;}

text-align — выравнимание текста внутри элемента, значения: left — по левому краю, right — по правому краю, justify — по ширине, center — по центру. Пример:

#element1 {text-align: center;}

text-decoration — украшение текста, значения: underline — нижнее подчёркивание, overline — верхнее подчёркивание, none — без подчёркивания, blink — мигание. Пример:

#element1 {text-decoration: underline;}

vertical-align — выравнивание элемента по вертикали, значения: top — по верхнему краю, bottom — по нижнему, middle — по середине. Пример:

#element1 {vertical-align: middle;}

Помощник по CSS

Главная трудность — определить название элемента. Названием элемента может быть HTML-тег, класс и индентификатор. Определить название проще всего посмотрев исходный код страницы — нажав «Ctrl+U». А так же это можно сделать с помощью особого скрипта — помощника по CSS.
Ставим скрипт в HTML-низ («Администрирование» → «Настройки» → «HTML-низ»):

Внизу страницы вы увидите кнопочку — «Помощь в css». Нажмите ее. Далее наводите мышкой на любой элемент на странице. И вуаля — показывается полный код этого элемента, в какую точку бы вы не указывали. Например, вы можете увидеть такое (это абсолютный путь к логотипу):

#pun #pun-index #pun-title table tbody tr .title-logo-tdl

Перепишите показанное имя элемента, или же кликнете дважды левой кнопкой мыши, наведя курсор на элемент, вид которого нужно изменить, и скопируйте название элемента из окна, расположенного около кнопки «Помощь в css»; путём параметров и аргументов придайте желаемый вид, например:

Помните, что после того, как вы нажали кнопку «Помощь в css», подсказки вы увидите только на текущей странице. Если перейдете на другую страницу, жмите кнопку снова.
После окончания работ с дизайном — удалите скрипт из поля HTML-низ.