Прохождение Нэнси Дрю

Объявление

МЫ ПЕРЕЕХАЛИ!!!


Добавь в закладки! Добавить в ИзбранноеДобавить в ИзбранноеДобавить в ИзбранноеДобавить в ИзбранноеДобавить в Избранное Сделай стартовой!



Русская версия | English version | Українська версія | Беларуская версія | polska wersja






Жмем:

Поддержать форум на Forum-top.ru


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

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


Вы здесь » Прохождение Нэнси Дрю » Web-дизайн » FAQ по дизайну форума в CSS))


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

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

1

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

Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов.

Вставлять данные коды необходимо в Администрирование - Настройки - HTML-верх.

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

Код:

<style type="text/css">
..........................................
.........................................
.........................................
........................................
........................................
</style>

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

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

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

2

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

3

CSS селкторы для всех элементов форума
Главная страница - верх
СКРИН 1

0

4

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

Код:

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

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

Код:

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

5. Меню навигации (Скрин 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>

0

5

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

СКРИН №2

0

6

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

Код:

<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/Z … zanome.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>

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

Код:

.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


Вы здесь » Прохождение Нэнси Дрю » Web-дизайн » FAQ по дизайну форума в CSS))