Форум поддержки «ЖивыеФорумы.ру»

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки «ЖивыеФорумы.ру» » Справочная » Инструкция по дизайнерству форума!


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

Сообщений 1 страница 14 из 14

1

Вы можете полностью изменить всю его графическую разметку. Интерфейс форума состоит из отдельных элементов - чаще всего таблиц и других объектов, лежащих внутри этих таблиц. Это не значит, что Вы можете изменить СОДЕРЖАНИЕ этих элементов, по крайней мере черех CSS, однако пользуясь исклюсительно CSS кодами Вы можете в абсолютной степени из менить все, что касается их дизайна и графического оформлание - ФОНЫ, ФОНОВЫЕ РИСУНКИ,  ОБРАМЛЕНИЯ, ВЫРАВНИВАНИЕ ТЕКСТА, ВСЕ ПАРАМЕТРЫ ШРИФТОВ И МНОГОЕ ДРУГОЕ.

Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов.    Вставлять данные коды необходимо в Администрирование - Настройки - HTML-верх.
Так как речь идет о css кодах, то прежде чем начать прописывать css текст для каждого отдельного элемента форума необходимо будет проставить теги стиля, между которыми можно будет расположить css для отдельных элементов.

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

0

2

Для тех, кто имеет слабые или приблизительные представления о CSS.

Как было сказано, менять дизайн всех элементов мы будем при помощи css кодов для этих элементов.
Что проедставляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
Стандартный css код выглядит следующим образом.

#element1 {parameter: argument;}

#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

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

Код:
#pun-navlinks {backgroud-color: #FF0000;}
где #pun-navlinks - название элемента, background-color - свойство, ЦВЕТ ФОНА в даном случае, а #FF0000 - само название цвета.

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

Пример:

Код:
#pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}
Если вы хотите придать одинаковый вид сразу двум или более элементам, т.е. прописать для них одинаковые параметры, названия этих элементов пишутся через запятую перед фигурной скобкой.

Код:
#pun-navlinks, #pun-ulinks {background-color: #FF0000; width: 400px; height: 200px;}
Таким образом, например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок.

Далее следует список наиболее часто используемых ПАРАМЕТРОВ. Вы не обязаны прописывать их все для каждого элемента, а только те, которые собрались менять.

0

3

Параметры CSS

ПРИМЕЧАНИЕ 1: для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соотвествующего цвета. Их можно найти тут: ТАБЛИЦА ВЕБ-ЦВЕТОВ

Например, вот так будет выголядеть код, если элементу1 мы хотим задать красный цвет фона

Код:
#element1 {background-color: #FF0000;}
ПРИМЕЧАНИЕ 2: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - текущий кегль (высота шрифта);
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;
ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ
Например, вот так мы задаем ширину и высоту элемента

Код:
#elemnt1 {height: 200px; width: 70%;}
background-color   
Цвет фона элемента. Значением может быть веб-название цвета.
Пример: #element1{backgroun-color: #FF0000;}

0

4

background-attachment 
Определяет, будет ли прокручиваться фон.
Значения: 
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
Пример: #element1 {background-attachment: fixed;}

0

5

background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки
Пример: #element1 {background-image: url("http://i.liveforums.ru/f/ru/liveforums/megapr10.jpeg");}

0

6

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

0

7

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

0

8

border
Все параметры рамки, например, толщина, цвет и т.д.
Пример: #element1 {border: #FF0000 2px;}

border-color
Цвет рамки
Пример: #element1 {border-color: #FF0000;}

border-width
Толщина рамки
Пример: #element1 {border-width: 2px;}

0

9

border-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона
Пример: #element1 {border-style: none solid none none;}

0

10

border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
Пример: #element1 {border-top: none #FF0000 2px}

color
Цвет шрифта в элементе
Пример: #element1 {color: #FF0000;}

float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none отображает объект вставленным в страницу
Пример: #element1 {float: left;}

0

11

font-size
Размер шрифта
Значения: См. Примечание 2.
А также:
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;}

font
Все вышеперечисленные параметры шрифта вместе
Пример: #element1 {font-: sans serif #FF0000 small bold;}

0

12

display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемнт как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.
#element1 {display: none;}

height
высота элемента
width
ширина элемента
Значения: см. Примечание2.
Пример: #element1 {height: 20px; width: 400px;}

padding и margin
Это два на первый взгляд похожик параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта.
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут распологаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

padding-top
Верхняя отбивка
padding-bottom
нижняя отбивка
padding-left
левая отбивка
padding-right
Правая отбивка.
padding
все стороны отбивки сразу.
Значения: смотри Примечание 2.
Пример: #element1 {padding-top: 20px;}

margin-top
Верхний отступ
margin-bottom
нижний отступ
margin-left
левый отсуп
margin-right
Правый отсуп
margin
все стороны отступа сразу.
Значения: смотри Примечание 2. ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
Пример: #element1 {margin-top: -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;}

0

13

Общие коды

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

1. Цвета всех ссылок форума

Код:
.punbb a:link, .punbb a:visited {color:...;}  - цвет все ссылок в обычном сотсоянии
.punbb a:hover {color: ...;} - цвет всех сслок при наведении
2. Курсор (только для IE)

Код:
HTML, BODY {cursor: url(...);}  - где вместо троеточия - ссылка на курсор.
.punbb a:hover {cursor: url("...");} - вид курсора при наведении на ссылку
3. Полоса прокрутки

Код:
HTML, BODY {
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #C3D6DA;
}
, где
scrollbar-face-color  - цвет бегунка
scrollbar-shadow-color  - цвет рамки бегунка
scrollbar-highlight-color - цвет светлых граней бегунка, создающий 3D эффект
scrollbar-3dlight-color   - цвет тени кнопок со стрелками
scrollbar-darkshadow-color  - цвет тени от бегунка
scrollbar-track-color  - цвет дорожки
scrollbar-arrow-color  - цвет стрелок

0

14

Частные коды

Если вам необходим совсем экзотический дизайн форума, и вы хотите оформить по-разному все страницы форума, такая возможность существует.
Правда индвидуальный постраничный дизайн можно сделать только для средней част страницы - для основных таблиц (с категориями на главной и со списком тем на страницах подфорума).

Берем все коды для основной таблицы:

Код:
#pun .tcl {...}  - левый столбец
#pun .tc2 {...}  - второй столбец
#pun .tc3 {...}  - третий столбец
#pun .tcr  - правый столбец
#pun  th {...}   - заголовки столбцов
.punbb Div.icon
Если вы хотите отдельно оформить таблицы с категориями, меняем в этих кодах #pun и .punbb на #pun-main .category

В результате получаем

Код:
#pun-main .category  .tcl {...}
#pun-main .category .tc2 {...} 
#pun-main .category .tc3 {...}
#pun-main .category .tcr
#pun-main .category  th {...}   
#pun-main .category Div.icon
Если же мы хотим отдельно оформить таблицы с темами внутри подфорумов заменяем #pun и .punbb на #pun-main .forum

Получаем

Код:
#pun-main .forum  .tcl {...}
#pun-main .forum .tc2 {...} 
#pun-main .forum .tc3 {...}
#pun-main .forum .tcr
#pun-main .forum  th {...}   
#pun-main .forum Div.icon
Существует возможность и более радикальной дифференциации дизайна. Так, например, можно отдельно оформить каждую категорию и какждый подфорум

Для категории: в том же коже заменяем #pun и .punbb  на #pun-categoryx, где x - номер категории в порядке их создания.
Получаем, например

Код:
#pun-main .category  .tcl {...}
#pun-category1 .tc2 {...} 
#pun-category1 .tc3 {...}
#pun-category1 .tcr
#pun-category1  th {...}   
#pun-category1 Div.icon
Если же речь идет о подфоруме, заменяем #pun и .punbb  на #forum_fx.
Для того что узнать x для каждого подфорума. заходим на страницу этого подфорума.
Берем последнее число адреса. Им и заменяем x .

Получаем

Код:
#pun-main .forum  .tcl {...}
#forum_f5 .tc2 {...} 
#forum_f5 .tc3 {...}
#forum_f5 .tcr
#forum_f5  th {...}   
#forum_f5 Div.icon

0


Вы здесь » Форум поддержки «ЖивыеФорумы.ру» » Справочная » Инструкция по дизайнерству форума!