Создаем 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 - расстояние в пикселях
---------------------------------------------------------------------------------------------------------
Цвета стандартных ссылок
Цвет ссылки:
.punbb A:link, .punbb A:visited {
color: #00004E;
}
Цвет ссылки при наведении:
.punbb A:hover {
color: #0080FF;
}
Основной цвет рамок
.punbb .container {
border-color : #A7B5BD;
}
Цвет фона в теге цитаты, code
.punbb .quote-box, .punbb .code-box {
background-color : #fff;
}
---------------------------------------------------------------------------------------------------------
Иконки
Закрытая тема:
TR.iclosed Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/lock.gif);
background-repeat: no-repeat;
}
Нет новых сообщений:
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/link.gif);
background-repeat: no-repeat;
}
Есть новые сообщения:
TR.inew Div.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/new.gif);
background-repeat: no-repeat;
}
Выделенная тема:
TR.isticky DIV.icon {
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/sticky.gif);
background-repeat: no-repeat;
}
Иконка в блоке статистики:
#pun-stats ul.container {
background: transparent url(http://mybb.ru/img/Mybb_Ocean_zero/stats.gif) no-repeat 10px 26px;
background-repeat: no-repeat;
padding-left: 51px;
}
где: http://mybb.ru/img/......gif - адрес картинки