1. Основной фон (Скрин 1, элемент 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;}
</style>
2. Фон под таблицами (Скрин 1, элемент 2)
Вы можете ззаметить, что под таблицами располагается дополнительный фон. Он заполняет промежутки между таблицами форума. Проще всего сделать его прозрачным, чтобы из-под него выглядывал основной фон и форум был в одном стиле. Также его ширина отвечает за ширину всех таблиц форума.
Пример:
<style type="text/css">
#pun {background-color: transparent; width: 76%;}
</style>
3. Шапка форума (Скрин 1, элемент3)
Шапка - это таблица, на которой расположены логотип форума и баннер. Баннер мы не под каким видом трогать не можем. Мы можем оформить таблицу под логотип и расширить ее.
Пример:
<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>
Вряд ли вам понадобится оформлять все ссылки по-разному, но на всякий случай вот их специфические коды:
- Форум
- Чат
- Участники
- Поиск
- Профиль
- Сообщения
- Администрирование
- Выход
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>
