Всё для Вашего форума!

Объявление

Здравствуйте пользователи и гости! Не обращайте внимание на дурной стиль, это не на долго, идёт создание нового дизайна.

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

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

Вы здесь » Всё для Вашего форума! » Учебник CSS » F.A.Q. по дизайну в CSS.

F.A.Q. по дизайну в CSS.

Страница: 1

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

1

  • Автор: Ksenty
  • Администратор
  • Ksenty
  • Зарегистрирован: 2010-01-08
  • Приглашений: 0
  • Сообщений: 100
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    16 часов 26 минут
  • Последний визит:
    2010-08-12 19:16:36

(c) Zebra

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

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

Код:
<style type="text/css">
..........................................
.........................................
.........................................
........................................
........................................
</style>

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

0

2

  • Автор: Ksenty
  • Администратор
  • Ksenty
  • Зарегистрирован: 2010-01-08
  • Приглашений: 0
  • Сообщений: 100
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    16 часов 26 минут
  • Последний визит:
    2010-08-12 19:16:36

Для тех, кто имеет слабые или приблизительные представления о 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

  • Автор: Ksenty
  • Администратор
  • Ksenty
  • Зарегистрирован: 2010-01-08
  • Приглашений: 0
  • Сообщений: 100
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    16 часов 26 минут
  • Последний визит:
    2010-08-12 19:16:36

Параметры CSS

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

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

Код:
#element1 {background-color: #FF0000;}

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

Код:
#elemnt1 {height: 200px; width: 70%;}

0

4

  • Автор: Ksenty
  • Администратор
  • Ksenty
  • Зарегистрирован: 2010-01-08
  • Приглашений: 0
  • Сообщений: 100
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    16 часов 26 минут
  • Последний визит:
    2010-08-12 19:16:36

Общие коды

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

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

5

  • Автор: Ksenty
  • Администратор
  • Ksenty
  • Зарегистрирован: 2010-01-08
  • Приглашений: 0
  • Сообщений: 100
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    16 часов 26 минут
  • Последний визит:
    2010-08-12 19:16:36

Частные коды

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

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

Код:
#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 для каждого подфорума. заходим на страницу этого подфорума. Ее адрес будет представлять собой нечто вроде http://forum.mybb.ru/viewforum.php?id=5
Берем последнее число адреса - 5 в нашем примере. Им и заменяем x .

Получаем

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

0

Страница: 1

Вы здесь » Всё для Вашего форума! » Учебник CSS » F.A.Q. по дизайну в CSS.

Рейтинг форумов | Создать форум бесплатно