Для тех кто ниче, ой ничего не знает в 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;}

Вопрос №3: Стиль страницы CSS
Код:
<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. Основной фон

Код:
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>

Если не отображается фоновая картинка делаете так пример:

Код:
<style type="text/css">
HTML, BODY {background-image: url("адрес картинки")!important; background-repeat: repeat !important;}
</style>

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

Код:
#pun {...}

Пример:

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

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. Логотип форума

Код:
#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. Меню навигации

Код:
#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#navuserlist a span {...}

- Поиск

Код:
li#navsearch a span {...}

- Профиль

Код:
li#navprofile a span {...}

- Сообщения

Код:
li#navpm a span {...}

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

Код:
li#navadmin a span {...}

- Выход

Код:
li#navlogout a span {...}

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. Заголовок объявления

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

Пример:

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

8. Объявление

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

9. Окно статуса

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

Пример:

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

10. Название форума

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

Пример:

Код:
<style type="text/css">
#pun-crumbs2 .container {
color : red; background-color : #00FFFF !important;
}
</style>
Вопрос №1 Как добавить логотип(шапку) на форум?

Что такое логотип?
Логотип  - это первое, что бросается в глаза на вашем форуме. Наверно нет нужды и говорить, что если вы хотите начать оформлять форум по своему, что же надо изменить первым.

Примечание, прочтите перед началом замены логотипа:
Логотип, как и любой другой вставленный вами графический элемент, не должен ни в коем случае перекрывать или смещать рекламный баннер, или каким-либо другим способом мешать отображению последнего. За любую, умышленную или непреднамеренную попытку скрыть или убрать рекламный баннер, форум удаляется без предупреждения. Если баннер был скрыт вами неумышленно (Я понаставил кодов и скриптов, каких и откуда вообще не знаю, и баннер исчез), вы должны самостоятельно позаботиться о том, чтобы немедленно по своей инициативе прийти и сообщить администрации о проблеме. В таком случае вам помогут исправить ошибку и восстановить баннер.
Примечание:
Во всех скриптах встречается фраза адрес вашей картинки. Чтобы его получить, достаточно залить картинку на форум. Для этого нажмите  и в появившемся окне выберите картинку, находящуюся на вашем компьютере. Обьем картинки не должен превышать 1 Мегабайта, поддерживаемые расширения  jpеg, png и gif. Не забудьте набрать любой текст в окне Быстрого ответа, иначе картинка попросту не загрузится. После успешной загрузки картинки щелкните по ней правой кнопкой мыши и и в появившемся меню выберите меню Свойства. Скопируйте текст в строке Адрес (URL)  - это и будет адрес вашей картинки.

Если картинка слишком большая и вместо нее в сообщение отображается ее уменьшенное изображение, щелкните по ней левой кнопкой мыши, отобразится реальная картинка.

Все нижеследующие скрипты вставляются в Администрирование --> Настройки -->HTML верх

Дополнительно:
Если ваша картинка не помещается по ширине или высоте, добавьте следующие параметры:
height (высота элемента)
width (ширина элемента)
Значения: px (пиксели) или % (проценты)
Пример:

Код:
#element1 {height: 200px; width: 100%;}

Если вам надо сделать отступ от рамки шапки, добавьте следующие параметры:
margin-top (верхний отступ)
margin-bottom (нижний отступ)
margin-left (левый отсуп)
margin-right (правый отсуп)
margin (все стороны отступа сразу)
Значения: px (пиксели)
Пример:

Код:
#element1 {margin-left: 40px;}

Если вам надо убрать какой-нибудь элемент, добавьте следующие параметры:
display (способ отображения элемента)
Значения: none (нет)
Пример:

Код:
#element1 {display: none;}

Способы вставки логотипа:
Самый простой способ, реализуемый при помощи css:

Код:
<style type="text/css">
#pun-title .title-logo {background-image: url(адрес вашей картинки); background-repeat: no-repeat;}
</style>

Если остальной фон шапки вы хотите отделать в том же стиле:

Код:
<style type="text/css">
#pun-title table {background-image: url(адрес вашей картинки);}
</style>

Если на вашем графическом логотипе некрасиво устроилось буквенное название форума:

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

Логотип-картинка во всю шапку (за исключением баннера(не скрывает его):

Код:
<style type="text/css">
#pun-title .title-logo {display: none;}
#pun-title table {background-image: url([b]адрес вашей картинки[/b]);}
</style>

Картинка во всю шапку, с регулирующейся шириной под разные браузеры/ расширения экрана:
Примечание:
Не работает в Firefox, Safari

Код:
<style type="text/css">
#pun-title table {background-image: none !important;}
#pun-title, #pun-title table, .title-logo-tdr {background-color: transparent;}
#pun-title table  {position: relative; top: [color=red]-30[/color]px ; z-index: 100 !important; height: [color=red]0[/color]px;}
#pun-title .title-logo {display: none;}
#pun-title {height: [color=red]50[/color]px;}
</style>
Код:
<script type="text/javascript">
var logot=document.getElementById('pun-title').innerHTML
document.getElementById('pun-title').innerHTML="<img src='[b]адрес картинки[/b]'"+" style='width: [color=red]100[/color]%; position: relative; top: [color=red]30[/color]px;' />"+logot
</script>

Изменяйте красные значения, пока не отпозиционируете фон и логотип идеально для вас.

Дополнительные скрипты:
Если вам надо просто стереть логотип mybb, используйте данный скрипт:

Код:
<style>
#pun-title .title-logo {display : none;}
</style>

Можно создать один большой логотип над шапкой:

Код:
<img src="адрес вашей картинки">

Если на вашем логотипе осталось буквенное название форума, его можно убрать этим скриптом:

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

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

Код:
<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: [b]510[/b]px; top: [b]190[/b]px
}
</style>

Значения, выделенные жирным изменяйте на свое усмотрение, но только в пределах от 190 до 510(p.s. top - от самой верхней строчки форума left - от края слева(край устанавливается шаблоном. где появится реклама оттуда и считайте!) Также вы можете считать от правого края - вместо left вставьте right

Скрипт, позволяющий создавать логотипы, случайным образом меняющиеся при каждом обновлении страницы:

Код:
<script language="JavaScript">
<!--
image = new Array();
image[0]="адрес вашей картинки №1"
image[1]="адрес вашей картинки №2"
image[2]="адрес вашей картинки №3"
............................................................................
var img=image[Math.floor(Math.random()*image.length)]
document.write("<style>#pun-title .title-logo {background-image: url("+img+"); background-repeat: no-repeat;}</style>")
//-->
</script>
image[*]="адрес вашей картинки №*"
Повторяем для нужного вам количества картинок, соблюдая нумерацию, и вставляем заместо многоточия
Второй вариант скрипта "случайных" логотипов, с учетом разрешений экрана:
<script language="JavaScript">
if (screen.width==1024)
<!--
image = new Array();
image[0]="адрес вашей картинки №1"
image[1]="адрес вашей картинки №2"
image[2]="адрес вашей картинки №3"
............................................................................
var img=image[Math.floor(Math.random()*image.length)]
document.write("<style>#pun-title .title-logo {background-image: url("+img+"); background-repeat: no-repeat;}</style>")
//-->
</script>
<script language="JavaScript">
if (screen.width==1280)
<!--
image = new Array();
image[0]="адрес вашей картинки №1"
image[1]="адрес вашей картинки №2"
image[2]="адрес вашей картинки №3"
............................................................................
var img=image[Math.floor(Math.random()*image.length)]
document.write("<style>#pun-title .title-logo {background-image: url("+img+"); background-repeat: no-repeat;}</style>")
//-->
</script>
image[*]="адрес вашей картинки №*"

Повторяем для нужного вам количества картинок, соблюдая нумерацию, и вставляем заместо многоточия.
screen.width==1280
Вставляем заместо подчеркнутых цифр размер экрана
Многие задают вопрос, а как сделать баннер. Вот готовый скрипт для него:
<a href="ссылка на форум" title="текст при наведении" target="blank"><img src="адрес вашей картинки"></a>
ссылка
Вставляем нужную вам ссылку
текст при наведении
Текст, высвечивающийся при наведении курсора на баннер. Пишем нужный

Вопрос №2:Дополнительные смайлики

Вопрос №4: Иконки для разделов и тем(новое\старое\закрыто и т.д.)

Код для иконок:

Код:
<style type="text/css">
#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: [b]50[/b]; width: [b]50[/b];}
tr#forum_fN Div.icon, tr#forum_fN.iclosed Div.icon background-repeat : no-repeat; background-position: top center;}
Div.icon {
background-image : url(адрес иконки темы без новых сообщений);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(адрес иконки темы с новыми сообщениями);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(адрес иконки выделенной темы);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(адрес иконки закрытой темы);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(адрес иконки перемещенной темы (кстати, нифига не пашет));
background-repeat: no-repeat;
}
</style>

То что выделено жирным изменяем на ширину и высоту иконок

Вопрос №5: Регулирование размера формы ответа.

Данный скрипт позволяет увеличивать или уменьшать размер поля для ввода текста в форме ответа. В ХТМЛ-низ добавьте:

Код:
<script type="text/javascript">
if ((document.URL.indexOf("viewtopic.php") != -1) || (document.URL.indexOf("post.php") != -1) || (document.URL.indexOf("edit.php") != -1)) {
var imgb = document.createElement("img");
var imgs = document.createElement("img");
imgb.title='Увеличить';
imgs.title='Уменьшить';
imgb.src='http://i060.radikal.ru/1008/9e/c3d4d47a3df4.png';
imgs.src='http://s60.radikal.ru/i170/1008/e2/07b91996e8e2.png';
imgb.setAttribute("style", "width: 15px; height: 15px; cursor: pointer !important; margin-left: 15px; margin-bottom: -10px;");
imgs.setAttribute("style", "width: 15px; height: 15px; cursor: pointer !important; margin-bottom: -10px;");
var m = document.getElementById("post").getElementsByTagName("span");
for(j in m) {
if(m[j].className == "input") {
m[j].appendChild(imgs);
m[j].appendChild(imgb);
}}
imgb.onclick = function() {
var rr = document.getElementById("main-reply");
rr.rows = parseInt(rr.rows) + [color=red]1[/color];
}
imgs.onclick = function() {
var rr = document.getElementById("main-reply");
if (rr.rows > 1)
rr.rows = parseInt(rr.rows) - [color=red]1[/color];
}}
</script>

Две выделенные красным цифры - размер, на который будет увеличиваться форма ответа. Можно ставить абсолютно любое число.