Техническая поддержка сервиса MY-FM.RU

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

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

FAQ по дизайну форума в CSS

Страница: 1
Тема закрыта

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

1

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

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

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

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

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

0

2

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24: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

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Параметры CSS

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

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

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

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

background-color   
Цвет фона элемента. Значением может быть веб-название цвета.
Пример: #element1{backgroun-color: #FF0000;}

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

background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки
Пример: #element1 {background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg");}

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

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

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

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

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

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

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;}

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;}

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

4

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

CSS селкторы для всех элементов форума

Главная страница - верх
СКРИН#1

0

5

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
#pun {background-color: transparent; width: 76%;}
#pun-title table {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/header.gif);
height : 132px; 
}
#pun-title .title-logo {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat; height : 132px;
}
#pun-title .title-logo span {display: none;}
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {color: green;}
#pun-navlinks a:hover, #pun-navlinks a:hover span { 
color: red;
#pun-ulinks .container {
background-color : #00FFFF !important;
}
#pun-ulinks a {
color : #00FFFF
}
#pun-announcement h2 {background-color: #FF0000; color: red}
#pun-status .container { color : red;
background-color : #9900CC;
}
#pun-crumbs1 .container,  #pun-crumbs2 .container{
color : red; background-color : #00FFFF !important;
}
</style>

1. Основной фон(Скрин 1, элемент 1)

Код:
HTML, BODY {...}

Пример:

Код:
<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("http://forum.mybb.ru/viewtopic.php?pid=44#p44.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
</style>

Если не отображается фоновая картинка делаете так пример(ссылка Ваша на картинку, спасибо Lion):

Код:
<style type="text/css">
HTML, BODY {background-image: url("http://m.foto.radikal.ru/0704/15/f6d7a1fb3c3d.jpg")!important; background-repeat: repeat !important;}
</style>

2. Фон под таблицами(Скрин 1, элемент 2)
Вы можете ззаметить, что под таблицами располагается дополнительный фон. Он заполняет промежутки между таблицами форума. Проще всего сделать его прозрачным, чтобы из-под него выглядывал основной фон и форум был в одном стиле. Также его ширина отвечает за ширину всех таблиц форума.

Код:
#pun {...}

Пример:

Код:
<style type="text/css">
#pun {background-color: transparent; width: 76%;}
</style>

3. Шапка форума(Скрин 1, элемент3)
Шапка - это таблица, на которой расположены логотип форума и баннер. Баннер мы не под каким видом трогать не можем. Мы можем оформить таблицу под логотип и расширить ее.

Код:
#pun-title table {...}

Пример:

Код:
<style type="text/css">
#pun-title table {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/header.gif);
height : 132px; 
}
</style>

4. Логотип форума(Скрин 1, элемент4)

Код:
#pun-title .title-logo {...}

Пример:

Код:
<style type="text/css">
#pun-title .title-logo {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat; height : 132px;
}
</style>

Если из под логотипа выглядывает название форума текстом введите

Код:
<style type="text/css">
#pun-title .title-logo span {display: none;}
</style>

4. Меню навигации(Скрин 1, элемент 5)

Код:
#pun-navlinks .container {...}

Пример:

Код:
<style type="text/css">
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}
</style>

ВАЖНО: если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву a . Это изменитт вид ссылки во всех состояниях
В нашем случае это будет выглядеть так

Код:
#pun-navlinks a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении, добавляя вместо a

a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой

Пример:

Код:
<style type="text/css">
#pun-navlinks a:link, #pun-navlinks a:visited {color: green;}
#pun-navlinks a:hover { 
color: red;
}
</style>

Этот код сделает ссылки в навигации до и после посещения зелеными, а при наведении - красными.

Так как ссылки в меню навигации специфичны, полный код для них будет выглядеть так

Код:
<style type="text/css">
#pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited span {color: green;}
#pun-navlinks a:hover, #pun-navlinks a:hover span { 
color: red;
}
</style>

6. Пользовательские ссылки(Скрин 1, элемент 6)

Код:
#pun-ulinks .container {...}

Пример:

Код:
<style type="text/css">
#pun-ulinks .container {
background-color : #00FFFF !important;
}
</style>

Ссылки:

Код:
<style type="text/css">
#pun-ulinks a {
color : #00FFFF
}
</style>

7. Заголовок объявления(Скрин 1, элемент 7)

Код:
#pun-announcement h2 {...}

Пример:

Код:
<style type="text/css">
#pun-announcement h2 {background-color: #FF0000; color: red}
</style>

8. Объявление(Скрин 1, элемент 8)

Код:
#pun-announcement .container {...}

9. Окно статуса(Скрин 1, элемент 9)

Код:
#pun-status .container {...}

Пример:

Код:
<style type="text/css">
#pun-status .container { color : red;
background-color : #9900CC;
}
</style>

10. Название форума(Скрин 1, элемент 10)

Код:
#pun-crumbs1 .container {
...}

Пример:

Код:
<style type="text/css">
#pun-crumbs2 .container {
color : red; background-color : #00FFFF !important;
}
</style>

0

6

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Главная страница - середина

СКРИН#2

0

7

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#pun-main h2 { 
color : green;
background-color : transparent; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun th {
color: red; background-color : #FF00FF; background-image : url(http://i17.photobucket.com/albums/b80/Zebra_/Senzanome.jpg);
}
Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
#pun .tcl, #pun .tcr {width: 20%;}
#pun  .tc2, #pun .tc3 { color: red;
background-color : #FF0000;
}
.modlist {display: none;}
#pun-main td {
border-color : #00FFFF;
}
</style>

Ширина форума(ХТМЛ -низ ставить.....):

Код:
<style type="text/css">
#pun {
width : 90%;
}
</style>


1. Название категории (Скрин 2. элемент 1)

Код:
#pun-main h2 {...}

Пример:

Код:
<style type="text/css"> #pun-main h2 { 
color : green;
background-color : transparent; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

2. Строка Форум - Тем - Сообщений - Последнее сообщение
(Скрин 2 элемент 2)

Код:
#pun th {...}

Пример:

Код:
<style type="text/css"> #pun th {
color: red; background-color : #FF00FF; background-image : url(http://i17.photobucket.com/albums/b80/Z … zanome.jpg);
}
</style>

3. Иконка сообщений
(Скрин 2. элемент 3)

Иконка "Нет новых сообщений"
Там где выделено или так в такие скобки => {...} внутрь вставляем ссылку на свою картинку, которая потом станет картинкой на Вашем форуме; в остальных кодах  для иконок анологично делаем (или также)

Пример:

Код:
<style type="text/css"> Div.icon {
background-image : url();
background-repeat: no-repeat;
}
</style>

Иконка "Новое сообщение"

Код:
<style type="text/css">TR.inew Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
</style>

Иконка "Выделенная тема"

Код:
<style type="text/css">TR.isticky Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
</style>

Иконка "Закрытая тема"

Код:
<style type="text/css"> TR.iclosed Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
</style>

Иконка "Перенесенная тема"

Код:
<style type="text/css"> TR.iredirect Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
background-repeat: no-repeat;
}
</style>

!!!В oпределенных стилях форума данные коды для иконки могут не сработать. В таком случае код иконки "Нет новых сообщений" следует прописать так:

Код:
.punbb table Div.icon {float: left; display: block; width: 30px; height: 30px; border-style: none none none none;}

4. Первый столбец - Форумы (Скрин 2. элемент 4)

Код:
#pun .tcl {...}

Пример:

Код:
#pun .tcl {width: 20%;}


5. Второй столбец - Тем (Скрин 2. элемент 5)

Код:
#pun .tc2 {...}

Пример:

Код:
<style type="text/css">#pun  .tc2 { color: red;
background-color : #FF0000;
}
</style>

6. Третий столбец - Сообщений (Скрин 2. элемент 6)

Код:
#pun .tc3 {...}

7. Четвертый столбец -Последнее сообщение (Скрин 2. элемент 7)

Код:
#pun .tcr {...}

8. Список модераторов (Скрин 2. элемент 8)

Код:
.modlist {...}

Пример:

Код:
<style type="text/css">.modlist {display: none;}</style>

9. Рамка межу столбцами (Скрин 2. элемент 9)

Код:
<style type="text/css">#pun-main td {
border-color : #00FFFF;
}
</style>

0

8

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Главная страница - низ

СКРИН#3

0

9

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#pun-stats .container {
color : red;
background-color : #FF00FF;
}
li#onlinelist {
border-top-style : solid; border-top-width : 2px; border-top-color : #00FFFF; background-color: #FFCCCC;
}
li#onlinelist div {
text-align : center; color: green; background-color: #CC66FF;
}
#pun-about p.container {text-align : center; color: green; background-color: #CC66FF;}
#html-footer .container {background-color: #00FF00; color: #FF0000;}
</style>

1. Окно статистики(Cкрин 3, элемент1)

Код:
#pun-stats .container {...}

Если не работает, то пишем это:

Код:
#pun-stats .statscon {...}

Пример:

Код:
<style type="text/css">#pun-stats .container {
color : red;
background-color : #FF00FF;
}
</style>

2. Средняя часть статистики(Cкрин 3, элемент2)
Элементы 2 и 3 по умолчанию принимают те же параметры внешнего вида, что и элемент 1. Вряд ли возникнет необходимость оформлять их в отличном цвете, как на скрине, однако их коды могут понадобиться для выравнивания элементов внутри них и оформления текста, а также для того, чтобы при желании скрыть их.

Код:
li#onlinelist {...}

Пример:

Код:
<style type="text/css"> li#onlinelist {
border-top-style : solid; border-top-width : 2px; border-top-color : #00FFFF; background-color: #FFCCCC;
}
</style>

3. Нижняя часть статистики(Cкрин 3, элемент3)

Код:
li#onlinelist div {...}

Пример:

Код:
<style type="text/css">li#onlinelist div {
text-align : center; color: green; background-color: #CC66FF;
}
</style>

4. Название форума внизу.(Cкрин 3, элемент4)

Код:
#pun-crumbs2 p.container {...}

Пример:

Код:
<style type="text/css">#pun-crumbs2 p.container {
color : red; background-color : #00FFFF;
}
</style>

5. Строка Powered by(Cкрин 3, элемент5)

Код:
#pun-about p.container {...}

6. HTML низ(Cкрин 3, элемент6)

В этом окне отображается все, что вы вводите в поле HTML-низ в настройках.

Код:
#html-footer .container {...}

Пимер:

Код:
<style type="text/css">#html-footer .container {background-color: #00FF00; color: #FF0000;}</style>

0

10

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Страница тем

СКРИН#4

0

11

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style tye="text/css">
#pun-main h1 {
color : green;
background-color : #FF00FF; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
#pun-main .pagelink, #pun-main .postlink {color: red;}
#pun-main .modmenu p.container {
color : red; background-color: #00FFFF;
}
#pun-main .modmenu p.container strong {color: red;}
#pun-main .modmenu .container a:link, #pun-main .modmenu .container a:visited {
color : yellow;
}
</style>

Страница списка тем наследует большинство параметров главной страницы - ширину и цвет столбцов, обрамление таблицы, иконки.
Однако некоторые элементы все же определяются отдельно:

1. Название темы (Скрин 4, элемент 1)

Код:
#pun-main h1 {...}

Пример:

Код:
<style type="text/css"> #pun-main h1 {
color : green;
background-color : #FF00FF; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

2. Ссылка "Страницы" (Скрин 4, элемент 2)

Код:
#pun-main .pagelink {...}

3. Ссылки "Начать тему" и "Начать опрос" (Скрин 4, элемент 3)

Код:
#pun-main .postlink {...}

4. Окно модерирования (Скрин 4, элемент 4)

Код:
#pun-main .modmenu p.container {...}

Пример:

Код:
<style type="text/css"> #pun-main .modmenu p.container {
color : red; background-color: #00FFFF;
}
</style>

Слова "Модерирование темы"

Код:
#pun-main .modmenu p.container strong {...}

Ссылки в окне модерирования.
Как уже было сказано, для обозначения ссылок внутри элемента достаточно добавить к его основному селектору a, a:link, a:visited или a:hover

Пример:

Код:
<style type="text/css"> #pun-main .modmenu .container a:link, #pun-main .modmenu .container a:visited {
color : yellow;
}
</style>

0

12

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

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

СКРИН#5

0

13

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#pun-main .post h3 {border-color : #00FFFF;
 background-color : #00FFFF;
}
#pun-main .post h3 span, #pun-main .post .permalink, #pun-main .post h3 strong  { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
#pun-main .post-author ul {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
#pun-main .post .container {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
#pun-main .post-body { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
#pun-main .post-content {
background-color : #FFFF33; color : #00FFFF;
}
#pun-main .quote-box, #pun-main .code-box {color: #00FF00; background-color: #FFFFFF;}
#pun-main .post-links li,  #pun-main .post-links ul {
 background-color : #FFCCFF;
}
</style>

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

1.(Скрин 5, элемент 1)

Код:
#pun-main .post h3 {...}

Пример:

Код:
<style type="text/css">#pun-main .post h3 {border-color : #00FFFF;
background-color : #00FFFF;
}
</style>

2.(Скрин 5, элемент 2)

Код:
#pun-main .post h3 span {...}

3. Дата сообщения(Скрин 5, элемент 3)

Код:
#pun-main .post .permalink {...}

4. Номер сообщения(Скрин 5, элемент 4)

Код:
#pun-main .post h3 strong {...}

Пример:

Код:
<style type="text/css">#pun-main .post h3 span, #pun-main .post .permalink, #pun-main .post h3 strong  { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
</style>

5. Информация об авторе(Скрин 5, элемент 5)

Код:
#pun-main .post-author ul {...}

Пример:

Код:
<style type="text/css"> #pun-main .post-author ul {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}
</style>

Каждая строка об авторе имеет свой специфический код. На тот члучай, если вам захочется скрыть или переоформить некоторые элементы - вот их полный список.

Ник

Код:
.pa-author {...}

Статус

Код:
.pa-title {...}

Регистрация

Код:
.pa-reg {...}

Cообщений

Код:
.pa-posts {...}

Аватар

Код:
.pa-avatar {...}

Репутация

Код:
.pa-reputation {...}

IP

Код:
.pa-ip {...}

Активен

Код:
.pa-online {...}

6.(Скрин 5, элемент 6)
В том случае, если у вас нехватает каки-то полей профиля под аватаром, у вас может остаться незакрашенное пространство

Код:
#pun-main .post .container {...}

Пример:

Код:
<style type="text/css"> #pun-main .post .container {border-color : #00FFFF;
color : #000000; background-color : #FF9966;
}</style>

8. Ячейка для текста сообщения(Скрин 5, элемент 8)

Код:
#pun-main .post-body {...}

Пример:

Код:
<style type="text/css"> #pun-main .post-body { border-color : #00FFFF;
color : #000000; background-color : #FFCCCC; 
}
</style>

7, 9. Текст сообщения и фон под ним(Скрин 5, элементы 7, 9)

Код:
#pun-main .post-content{...}

Пример:

Код:
<style type="text/css"> #pun-main .post-content {
background-color : #FFFF33; color : #00FFFF;
}
</style>

10. Блок кода.(Скрин 5, элемент 10)

Код:
#pun-main .quote-box {...}

11. Блок цитаты(Скрин 5, элемент 11)

Код:
#pun-main .code-box {...}

Пример:

Код:
<style type="text/css"> #pun-main .quote-box, #pun-main .code-box {color: #00FF00; background-color: #FFFFFF;}</style>


12. Ссылки под сообщением (ЛС, Удалить, Редактировать, Пофиль и т.д.)(Скрин 5, элемент 12)

Код:
#pun-main .post-links li {...}

13. Полоса с ссылками под сообщениями(Скрин 5, элемент 13)

Код:
#pun-main .post-links ul {...}

Пример:

Код:
<style type="text/css"> #pun-main .post-links li,  #pun-main .post-links ul {
background-color : #FFCCFF;
}
</style>

0

14

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Форма ответа (быстрый и обычный ответ)

СКРИН#6

0

15

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#pun-main .formal .container, #pun-main fieldset, #pun-main .fs-box {
background-color : #00FF00; color: red;
}
#pun-main .formsubmit input {
background-color : #FFCCCC;
}
#pun-main .formal textarea {background-color : #FFCCCC;}
</style>

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

1. Ссылка "Подписаться"(Скрин 6, элемент 1)

Код:
#pun-main .subscribelink {...}

Пример:

Код:
<style type="text/css">#pun-main .subscribelink {color: #FF0000;}</style>

2.(Скрин 6, элемент 2)

Код:
#pun-main .formal .container {...}

3. (Скрин 6, элемент 3)

Код:
#pun-main fieldset {...}

5. (Скрин 6, элемент 5)

Код:
#pun-main .fs-box {...}

Пример:

Код:
<style type="text/css">#pun-main .formal .container, #pun-main fieldset, #pun-main .fs-box {
background-color : #00FF00; color: red;
}
</style>

6. Кнопки "Отправить" и "Редактировать" (Скрин 6, элемент 6)

Код:
#pun-main .formsubmit input {...}

Пример:

Код:
<style type="text/css">#pun-main .formsubmit input {
background-color : #FFCCCC;
}
</style>

7. Поле, куда вводится текст сообщения

Код:
#pun-main .formal textarea {...}

0

16

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Страница своего профиля

СКРИН#7

0

17

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#profilenav .container {background-color: #FFCC99;}
#profilenav, #profilenav h2, #profilenav h2 span, #profilenav ul  {
color : #FFFFFF; background-color : #FF0000;
}
#profilenav li {
background-color : #FF00FF;
}
#profilenav li а:link,  #profilenav li a:visited{
color : #FF00FF;
}
#profilenav li a:hover {color: #00FF00;}
#profilenav fieldset, #profilenav .fs-box {background-color: #00FFFF;}
</style>

1. Окно с профилем (Скрин 7, элемент 1)

Код:
#profilenav .container {...}

Пример:

Код:
<style type="text/css">#profilenav .container {background-color: #FFCC99;}</style>

2. (Скрин 7, элемент 2)

Код:
#profilenav {...}
Код:
[b]3. (Скрин 7, элемент 3)[/b]
Код:
#profilenav h2 {...}

4. (Скрин 7, элемент 4)

Код:
#profilenav h2 span {...}

5. (Скрин 7, элемент 5)

Код:
#profilenav ul {...}

Пример:

Код:
<style type="text/css">#profilenav, #profilenav h2, #profilenav h2 span, #profilenav ul  {
color : #FFFFFF; background-color : #FF0000;
}
</style>

6.Меню ссылок для навигации по профилю (Скрин 7, элемент 6)

Код:
#profilenav li {...}

Пример:

Код:
<style type="text/css">#profilenav li {
background-color : #FF00FF;
}
</style>

Ссылки для навигации по пpофилю:

Код:
#profilenav li а {...}

Пример:

Код:
<style type="text/css">#profilenav li а {
color : #FF00FF;
}
</style>

Или:

Код:
<style type="text/css">#profilenav li а:link,  #profilenav li a:visited{
color : #FF00FF;
}
</style>
Код:
#profilenav li a:hover {color: #00FF00;}

7. Поле с личными данными (Скрин 7, элемент 7)

Код:
#profilenav fieldset{...}

8. (Скрин 7, элемент 8)

Код:
#pun-main .fs-box {...}

Пример:

Код:
<style type="text/css">#profilenav fieldset, #profilenav .fs-box {background-color: #00FFFF;}</style>

0

18

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Страница профиля - Управление

СКРИН#8

0

19

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#pun-main .fs-box .submitfield input {
background-color : #00FFFF;
}
#setmods dl {
color : red; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>


1. Кнопки (Скрин 8, элемент 1)

Код:
#pun-main .fs-box .submitfield input {...}

Пример:

Код:
<style type="text/css">#pun-main .fs-box .submitfield input {
background-color : #00FFFF;
}
</style>


2. Названия модерируемых категорий (Скрин 8, элемент 2)

Код:
#setmods dl {...}

Пример:

Код:
<style type="text/css"> #setmods dl {
color : red; background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>

0

20

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Страница чужого профиля

СКРИН#9

0

21

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

1. Окно профиля (Скрин 9, элемент 1)

Код:
#viewprofile .container {...}

2. Cлово профиль (Скрин 9, элемент 2)

Код:
#viewprofile h2 span {...}

3. (Скрин 9, элемент 3)

Код:
#viewprofile h2  {...}

4. (Скрин 9, элемент 4)

Код:
#viewprofile ul {...}

Пример:

Код:
<style type="text/css"> #viewprofile .container, #viewprofile h2 span, #viewprofile h2, #viewprofile ul {
color : #FF0000; background-color : #00FF00; 
}
</style>

5. Название поля (Скрин 9, элемент 5)

Код:
#viewprofile li span {...}

Пример:

Код:
<style type="text/css">#viewprofile li span {
color : red; background-color : #00FF00; background-image : url (http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
}
</style>


6. Личные данные (Скрин 9, элемент 6)

Код:
#viewprofile li strong {...}

Пример:

Код:
<style type="text/css">#viewprofile li strong {
color : #FFFFFF; background-color : #FF0000;
}
</style>

0

22

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

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

Наследует все параметры страницы личного профиля.

0

23

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Страница Участники

СКРИН#10

0

24

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24:36

Стиль страницы

Код:
<style type="text/css">
#pun-userlist .fs-box  {
color : #FFFFFF; background-color : #FF0000;
}
#pun-userlist .usertable .container {
background-color : #FF00FF;
}
</style>

1. Окно с участниками (Скрин 10, элемент 1)

Код:
#pun-userlist .usertable table {...}

2. (Скрин 10, элемент 2)

Код:
#pun-userlist fieldset {...}

3. (Скрин 10, элемент 3)

Код:
#pun-userlist .fs-box {...}

Пример:

Код:
<style type="text/css">#pun-userlist .usertable table, #pun-userlist fieldset, #pun-userlist .fs-box  {
color : #FFFFFF; background-color : #FF0000;
}
</style>

4. Поле вокруг таблицы с участниками (Скрин 10, элемент 4)

Код:
#pun-userlist .usertable .container {...}

Пример:

Код:
<style type="text/css"> 
#pun-userlist .usertable .container {
background-color : #FF00FF;
}
</style>

0

25

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24: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

26

  • Автор: BOOBR
  • Администратор
  • BOOBR
  • Зарегистрирован: 2009-05-20
  • Приглашений: 0
  • Сообщений: 46
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    7 часов 49 минут
  • Последний визит:
    2010-01-03 15:24: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://support.ipbb.ru/viewtopic.php?pid=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