Форум обо всём | Тех потдержка |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Форум обо всём | Тех потдержка » Вопросы по оформлению форума » F.A.Q. - Дизайн и CSS
Cоставлено Zebra 2005-2007 ©
Создаем FAQ по настройке CSS стилей форума.
Заходим:
Администрирование => Настройки => HTML верх.
Пишем:
<style type="text/css"> * </style>
* - вместо звездочки вставляем CSS о котором будет написано ниже.
В помощь:
Таблица цветов (типа #FF0000)
Фон форума
HTML , BODY {
background-color : #808080;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/bg.gif);
}где:
#808080 - цвет фона.
http://mybb.ru/img/Mybb_Ocean_zero/bg.gif - адрес фоновой картинки.
Если нужен только цвет - не пишите вторую строку с фоновой картинкой.
Дополнительно (если нужно - то добавить строку до знака }):
Не повторять (не размножать) фоновую картинку:
Код:
background-repeat: no-repeat;
Повторять только по горизонтали:
Код:
background-repeat: repeat-x;
Повторять только по вертикали:
Код:
background-repeat: repeat-y;
Зафиксировать фоновое изображение и подавить эффект прокрутки:
Код:
background-attachment: fixed;
Начальная позиция фона - в центре:
Код:
background-position: center;
Начальная позиция фона - левый верхний угол:
Код:
background-position: left top;
Начальная позиция фона - правый нижний угол:
Код:
background-position: right bottom
Ширина основной таблицы форума
В процентах:
#pun {
width : 86%;
}Можно указать не процентное значение, а к примеру значение в пикселях:
#pun {
width : 800px;
}Фон шапки
#pun-title table {
background-color : #004080;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/header.gif);
height : 132px;
}где:
#004080 - цвет фона
http://mybb.ru/img/Mybb_Ocean_zero/header.gif - фоновая картинка
132px - высота шапки (желательно указать такую же как высота картинки, но не менее 60px)
Лого в шапке
#pun-title h1 {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat;
height : 132px;
}где:
http://mybb.ru/img/Mybb_Ocean_zero/logo.gif - лого форума
background-repeat : no-repeat; - не повторять (множить) лого
132px - высота шапки (желательно указать такую же как высота лого, но не менее 60px)
Название форума текстом в шапке
Убираем название форума из шапки:
#pun-title h1 span {
display : none;
}Основной цвет текста
.punbb {
color : #000;
}где:
#000 - цвет.
Меню навигации
#pun-navlinks .container {
background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}где:
#C0C0C0 - цвет фона
http://mybb.ru/img/Mybb_Ocean_zero/menu.gif - фоновая картинка
bold - текст становится жирным
center - выравнивание текста по центру
Ссылки меню навигации
Установить цвет ссылок:
#pun-navlinks a:link, #pun-navlinks a:visited {
color: #000000;
}где:
#000000 - цвет ссылок
Устанавливаем разные цвета для каждой ссылки (!):
Для ссылки Форум:
#navindex a:link, #navindex a:visited {
color: #FF0000;
}Для ссылки Участники:
#navuserlist a:link, #navuserlist a:visited {
color: #FF0000;
}Для ссылки Поиск:
#navsearch a:link, #navsearch a:visited {
color: #FF0000;
}Для ссылки Профиль:
#navprofile a:link, #navprofile a:visited {
color: #FF0000;
}Для ссылки Сообщения:
#navpm a:link, #navpm a:visited {
color: #FF0000;
}Для ссылки Администрирование:
#navadmin a:link, #navadmin a:visited {
color: #FF0000;
}Для ссылки Выйти:
#navlogout a:link, #navlogout a:visited {
color: #FF0000;
}Для ссылки Войти:
#navlogin a:link, #navlogin a:visited {
color: #FF0000;
}Для ссылки Регистрация:
#navregister a:link, #navregister a:visited {
color: #FF0000;
}где:
#FF0000 - цвет текста
Скрываем ненужную из стандартных ссылок
На примере ссылки Поиск:
#navsearch {
display: none;
}Расстояние между ссылками в меню навигации
#pun-navlinks li {
padding: 13px;
}13px - расстояние в пикселях
Идем иеперь по страницам
CSS селкторы для всех элементов форума
Главная страница - верх
СКРИН 1
Стиль страницы
<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>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>Главная страница - середина
СКРИН №2
Стиль страницы
Код:
<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>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>Главная страница - низ
СКРИН №3
Стиль страницы
Код:
<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 {...}Пример:
<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>Страница тем
СКРИН №4
Стиль страницы
Код:
<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>Страница сообщений
СКРИН №5
Стиль страницы
<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>Форма ответа (быстрый и обычный ответ)
СКРИН №6
Стиль страницы
<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 {...}Страница своего профиля
СКРИН №7
Стиль страницы
<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 {...}3. (Скрин 7, элемент 3)
Код:
#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>Ссылки для навигации по пофилю:
Код:
#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>Страница профиля - Управление
СКРИН №8
Стиль страницы
Код:
<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>Страница чужого профиля
СКРИН №9
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>Страница сообщений
Наследует все параметры страницы личного профиля.
Страница Участники
СКРИН №10
Стиль страницы
<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>Общие коды
Есть некотырые парметры, которые чаще всего деляют одинаковыми для всех страниц и элементов форума. Наиболее часто встречающиеся:
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 - цвет стрелок
Частные коды
Если вам необходим совсем экзотический дизайн форума, и вы хотите оформить по-разному все страницы форума, такая возможность существует.
Правда индвидуальный постраничный дизайн можно сделать только для средней част страницы - для основных таблиц (с категориями на главной и со списком тем на страницах подфорума).
Берем все коды для основной таблицы:
Код:
#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://forum.mybb.ru/viewforum.php?id=5
Берем последнее число адреса - 5 в нашем примере. Им и заменяем x .
Получаем
#pun-main .forum .tcl {...}
#forum_f5 .tc2 {...}
#forum_f5 .tc3 {...}
#forum_f5 .tcr
#forum_f5 th {...}
#forum_f5 Div.iconВы здесь » Форум обо всём | Тех потдержка » Вопросы по оформлению форума » F.A.Q. - Дизайн и CSS