Здесь мы рассмотрим такие часто задаваемые вопросы как: "Как заменить стандартный логотип?", "Как изменить фон шапки?", "Как уменьшить ширину форума?" и многое другое...
Допустим, вы захотели создать свой собственный форум. Вы ввели в поиск "Создать форум бесплатно", вам выдало кучу ссылок на различные хостинги. Вы выбрали один из них и создали полностью работоспособный, настроенный форум. Но теперь вы хотите изменить его, сделать что-то, чего еще нет ни у кого, что-то своё, придать своему проекту изюминку. Пути решения у нас два. Первый, заказать работу профессионалу и он в оговоренный срок, за определённую сумму, предоставит вам готовый продукт: сайт, форум, личный блог, то что вы хотите. Второй, на мой взгляд самый лучший, это попробовать создать дизайн самому. Это в первую очередь нужно именно вам, так как по мере существования форума вам предстоит не раз вносить какие нибудь изменения.
Давайте попробуем разобраться во всём помаленьку, попробуем узнать азы. Для более профессионального знания HTML и CSS вы можете почитать соответствующую литературу, кой в интернете полно.
В основу мы берём наиболее популярный движок для форумов phpbb3.
Для внесения изменений нам потребуется доступ к стилю который вы хотите изменять: Тема стиля и его Шаблоны. В шаблонах содержится верстка, таблица, html основа вашего стиля. В теме, то как должны выглядеть те или иные объекты, картинки, цвета, в общем всё оформление.
Стили бывают двух видов, вернее всего основа всех стилей бывает двух видов - prosilver и subsilver2. Теперь нам потребуется узнать, клон какого стиля является ваш стиль. Отличить их очень просто, в prosilver верста основана на <div>, <dt>, <dd> и подобному. В subsilver2 - <table>, <tr>, <td>.
Мы будем работать с prosilver.
Главные составляющие страницы это overall_header.html и overall_footer.html. index_body.html - информация размещенная в этом шаблоне будет отображена только на главной странице.
За стиль, красоту нашего форума отвечает набор CSS в теме нашего стиля. То как будет выглядеть наш форум в первую очередь зависит именно от CSS.
Мы не будем углубляться в изменение всех шаблонов, а попробуем изменить только главные составляющие и уже на их примере вы сможете вносить свои изменения.
Начнём с того что нам захотелось изменить задний фон, белый это не интересно, лучше вставить какую нибудь картинку. Хотелось бы сразу предупредить, что та картинка, которая вам так нравится и которая очень красиво выглядит на рабочем столе вашего компьютера, не будет так же выглядеть на фоне вашего форума. А всё потому, что размеры экрана у всех разные и картинка может быть некрасиво обрезана, либо начать повторяться на более большем разрешении. Ещё одна не мало важная часть, так это вес той картинки которую вы хотите установить. Ибо чем меньше вес страницы, тем она быстрее загружается, тем лучше для пользователей со слабым интернетом и тех пользователей которые зашли к вам с мобильного.
Самый оптимальный вариант, это использовать небольшую бесшовную картинку, либо просто любой цвет.
Устанавливаем свою картинку, находим:
Код: Выделить всё
body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #828282;
/*font-size: 62.5%; This sets the default font size to be equivalent to 10px */
font-size: 10px;
margin: 0;
padding: 1px 0;
}
Код: Выделить всё
background: url("ссылка на картинку") repeat fixed 0% 0% #FFFFFF;
- repeat - повторение картинки
- fixed - фиксированное положение на экране
- 0% 0% - начальное положение фонового изображения (по горизонтали и вертикали)
- #FFFFFF - цвет фона, если фоновое изображение не будет загружено или если изображение имеет прозрачность.
Код: Выделить всё
html, body {
background-color: #FFFFFF;
color: #536482;
}
Код: Выделить всё
background-color: #FFFFFF;
Как уменьшить ширину форума?
Есть два варианта сделать ширину форума уже. Это фиксированный и резиновый размер.
Находим:
Код: Выделить всё
#wrap {
padding: 0 20px;
min-width: 650px;
}
Меняем на:
Код: Выделить всё
#wrap {
padding: 0 20px;
min-width: 650px;
width: 900px;
margin: 0 auto;
}
Резиновый.
Меняем на:
Код: Выделить всё
#wrap {
padding: 0 20px;
min-width: 650px;
width: 90%;
margin: 0 auto;
}
Форум будет 90% от размера экрана пользователя, но не менее 650px.
Допустим, мы изменили размеры нашего форума и фоновую картинку, и теперь информация расположенная вне категорий стала плохо видна, как не подбирая цвет надписей, часть видно, часть нет. В этом случае можно оформить наши категории "белым листом".
Находим, допустим наш уже изменённый фиксированный #wrap:
Код: Выделить всё
#wrap {
padding: 0 20px;
min-width: 650px;
width: 900px;
margin: 0 auto;
}
Код: Выделить всё
background-color: #FFFFFF;
Код: Выделить всё
background: url("ссылка на картинку") repeat scroll 0 0 #FFFFFF;
Как сделать форум полупрозрачным?
Например, нам нужна прозрачность только заднего фона (#wrap), без самих форумов, то это можно сделать с помощью полупрозрачной png картинки, либо с помощью CSS3, rgba цвет.
Это будет выглядеть следующим образом:
Код: Выделить всё
#wrap {
width: 940px;
margin: 0 auto;
padding: 10px;
min-width: 940px;
background-color: rgba(250, 250, 250, 0.8);
}
Например на нам ещё понадобилось сделать полупрозрачным и сам форум, но не задевая шапку. Применяем opacity только к телу форума, #page-body:
Код: Выделить всё
#page-body {
margin: 4px 0;
clear: both;
opacity: 0.70;
}
Так как opacity тоже относится к CSS3, как и rgba цвет, то прозрачность будет опять же работать только в современных браузерах, в IE начиная с 9 версии. Исправляется это добавлением фильтра для IE и специального кода для старых версий Firefox:
Код: Выделить всё
#page-body {
margin: 4px 0;
clear: both;
opacity: 0.70;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
}
Теперь давайте разберёмся с overall_header.html. Всё то, что содержится в этом шаблоне будет отображено верху форума, на каждой его странице. Помните об этом.
Самое первое что нам обычно хочется это поменять стандартный логотип.
Если нам нужно просто поставить другую картинку в это же место, то идем в Наборы изображений, далее в ваш стиль - Главный логотип.
Если нам нужно поставить картинку по центру или логотип состоящий из двух, или трёх, картинок, то идем в overall_header.html. Ищем:
Код: Выделить всё
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
</div>
{SITENAME} - название форума.
{SITE_DESCRIPTION} - описание форума.
Если вам это не нужно - удаляем. Оставляем:
Код: Выделить всё
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}"><img src="ссылка на изображение" /></a>
</div>
Код: Выделить всё
<div id="site-description" align="center">
<a href="{U_INDEX}" title="{L_INDEX}"><img src="ссылка на изображение" /></a>
</div>
У нас есть три варианта: соорудить в фотошопе свою картинку, или найти в интернете, использовать одноцветный фон, либо вообще отказаться от цветового выделения нашей шапки.
Итак, цветовое оформление шапки находится, ищем:
Код: Выделить всё
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
}
Код: Выделить всё
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
Код: Выделить всё
background-color: #12A3EB;
Код: Выделить всё
color: #FFFFFF;
Код: Выделить всё
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
Код: Выделить всё
background: #ebebeb none repeat-x 0 0;
- Если вы не можете найти визуально какой либо кусок, воспользуйтесь функцией браузера - "Найти" (Ctrl+F)
- page-headerbar - верх (шапка)
- page-body - тело
- page-footer - низ (подвал)
Итак, что ещё у нас осталось вверху форума? Поиск:
Код: Выделить всё
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
Вбиваем в поиск search-box и находим:
Код: Выделить всё
/* Search box
--------------------------------------------- */
#search-box {
color: #FFFFFF;
}
#search-box #keywords {
background-color: #FFF;
}
#search-box input {
border-color: #0075B0;
}
Хорошо, с логотипом и поском вроде всё понятно, теперь нам захотелось переделать стандартное меню навигации. Например, стало необходимо добавить ссылку: на сайт, портал, поиск (если была удалена форма), либо убрать что либо не нужное на ваш взгляд. Ищем:
Код: Выделить всё
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="linklist navlinks">
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
</ul>
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="icon-ucp">
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> •
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- IF U_RESTORE_PERMISSIONS --> •
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->
<ul class="linklist rightside">
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
Всё что расположено между <ul class="linklist leftside"> ... </ul>, будет находится слева, о чем нам говорит слово leftside
Всё то, что расположено между <ul class="linklist rightside"> ... </ul>, будет находится соответственно справа.
Что бы добавить свою ссылку, в нужное место вставляем:
Код: Выделить всё
<li><a href="ссылка" title="текст всплывающей подсказки">название</a></li>
Код: Выделить всё
<li><a href="ссылка" title="текст всплывающей подсказки"><img src="картинка" width="16" height="14" /> название</a></li>
Код: Выделить всё
<li class="icon-test"><a href="ссылка" title="текст всплывающей подсказки">название</a></li>
Код: Выделить всё
.sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search {
background-position: 0 50%;
background-repeat: no-repeat;
background-image: none;
padding: 1px 0 0 17px;
}
Код: Выделить всё
.icon-test {
background-image: url("ссылка на изображение");
background-position: 0 50%;
background-repeat: no-repeat;
padding: 1px 0 0 17px;
}
- Вместо test пишите то, что хотите, но меняем и в CSS и в навигации
Код: Выделить всё
.navbar {
background-color: #cadceb;
}
Для полного изменения нашего меню нужно обладать познаниями в CSS и HTML. Гораздо проще воспользоваться уже готовыми навигациями и следуя инструкции прикрутить к своему форуму. Родное меню соответственно удалить.
Ну вроде всё, самое главное мы разобрали. Как поменять картинку в шапке и цвет её фона мы поняли, как добавить нужный элемент в навигацию тоже. Далее будем разбирать тело и подвал форума.
Мы разобрали как поменять оформление верхней части форума, сейчас мы попробуем изменить дизайн основной его части. Тело форума на главной странице. За то, что отображается на главной странице форума (списке форумов) отвечает шаблон index_body.html.
Отображение статистики, "кто сейчас на конференции", "дней рождения участников", форма входа для не вошедших в систему пользователей.
За отображение списка форумов отвечает - <!-- INCLUDE forumlist_body.html --> - т.е. шаблон forumlist_body.html
Начнём с цвета категории списка форумов.
За цветовое оформление полоски с названием форума отвечают куски в CSS:
Код: Выделить всё
.forabg {
background: #b1b1b1 none repeat-x 0 0;
margin-bottom: 4px;
padding: 0 5px;
clear: both;
}
Код: Выделить всё
.forabg {
background-color: #0076B1;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Код: Выделить всё
ul.forums {
background-color: #eef5f9;
background-image: url("{T_THEME_PATH}/images/gradient.gif");
}
Код: Выделить всё
ul.forums {
background: #f9f9f9 none repeat-x 0 0;
}
За изменение цвета при наведении мышки на форум отвечают, т.е. если удалить один цвет, то будет работать другой:
Код: Выделить всё
li.row:hover {
background-color: #F6F4D0;
}
li.row:hover {
background-color: #F6F6F6;
}
Код: Выделить всё
li.row:hover dd {
border-left-color: #CCCCCC;
}
li.row:hover dd {
border-left-color: #CCCCCC;
}
- По этому же принципу меняем дизайн тем в форуме. Только с другими классами. .forumbg, li.row, .bg1 и .bg2.
Допустим мы изменили цвета на свои, плюс у нас изменён цвет фона форума и у нас по углам категорий стало видно белые уголки, которые перестали вписываться в наш дизайн. Избавится от них мы можем двумя способами, всё зависит от того чего вы хотите добиться. Создать закругление или сделать прямые углы, или сделать закругление только с определённой стороны.
Вам нужны уголки другого цвета, под цвет вашего фона. Вам придётся их нарисовать самому и заменить встроенные:
Код: Выделить всё
span.corners-top {
background-image: url("{T_THEME_PATH}/images/corners_left.png");
}
span.corners-top span {
background-image: url("{T_THEME_PATH}/images/corners_right.png");
}
span.corners-bottom {
background-image: url("{T_THEME_PATH}/images/corners_left.png");
}
span.corners-bottom span {
background-image: url("{T_THEME_PATH}/images/corners_right.png");
}
Код: Выделить всё
<!-- BEGIN forumrow -->
<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->
<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
Код: Выделить всё
<span class="corners-top"><span></span></span>
Код: Выделить всё
<!-- IF forumrow.S_LAST_ROW -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->
<!-- BEGINELSE -->
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_NO_FORUMS}</strong>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- END forumrow -->
Код: Выделить всё
<span class="corners-bottom"><span></span></span>
- Главное случайно не удалите закрывающий </div>.
Шаблон overall_footer.html.
В этот шаблон входит то, что отображается снизу форума, на каждой его странице. Это навигация, почти такая же как и наверху, но имеет только одну ссылку на список форумов, не отображая разделы. За вместо разделов навигация отображает такие функции как: "Подписаться на тему", "Поднять тему", "В закладки".
Далее идёт copyright. Информация которую не нужно менять, но можно дополнить, особенно это может иметь смысл, если вы вносили какие-то дизайнерские изменения в стандартный шаблон, что-то, что нарисовали сами или создали с помощью CSS. На мой взгляд не уместно вставлять в копирайт своё "имя" если вы изменили только значки к форумам и шапку. Но это лично моё мнение.
Итак, вы изменили дизайн и хотите это указать в "подвале" вашего форума.
Ищем:
Код: Выделить всё
<div class="copyright">
Код: Выделить всё
Дизайн создан <a href="/">Ваше имя</a><br />
Код: Выделить всё
<!-- IF U_MCP --><strong><a href="{U_MCP}">{L_MCP}</a></strong> <!-- ENDIF --><!-- IF U_ACP --><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
</div>
- Может немного отличаться, всё зависит от стиля, нам нужен закрывающий </div> от <div class="copyright">
Автор: CabinetAdmin
Источник: http://cabinetadmina.ru/
Похожие темы
-
Здравствуйте.
Подскажите, в prosilver максимально какого размера можно поставить шрифт, чтобы было адаптивно?