Все замечательно работает, но есть одна неприятная мелочь - сайт у нас зеленый, а форумы по умолчанию показываются в синих тонах.
Конечно, хочется раскрасить форум в свои цвета. Посмотрим, какие у нас есть для этого возможности.[spoiler]
Первая возможность, которая приходит на ум - воспользоваться штатным механизмом копирования шаблона компонента с последующей модификацией шаблона.
1. Переходим в режим редактирования сайта.
2. Нажимаем кнопку "Копировать шаблон":
3. Задаем имя и местоположение шаблона, сохраняем:
4. Теперь мы можем для каждой части компонента нажимать на кнопку "Редактировать CSS-файл шаблона" и изменять стили:
Если удобнее работать с файлами, то заходим в папку /bitrix/templates/.default/components/bitrix/forum/template1/bitrix/ и проходим по всем шаблонам дочерних компонентов, исправляя CSS-файлы.
Преимущества. Мы получили свой шаблон, в котором можем изменить не только CSS-файлы, но и полностью изменить представление форума в HTML, редактируя шаблоны дочерних компонентов.
Недостатки. Мы получили свой шаблон, но потеряли возможность получать обновления стандартного шаблона. Да, сами компоненты остались стандартными и будут обновляться. Но изменения в шаблон нам придется вносить самим после каждого обновления.
Есть ли способ изменить внешний вид форума, но получать все будущие обновления как компонента, так и шаблона? Да, есть - благодаря тому, что внешний вид форума в основном задается через каскадные стили, включая иконки.
Суть изменений состоит в том, чтобы переопределить заданные в шаблонах форума определения стилей. Сделать это можно разными способами:
1) включить определение стилей в таблицу стилей из шаблона сайта. Наши определения будут работать, потому что стили шаблона сайта подключаются последними. Недостатком является то, что стили форума будут подключаться на каждой странице сайта (ненужный трафик плюс риск пересечения стилей);
2) вынести определение форумных стилей в отдельный файл и подключать его только на странице с компонентом форума. Здесь нужно следить, чтобы наши стили подключались после вызова компонента.
Итак, создадим в шаблоне текущего сайта файл, например, forum_styles.css. Начнем "перетаскивать" туда нужные нам стили и переопределять их там.
На странице с компонентом подключим этот файл:
<?
$APPLICATION->IncludeComponent("bitrix:forum", ".default", Array());
$APPLICATION->SetAdditionalCSS("/bitrix/templates/".SITE_TEMPLATE_ID."/forum_styles.css");
?> |
Преимущества. Мы раскрасили форум в рамках стандартного компонента и стандартного шаблона. Все обновления мы будем получать автоматически.
Недостатки. Все-таки остается некоторая возможность того, что стандартный шаблон определит новые стили или изменит существующие. В этом случае нам придется подправить наш файл стилей. Но это намного легче, чем внесение изменений в скопированный шаблон.
Таким образом, мы получили зеленый форум.
Вот список стилей, которые пришлось переопределить на одном из проектов. Эти стили собраны из разных дочерних компонентов:
/*Other*/
div.forum-hr {background-color: #E7ECE6;}
div.forum-br {height: 8px;}
table.clear {font-family: Arial, Helvetica, sans-serif; font-size: smaller;}
/*Forum menu*/
table.forum-menu {border-left: 1px solid #DAE7DF; border-top: 1px solid #DAE7DF; font-family: Verdana, Arial, Helvetica, sans-serif; }
table.forum-menu td.forumtoolbar {background-color: #E7F1EB; border-left: 1px solid #FFFFFF;border-top: 1px solid #FFFFFF; border-right: 1px solid #B7D0C1; border-bottom: 1px solid #B7D0C1; }
.forumtoolsection {border-left: 1px solid #FFFFFF;border-top: 1px solid #FFFFFF; border-right: 1px solid #B7D0C1; border-bottom: 1px solid #B7D0C1; }
.forumtoolseparator {border-left: 1px solid #B7D0C1;border-right: 1px solid #FFFFFF; }
/* menu popup */
table.forum-menu-popup-table td {height: 21px !important;}
.forum-menu-hidden-in {border: 1px solid #B7D0C1;}
table.forum-menu-popup-table td, table.forum-menu-popup-table td a { color: black;}
table.forum-menu-popup-table td.forum-menu-popup, table.forum-menu-popup-table td.forum-menu-popup-hover {border: none; background-color: #F9FBF9; }
table.forum-menu-popup-table td.forum-group{background-color:#F9FBF9; color:black;}
table.forum-menu-popup-table td.forum-menu-popup-hover {background-color: #EDF4EC;}
div.forum-group{background-color:#F9FBF9; font-weight:bold; color:#45777C;}
/*Forum index and list*/
table.forum-main {font-family: Arial, Helvetica, sans-serif; font-size: smaller;border: 2px solid #D5DED3;}
table.forum-main td {background-color:#F9FBF9;border: 1px solid #D5DED3;}
table.forum-main th {background-color:#EDF4EC;border: 1px solid #D5DED3;color: #45777C;vertical-align: top;}
.forum-attention {font-size: 95%;}
.icon-new-message, .icon-no-message, .icon-na, .icon-closed-new-message, .icon-closed-no-message {width: 17px;height: 11px;}
.icon-new-message {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/f_norm.gif");}
.icon-no-message {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/f_norm_no.gif");}
.icon-closed-new-message {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/f_closed_norm.gif"); }
.icon-closed-no-message {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/f_closed_norm_no.gif"); }
.icon-na {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/f_na.gif"); }
a.forum-button:link,a.forum-button:visited,a.forum-button:active,a.forum-button:hover {background: #E7F1EB;border: 1px solid #B7D0C1;color: #456A74;}
table.forum-main td small {font-size:100%;}
table.forum-main td.forum-group {background-color:#EDF4EC; color:#45777C;}
div.forum-title {border: 1px solid #D5DED3; padding: 5px; background-color: #EDF4EC; color:#45777C; font-size: smaller; font-weight:bold; font-family: Arial, Helvetica, sans-serif;}
/*Forum messages*/
table.forum-message {font-family: Arial, Helvetica, sans-serif; font-size: smaller;}
table.forum-message td {background-color: #F9FBF9;border: none;}
table.forum-message td.forum-message-user-info {background-color: #F9FBF9;border: 2px solid #D5DED3;border-right-width: 1px;}
table.forum-message td.border-top {border: 2px solid #D5DED3;border-left-width: 1px;border-top: none;}
table.forum-message td.border-bottom {border: 2px solid #D5DED3;border-left-width: 1px;border-bottom: none;}
table.forum-quote {width:90%;margin:0px 0px 0px 16px;}
table.forum-quote th {font-weight:bold;color: #45777C; padding: 3px; text-align:left;}
table.forum-quote td {background-color: #F0F4F0; border-top : 1px solid #B9C9B6; border-bottom : 1px solid #B9C9B6; padding: 3px; }
table.forum-message table.clear{font-size: 100%;}
table.forum-message .forum-message-posts, table.forum-message .forum-message-status, table.forum-message .forum-message-datereg, table.forum-message .forum-message-datecreate {color:#45777C;}
table.forum-message .forum-message-description {margin-bottom:8px;}
table.forum-message .forum-message-signature {color:#919191;margin-top: 16px;}
a.forum-button-small,a.forum-button-small-vote,a.forum-button-small-unvote {background-color: #D9E7DE;background-image: url(/bitrix/images/forum/button_bg.gif); border: 1px solid #ADC5B7;color: #456A74; font-family:Verdana,Arial,Hevetica,sans-serif; font-size: 11px; height:20px;padding: 2px 5px 2px 5px;box-sizing:border-box; -moz-box-sizing:border-box;}
a.forum-button-small:hover,a.forum-button-small-vote:hover,a.forum-button-small-unvote:hover {color: #456A74; }
/*Forum statistics*/
table.forum-stat {font-family: Arial, Helvetica, sans-serif; font-size: smaller;}
table.forum-stat th {background-color:#EDF4EC;border: 1px solid #D5DED3;color: #45777C;font-weight:bold;padding:5px;}
table.forum-stat td {background-color:#F9FBF9;border: 1px solid #D5DED3;}
table.forum-stat .forum-attention{font-size: 100%;color: black;}
.icon-users, .icon-birth, .icon-stat {width: 32px;height: 32px;margin: 5px;}
.icon-users {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/users.gif"); }
.icon-birth {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/users_bith.gif"); }
.icon-stat {background-image:url("/bitrix/templates/bitrix.3.x/forum/images/stat.gif");}
/*Post form*/
table.forum-post-form {font-family: Arial, Helvetica, sans-serif; font-size: smaller;border: 2px solid #D5DED3;}
table.forum-post-form td {background-color:#F9FBF9;border: 1px solid #D5DED3;}
table.forum-post-form th {background-color:#EDF4EC;border: 1px solid #D5DED3;}
table.forum-post-form #tagcount {font-size: 100%;}
table.forum-post-form #helpbox {font-size: 100%;color: #919191;}
table.forum-smile {border: 1px solid #D5DED3;}
table.forum-smile th {background-color:#EDF4EC;border: 1px solid #D5DED3;}
table.forum-smile img { margin: 0px;}
textarea#POST_MESSAGE{width:100%;}
table.forum-post-form input#B {font-weight:bold;}
table.forum-post-form input#I {font-style:italic;}
table.forum-post-form input#U {text-decoration:underline;}
/* Only for user-profile*/
table.fuser {font-family: Arial, Helvetica, sans-serif; font-size:smaller;}
table.fuser-static th {background-color:#EDF4EC; border:1px solid #D5DED3;}
table.fuser-static td {background-color:#F9FBF9; border:1px solid #D5DED3;}
/* Tab controls*/
table.tabs {border-left:1px solid #D5DED3;}
table.tabs td {font-family: Arial, Helvetica, sans-serif; }
table.tabs td.tab-indent-left {border-bottom:1px solid #D5DED3;}
table.tabs td.tab-indent-right {border-bottom:1px solid #D5DED3;}
table.tabs td.tab-container {border:1px solid #D5DED3; border-left: none;}
table.tabs td.tab-container-selected {border:1px solid #D5DED3; border-bottom:1px solid #F9FBF9; border-left: none; background-color:#F9FBF9;}
table.tabs table td.tab {border-top:2px solid #F9FBF9;}
table.tabs table td.tab-selected {border-top:2px solid red;}
table.tabs table td.tab-hover {border-top:2px solid #D1E4D9;}
/* Tab inside edit form */
table.tab {border:1px solid #D5DED3; border-top:none;}
table.tab td {background-color:#F9FBF9;}
/*PM only*/
div.out {border-color:#D5DED3; background-color: #ffffff;}
div.in {background-color: #008040;}
div.in1 {font-family:Verdana,Arial,Helvetica,sans-serif; color:black; font-size:10px;} |
<link href="/bitrix/components/bitrix/forum/templates/.default/bitrix/forum.menu/.default/style.css" type="text/css" rel="stylesheet" />
<link href="/bitrix/components/bitrix/forum/templates/.default/bitrix/forum.index/.default/style.css" type="text/css" rel="stylesheet" />
Нужно по всем папочкам пробежать понасобирать стили от разных частей форума.
Проверить картинки и перегрузить их в локальный шаблон.
А нет ли такого готового волшебного файла со всеми стилями и папочки со всеми картинками?
А не подскажете ли, как кастомизировать компонент форума для изменения направления сортировки сообщений в пределах каждой темы? То есть, добиться того, чего нет в стандартном функционале этого компонента: отображение новых сообщений в начале списка?
Буду премного благодарен за совет!!!