Возможно, описанное ниже, немного поможет желающим изменить внешний вид темы, так сказать поможет найти изменения на форуме после правки файла style.css (конечно, если вы знакомы хотя бы с основами CSS)). Рассмотрено на примере темы InvisionExBB
п.с. есть некоторые неточности, возможно, и ошибки) многое было упущено, т.к. это можно найти в справочнике по CSS..
п.с.2 пригодится любой справочник по CSS, например, http://www.htmlbook.ru/ :: хороший учебник по CSS http://ru.html.net/tutorials/css...introduction.asp
строки 1, 4, 5 - см. справочник по CSS, т.к. там об этом все есть
CODE:BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:0px;padding:0px;background-color:#FFF; text-align:center }
a:link, a:visited, a:active { text-decoration: underline; color: #000 }
a:hover { color: #465584; text-decoration:underline }
строки 7-8 - Цвет "Администратора" форума
CODE:a:link.admin, a:visited.admin, a:active.admin, .admin {color: red;}
a:hover.admin {color: #FFAEAE;}
строки 9-10 - Цвет "Супермодератора" форума
CODE:a:link.supmoder, a:visited.supmoder, a:active.supmoder, .supmoder {color:blue;}
a:hover.supmoder {color: #8BAFEF;}
строки 11-12 - Цвет "Модератора" форума
CODE:a:link.moder, a:visited.moder, a:active.moder, .moder {color: Green;}
a:hover.moder {color: #88D9AB;}
строка 13 - Цвет обычных пользователей в Статистике
CODE:a:link.noclass, a:visited.noclass, a:active.noclass, a:hover.noclass, .noclass {}
*например, чтобы обычные пользователи подсвечивались фиолетовым цветом можно сделать так
CODE:a:link.noclass, a:visited.noclass, a:active.noclass, .noclass {color:DarkViolet;}
a:hover.noclass {color:Violet;}
строка 15
CODE:#ipbwrapper { text-align:left; width:95%; margin-left:auto;margin-right:auto }
*width:95% - задает ширину форума в процентах;
строки 17-18 - отвечают за поле с логотипом и названием конференции - см. скриншот
CODE:#logostrip { border:1px solid #345487;background-color: #3860BB;background-image:url(im/tile_down.gif);padding:0px;margin:0px; }
#logostrip a:link, #logostrip a:visited, #logostrip a:active { font-size:20px;text-decoration: none; color: #3A4F6C; font-weight : bold; }
строки 19-20 - отвечают за поле с меню, там, где Помощь, Поиск, Пользователи.. - см. скриншот
CODE:#logomenu { border:1px solid #BCD0ED;background-color: #DFE6EF;font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C;}
#logomenu a:link, #logomenu a:visited, #logomenu a:active {font-size:10px;text-decoration: none; color: #3A4F6C; }
строки 22-23 - отвечают за поле с меню, там, где Вход, Регистрация, Правила форума.. - см. скриншот
CODE:#userlinks {border:1px solid #C2CFDF; background-color: #F0F5FA }
CODE:#userlinks div {float: left;} - возможно, не используется
строки 25-27, 29 - отвечают за поле: "Последний раз Вы здесь были", "Рейтинг популярных тем".. - см. скриншот
CODE:#navstrip, #subnavstrip {font-weight:bold; padding:6px 0px 6px 0px}
#navstrip img {vertical-align:middle; border:0px;}
#subnavstrip {font-weight:normal; }
#navstrip div, #subnavstrip div, #userlinks div {float:left;}
*#subnavstrip не используется
строка 31 - отвечает за окно с текстом сообщения в предварительном просмотре (после нажатия на кнопку "Предварительный просмотр") - см. скриншот
CODE:#preview {display: none;padding: 1px;margin-bottom: 10px; }
строки 33-34 - отвечают за всплывающее окно "Новое сообщение в личном ящике" - см. скриншот
CODE:#newmail {position: absolute; top: 60px; display: block; width:95%; z-index: 66;}
#newmail-shadow{position: absolute; top: 65px; display: block; width:95%; z-index: 65;}
строки 38-39 - отвечают за подфорумы на главной странице форума
CODE:.sub_foldernew {background: url('im/sub_foldernew.gif') no-repeat; padding-left: 12px;} - отображается если в подфоруме есть новые сообщения
CODE:.sub_folder {background: url('im/sub_folder.gif') no-repeat; padding-left: 12px; width: 900px;}
строка 41 - см. справочник по CSS
CODE:TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; }
строка 43
CODE:.tableborder { border:1px solid #345487;background-color:#FFF; padding:0; margin:0 }
*border:1px solid #345487 - Цвет контурной рамки вокруг таблиц
*background-color:#FFF - В данном случае это цвет контурной рамки внутри таблиц (хотя на самом деле - цвет фона)
строки 45-47 - отвечает за поле с названием категорий форума - см. скриншот
CODE:.maintitle { background-color: #6495ed; vertical-align:middle;font-weight:bold; color:#FFF; padding:8px 0px 8px 5px; background-image: url(im/tile_down.gif) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: underline }
строки 49, 53-57
CODE:.profilleft { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; font-size : 13px; }
.profilright { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; }
*например, если перейти по ссылке "Ваш Профиль", то .profilleft - отвечает за левую часть (Пароль, Адрес e-mail, Дата рождения..), а .profilright - за правую.
CODE:.pformstrip { background-color: #D1DCEB; color:#3A4F6C;font-weight:bold;padding:7px;margin-top:1px }
*например, при создании новой темы .pformstrip отвечает за строку с кнопками "Отправить", "Предварительный просмотр", "Очистить".
CODE:.pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
*встречается всего в одном месте - при вводе логина и пароля в форме входа на форум (левая часть, там, где "Введите Ваше имя" и "Введите Ваш пароль")
CODE:.pformleft { background-color: #F5F9FD; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }
.pformright { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }
*например, при создании новой темы .pformleft отвечает за левую часть (Имя, Название темы, Описание темы..), а .pformright - за правую.
строка 51 - отвечает за текст с описанием форума, модераторами, инфо. о подфорумах..
CODE:.desc { font-size:11px; color:#434951 }
строки 59-60 - отвечают за поле, там, где "Информация о форуме", "Тем", "Ответов", "Обновление"
CODE:.titlemedium { font-weight:bold; color:#3A4F6C; padding:7px; margin:0px; background-image: url(im/tile_up.gif) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #3A4F6C }
строка 61 - в предварительном просмотре отвечает за поле с текстом сообщения
CODE:.titlemedium1 { background-color: #E4EAF2 ; padding:7px; margin:0px; }
строка 63 - например, при просмотре "Кто в on-line?", отвечает за строку после перечня пользователей
CODE:.activeuserstrip { background-color:#BCD0ED; padding:6px }
строка 65 - например, при Регистрации отвечает за ячейку, там, где идет текст "Вы должны согласиться с предложенным соглашением.."
CODE:.tablepad { background-color:#F5F9FD;padding:6px }
(Добавление)
строки 67-69
CODE:.darkrow1 { background-color: #C2CFDF; color:#4C77B6; } - не используется
CODE:.darkrow2 { background-color: #BCD0ED; color:#3A4F6C; } - например, при Регистрации отвечает за ячейку с кнопкой "Я согласен/согласна"
CODE:.darkrow3 { background-color: #D1DCEB; color:#3A4F6C; } - например, при просмотре любого топика отвечает за строку с кнопками "Профиль", "Email", "ICQ", "WWW", "PM".. (в каждом сообщении)
строки 71-74
CODE:.row1 { background-color: #F5F9FD ;padding:5px;margin-top:1px} - например, открыв окно с "Коллекцией смайликов" - отвечает за ячейки со смайликами
CODE:.row2 { background-color: #DFE6EF ;padding:5px;margin-top:1px} - см. скриншот
CODE:.row3 { background-color: #EEF2F7 } - не используется
CODE:.row4 { background-color: #E4EAF2 } - см. скриншот
строки 76-77
CODE:.tdrow1 { background-color:#EEF2F7;border-bottom:1px solid #D1DCEB;border-right:1px solid #D1DCEB ;border-top:1px solid #FFF;border-left:1px solid #FFF;}
*например, встречается в разделе "Поиск" (в форме, там, где "Ключевые слова", "Язык запросов"..)
CODE:.tdrow2 { background-color:#F5F9FD; border-bottom:1px solid #D1DCEB;border-right:1px solid #D1DCEB;border-top:1px solid #FFF;border-left:1px solid #FFF;} - не используется
строка 79 - отвечает за стиль копирайтов, там, где "Powered by.."
CODE:.copyright { text-align:center; font-size: 9px; line-height: 12px }
строки 81-83 - отвечает за стиль кнопок - см. справочник по CSS
CODE:.button input{margin:2px} - можно встретить в кнопках bb-кодов, например, если добавить "background-color:#000", то фон кнопок bb-кодов станет черным
CODE:.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; }
Select, Input { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
*.radiobutton - не используется
строка 86
CODE:.postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(tile_sub.gif) }
*например, при просмотре "Кто в on-line?" отвечает за строку "Имена пользователей", "Время последнего действия", "Последнее действие"
строки 88-92 - отвечают за параметры сообщения при просмотре топика
CODE:.postdetails{vertical-align:top;text-align:right;font-size:10px;width:99%}
.post2 .postdetails{text-align:left; width:auto}
.postdetails div{padding:4px 0; float:left;}
.darkrow3 .postdetails div{padding:0}
CODE:.postcolor { font-size:12px;line-height:160%; width:100%; vertical-align: top;} - стиль ячейки с содержимым сообщения
строка 94 - не используется
CODE:.signature { font-size: 10px; color: #339; line-height:150%; vertical-align : bottom; }
строки 96-97 - цвет авторов сообщения/логинов пользователей (встречается только при просмотре сообщений в топике)
CODE:.normalname{font-size: 12px;font-weight:bold;color:#003; width:1%}
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
строка 99 - скорее не используется
CODE:.unreg{font-size:11px;font-weight:bold;color:#900}
строки 101-102 (встречается только при просмотре сообщений в топике)
CODE:.post1 { background-color: #F5F9FD } - скорее не используется
CODE:.post2 { background-color: #EEF2F7 } - отвечает за ячейку с параметрами пользователя "Звание", "К-во Сообщений", "Дата рег-ции"..
строки 104-105 (встречается только при просмотре сообщений в топике)
CODE:.topic{width:100%;border-collapse:collapse}
.topic td{padding:3px; border:1px solid #FFF}
*border:1px solid #FFF - цвет рамки вокруг (и внутри) сообщения
строка 106 (встречается только при просмотре сообщений в топике)
CODE:.delemiter {background-color: #AEBDD3;height: 5px;font-size: 1px;}
*стиль строки-разделителя между сообщениями
строка 108 (встречается только на странице с ошибкой)
CODE:.tablefill { border:1px solid #345487;background-color:#F5F9FD;padding:6px; }
строки 117-118
CODE:.hintclass {border:1px solid #C2CFDF;background-color: #F0F5FA ;font-size: 8pt;padding: 5px;position: absolute;visibility: hidden;width: 450px;left: 0px;top: 0px;text-align: left;overflow: auto;}
*отвечает за стиль всплывающего окна при просмотре "Первого/Последнего сообщения темы" (например, на главной странице форума) - после клика на синей стрелке, напротив названия темы
CODE:.spaninfo {cursor: pointer; color: #2496D7;font-weight: bolder;} - цвет синих стрелок - см. скриншот
строка 121 - стиль Цитаты (при просмотре сообщений в топике)
CODE:.quote {background-color: #FAFCFE; border: 1px solid #000; padding: 4px; white-space:normal; font-family: Verdana, Arial; font-size: 11px; color: #465584; }
строка 123 - возможно, не используется
CODE:.phpcode {width: 98%;background-color: #FAFCFE; border: 1px solid #000; padding: 4px;color: Teal;font: 15px "Courier New";}
строка 124-125 (при просмотре сообщений в топике)
CODE:.htmlcode {width: 98%;background-color: #FAFCFE; border: 1px solid #000; padding: 4px;color: #00008B;font: 15px "Courier New";} - стиль bb-кода CODE
CODE:.offtop{background-color: #E4EAF2; border: 1px solid #ffffff; padding: 4px;} - стиль bb-кода OFFTOP
строка 129-130 - скорее не используются
CODE:.closeimg {margin: 20px;width: 150px;height: 150px;}
.movedpost {font-size: 10px;}
строка 132 - отвечает за параметры кнопки ICQ (значка онлайн/офлайн)
CODE:.icq {padding: 0px 31px 3px 3px;width: 18px;background-repeat: no-repeat;background-image: url(im/icq.gif); }
строки 134-135 - стиль окна с основными смайликами (слева, при создании новой темы, например) - см. скриншот
CODE:.smile {margin: 0px 5px 0px 5px;border:1px solid #345487;background-color:#F5F9FD;padding: 12px 0px 12px 0px;text-align: center;}
.smile img {cursor: pointer;margin: 4px 8px 4px 8px;}
строка 137 - цвет текущей страницы
CODE:.curentpage {color: darkblue;} |
Сайт проекта ExBB
Чат на форуме
Помощь
Поиск
BanList
ExBB Community » Файловый ExBB » Темы оформления » Обсуждение
Описание: первые шаги и небольшие советы
никак вкурить не могу... Выделил красными стрелочками ну и т.п.
