Стиль страницы
Код:
<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>
Если не отображается фоновая картинка делаете так пример(ссылка Ваша на картинку, спасибо Lion):
Код:
<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>
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>