Мой уголок творчества

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

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


Вы здесь » Мой уголок творчества » Как создать стиль КСС » Все для стиля


Все для стиля

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

1

-

0

2

1. Скопировать коды и вставить в верхнее и нижнее окошко поля Стиль.
http://forum.mybb.ru/style/Название_Сти … _Стиля.css
http://forum.mybb.ru/style/Название_Сти … иля_cs.css

2. В первом окне
@import url(название стиля_cs.css);
менять на
@import url(style_cs.css);

3. В верхнем окне указана структура форума, размеры всех таблиц и картинок, а в нижнем - цвета и фоны.

4. Обязательно поставить галочку в Хотите ли вы использовать свой стиль оформления.

5. Каждый элемент можно отдельно прописать для редактирования, например punbb. main h1 {...}

6. Чтобы отредактировать длину и высоту лого, ищем в верхнем окошке #pun { и ставим длину лого, а именно width (проценты заменить на ...px, но можно и проценты). Это все в /* A5.1 */

7. #pun-title TABLE { - это шапка и лого в Ксс. Находится в коде здесь: /* D1.4 */. Тут меняем длину лого так же как и в /* A5.1 */. Так же там прописывается ширина лого height.

8. #pun-title h1 { - это полоска в самом низу, где еще раз написано название форума.

9. html, body { - это фон всего форума.

10. .punbb div.icon { - это код под иконки Новые сообщения, Нет сообщений, Важная тема, Закрытая тема и т.д. В верхнем коне прописывается их ширина и длина. В нижнем  - ссылки на картинки.

11.Полоска под лого Форум, Участники и т.д. меняется в верхнем окне (/* D3.1 */) тут #pun-navlinks .container { (это необязательно) и в нижнем (
тут: /* CS1.8 */
#pun-navlinks .container { Ставится свой цвет слов Форум ... и ссылка на фоновое изображение.

12. Иконки Новые сообщения, Нет сообщений, Важная тема примерно 40х40

13. Внизу в #pun { background: url(...) repeat; мы меняем фон под форумными таблицами, но не общий)

14. /* CS1.2 */
.punbb .post .container,
.punbb .post h3 {  - это для изменения цвета фона для профиля участника. Нижнее окошко стиля.

.punbb .post h3 span {- это фон верхней полоски напротив профиля, где написана дата сообщения. Лучше, когда чуть темнее фона профиля.

.punbb td.tc2, .punbb td.tc3 { - фон внутри таблиц под словами Тем и Сообщений. Цвет ставится такой же, как в предыдущем.

15. /* CS1.1 */
.punbb .main .container,
.punbb .section .container,
.punbb .section .formal .container,
.punbb .formal fieldset,
#viewprofile li strong, #viewprofile li div,
#setmods dd,
#pun-ulinks .container,
.punbb .post-body,
.post-box,
.punbb .post-links,
.punbb-admin #pun-admain .adcontainer,
.punbb .info-box, .punbb #pun-main .info-box .legend {-это фон внутри таблиц. Нижнее окошко.

16. /* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 { - это фоны для заголовков полоски над Форум, Тем, Сообщений, а так же Статистика форума. + ставим цвет для текста.

17. /* CS1.4 */
.punbb .modmenu .container { - фон и текст полосы внутреннего форума, где написано Удалить, Перенести, Открыть или Закрыть темы.

18. /* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span { - это фон и цвет текста  названия редактируемой категории в Админ-меню (например когда нажимаешь Стиль  и правее написано Свой стиль), а так же в окне быстрого ответа заголовок "Напишите ваше сообщение и нажмите отправить".

.punbb .post h3 strong { - какой-то заголовок.Лучше не трогать.

19. Изменить картинки Профиль, ЛС, Мыло, Сайт, Правка, Цитата, Удалить нужно при помощи только определенного скрипта, который вставляется в ХТМЛ-низ.

<script type="text/javascript">
var trr=document.getElementsByTagName("div")
var fi=0
for (fi=0; fi<=(trr.length-1);fi++)
{if (trr[fi].className=="post-links")
{var drr=trr[fi].getElementsByTagName("a")
drr[0].innerHTML="<img src='картинка профиль'/>"
drr[1].innerHTML="<img src='картинка лс' />"
var er=2
for (er=2; er<=(drr.length-1); er++)
{if (drr[er].innerHTML.indexOf("E-mail")!=-1)
{drr[er].innerHTML="<img src='картинка мыла' />"}
else if (drr[er].innerHTML.indexOf("Вебсайт")!=-1)
{drr[er].innerHTML="<img src='картинка вебсайт'  />"}
else if (drr[er].innerHTML.indexOf("Цитировать")!=-1)
{drr[er].innerHTML="<img src='картинка цитировать'/>"}
else if (drr[er].innerHTML.indexOf("Редактировать")!=-1)
{drr[er].innerHTML="<img src='картинка правка' />"}
else if (drr[er].innerHTML.indexOf("Удалить")!=-1)
{drr[er].innerHTML="<img src='картинка удалить' />"}
}}}
</script>

20. /* CS1.7 */
.punbb .quote-box, .punbb .code-box { -  цвет фона и текста цитируемого сообщения. Оптимально ставить фон как в:
/* CS1.2 */
.punbb .post .container,
.punbb .post h3 {

21. /* CS1.8 */.punbb th { - изменение фона и цвета текста в полосе Форум, Тем, Сообщений, Последнее сообщение[/b][/b]

0

3

Обозначения изменений в Ксс.

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


Вы здесь » Мой уголок творчества » Как создать стиль КСС » Все для стиля