Ну вот я и открою несколько тайн моего форума 
CSS селкторы для всех элементов форума
Главная страница - верх
СКРИН 1
Стиль страницы
<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("Картинка"); background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
#pun {background-color: transparent; width: 76%;}
#pun-title table {background-image : url(Картинка);
height : 132px;
}
#pun-title .title-logo {background-image : url(Картинка);
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)
<style type="text/css">
HTML, BODY {background-color: #FFFF33; background-image: url("Картинка"); 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(Картинка);
height : 132px;
}
</style>
4. Логотип форума(Скрин 1, элемент4)
<style type="text/css">
#pun-title .title-logo {background-image : url(Картинка);
background-repeat : no-repeat; height : 132px;
}
</style>
5. Меню навигации(Скрин 1, элемент 5)
<style type="text/css">
#pun-navlinks .container {
padding-top : 4px; background-color : #C0C0C0;
background-image : url(Картинка);
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)
<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)
<style type="text/css">
#pun-announcement h2 {background-color: #FF0000; color: red}
</style>
8. Объявление(Скрин 1, элемент 8)
#pun-announcement .container {...}
9. Окно статуса(Скрин 1, элемент 9)
<style type="text/css">
#pun-status .container { color : red;
background-color : #9900CC;
}
</style>
10. Название форума(Скрин 1, элемент 10)
<style type="text/css">
#pun-crumbs2 .container {
color : red; background-color : #00FFFF !important;
}
</style>
Отредактировано Ольчик (2008-05-20 14:16:41)
