Параметры 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;}

Отредактировано Admin (2009-09-13 04:44:08)

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

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

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

li#navindex a span {...}

- Чат
Код:

li#navextra1 a  {...}

- Участники
Код:

li#navuserlist a span {...}

- Поиск
Код:

li#navsearch a span {...}

- Профиль
Код:

li#navprofile a span {...}

- Сообщения
Код:

li#navpm a span {...}

- Администрирование
Код:

li#navadmin a span {...}

- Выход
Код:

li#navlogout a span {...}

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>

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

<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://design.0pk.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>

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

.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>

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

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

#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>

Стиль страницы
Код:
<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://design.0pk.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>

Стиль страницы
Код:
<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>

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

СКРИН №6

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

СКРИН №7

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

СКРИН №8

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

СКРИН №9

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

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

Стиль страницы
Код:
Код:
<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>