Как сделать свою тему оформления

[BIOHAZARD]

Первое на что обращает внимание посетитель сайта, это его оформление. Ещё до того, как он успеет прочитать хоть одно сообщение, посетитель уже сложит первое впечатление о сайте/форуме. Наша задача номер один – произвести на потенциального постоянного посетителя хорошее впечатление.

Итак, с чего начинается создание темы?
Начинается оно с визита на официальный сайт и поиска темы, наиболее похожей на тему вашей мечты. Как говорится: «Кто первый спёр, тот и автор»! Хотя можно плясать и от дефолтной темы, но это часто требует несколько больших трудозатрат.

После того, как тема скачана, мы ставим её на свой форум и начинаем разделывать на части. Для этого нам понадобятся: анализатор исходного кода, редактор кода, графический редактор, руки и мозг.

Анализатор кода
Необходим для соотнесения того, что мы видим на странице браузера с конкретным куском кода исходной страницы. Лучше всего здесь подходят Dragonfly, входящий в браузер Opera по умолчанию, и FireFox с установленным плагином Firebug. Какой из них использовать, решать только вам, я предпочитаю Opera 11 и её Dragonfly, поэтому рассматривать методику издевательства над темами буду на их примере.

Редактор кода
Здесь выбор просто царский. Из всего многообразия могу вам посоветовать Notepad++ и swb. Оба этих редактора очень мало весят и их функционала более чем достаточно для наших целей.

Графический редактор
Здесь все всё прекрасно знают, а поэтому останавливаться на этом не будем, тем более, что рисование к нашей теме непосредственного отношения не имеет.

Руки и мозг
Необходимо, чтобы руки росли из нужного места и в мозгу масло ещё не пересохло. Иначе результат может быть непредсказуемым.

Приступим.
Запускаем Оперу и открываем в ней сайт/форум с подопытной темой.
После полной загрузки сайта в верхнем меню браузера выбираем Tools >> Advanced >> Developer Tools. Под загадочным для русской души названием Developer Tools скрывается ни что иное как Dragonfly нажимаем правую клавишу мыши и в выпадающем меню выбираем "проинспектировать элемент", при этом открывается Dragonfly и автоматически выбирается нужный вам элемент в исходном коде.  Первоначально драгонфлай открывается как дополнительное окно ниже окна со страницей сайта.

Из всего, что есть в окне стрекозы (именно так переводится заморское Dragonfly), нам наиболее интересна вкладка DOM, которая и открыта изначально. Чуть ниже ряда вкладок (DOM, Scripts, Network и т.д.) есть ряд кнопок. Нажимаем третью (со стрелочкой) и четвёртую (с двумя прямоугольниками и стрелкой) кнопки, при этом они подсвечиваются зелёным цветом.

Вы готовы? Тогда приступим.

Для начала давайте помашем курсором мыши над страницей в окне браузера, при этом мы видим, что вокруг различных элементов страницы появляется синяя рамка, которая исчезает, как только мы переводим мышь в другое место.
Давайте мы подведём мышь к самому верху страницы, туда, где написано Simple Machines Russian Community и тыкнем в эту надпись левым кликом.

Обратите внимание, что при этом в окне стрекозы появился кусок исходного кола страницы (в левой части) и стили, соответствующие выбранному мышкой объекту страницы (в правой части). Попробуйте потыкать в разные места, при этом данные в стрекозе будут меняться на описывающие конкретный блок.

Замечательно. Мы увидели, из чего сделана страница. И что дальше?
А дальше мы должны засучить рукава и взяться за работу.

Работа?! Придётся поработать

Для начала нам надо определиться с тем, как зависит отображение от исходного кода страницы.

Номер один – это картинки. На самом деле внешность форума зависит от них не так уж и сильно, но переделывать их очень просто, поэтому картинки это наиболее доступный метод воздействия на вид форума для абсолютного новичка. Тыкнув в любой элемент на странице, мы увидим в Dragonfly какая картинка ему соответствует. Далее идём в папку с этой картинкой (обычно в папке Themes\имя темы\images\) и правим её в любом графическом редакторе или вовсе заменяем на свою.

Кроме того, значительная часть внешнего вида определена в файле style.css внутри папки с вашей темой. В этом файле собраны стили для всех элементов страницы, на самой же странице указаны только классы, либо идентификаторы объетов.

Давайте рассмотрим это на примере всё того же заголовка «Simple Machines Russian Community». При его выделении мы видим в левом окне Dragonfly, что ему соответствует тэг H1. Открываем файл style.css редактором кода (вот он и пригодился) и ищем там H1. Не находим? Не беда. Смотрим опять в окно Dragonfly и находим элемент стоящий выше H1 по иерархии, в нашем случае это div class="catbg", и ищем в файле со стилями уже его (по слову catbg).
В файле css мы нашли кусок

Код Выделить Развернуть

.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/catbg.jpg) #88A6C0 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}


обратите внимание, что отвечает он не только за класс catbg, но и за ряд других элементов (catbg3 и др.).
В этом куске мы видим сразу несколько директив, названия которых, как правило, говорят сами за себя:

background – фон элемента: картинка, цвет, повторение картинки;
color – цвет (текста);
padding – отступы внутри элемента в пикселях.

Здесь мы можем изменить цвет текста (подставив необходимое значение вместо #ffffff), фоновую картинку, отступы, можем добавить новые правила (высота элемента, ширина, обрамление).
Также можно не меняя никаких стилей просто заменить картинки, хранящиеся внутри темы, и тем самым изменить вид темы в целом.

Но иногда и этого недостаточно. Иногда хочется произвести более глубокие изменения. Удалить элементы страницы, добавить новые или поменять местами имеющиеся. Здесь переделкой стилей уже не обойтись, придётся переделывать файлы шаблонов.

Все шаблоны хранятся в папке с темой и имеют имена вида что-то.template.php.
Главным шаблоном является index.template.php. Некоторые темы состоят только из этого файла, файла стилей и папки с картинками, все остальные шаблоны берутся из стандартной темы.

Какие ещё есть важные для отображения шаблоны:

Admin.template.php – админка форума (можно не переделывать, посетители всё равно не увидят)
BoardIndex.template.php – список разделов на главной странице, список тем в подразделах
Display.template.php – собственно страница с сообщениями темы
Login.template.php – страница входа на форум
ManagexXxXxX.template.php – управление всем подряд в админке
PersonalMessage.template.php – страница персональных сообщений
Post.template.php – страница отправки сообщения в тему
Printpage.template.php – страница для печати
Profile.template.php – профиль пользователя
Search.template.php – страница поиска и его результатов
Wireless.template.php – страница wap версии форума

Ещё раз повторюсь: как правило достаточно переделать index.template.php, чтобы изменить тему до неузнаваемости. Именно в этом файле находятся шапка и подвал форума, а также «рамка» вокруг основной (содержательной) части страницы. Все остальные шаблоны как бы встраиваются в него.

PS: вся эта статья не имеет ни малейшего значения, если вы не имеете понятия о HTML и CSS. Почитать об этом можно на htmlbook.ru

[BIOHAZARD]

Выше я красочно расписывал способ, при помощи которого можно найти нужный кусок в коде страницы, при этом использовался DragonFly или FireBug.
Но у этого метода есть существенный минус - мы видим кусок сгенерированного кода. А ведь иногда мы даже не представляем, где этот кусок искать, в каком файле он расположен, ведь при генерации страницы может использоваться несколько различных шаблонов из вашей темы за раз и это осложняет нам жизнь, т.к. разыскиваемый кусок может как мозаика состоять из нескольких более мелких фрагментов в коде шаблона. И даже если мы знаем где примерно искать, разобраться в этой мешанине php и html кода бывает затруднительно.

Давайте сегодня с вами глянем на ещё один метод поиска нужных нам фрагментов в коде шаблона. И первым делом нам нужен подопытный...

Давайте взглянем вверх. Предположим, что в нашей новой теме мы хотим поменять расположение надписи "Показать новые ответы на Ваши сообщения.", но прежде чем менять расположение, необходимо узнать, какой блок и в каком файле отвечает за вывод этой строки.

Приступаем к поиску...
Первое, что необходимо помнить, что в smf настроена работа через лангпаки, т.е. код фактически изолирован от текста, именно поэтому форум smf может работать сразу на нескольких языках, хоть каждому пользователю ставь свой - родной. Поэтому любой текст мы будем искать в папке languages в папке с нашей темой, если там его нет, то он находится в папке languages темы default.
Но не будем же мы искать этот текст просматривая каждый файл построчно? Конечно нет - мы используем средства малой механизации труда, а точнее программу TotalCommander, можно использовать и другие, но эта есть практически на каждом компьютере.

Заходим в папку languages, нажимаем Alt+F7 - появляется окно поиска. В нижней части поискового окна отмечаем галкой "С текстом" и вводим в рядом расположенное окно искомое "Показать новые ответы на Ваши сообщения.", отмечаем галочкой "Учитывать регистр символов", если у вас форум в кодировке UTF-8, обязательно отметьте это галочкой в окне поиска, нажимаем "Начать поиск".
В итоге выдаётся список всех файлов в папке (включая содержимое подпапок) с этим текстом. В нашем случае, это всего один файл - index.russian.php.
Нажимаем "Файлы на панель" в нижней части окна поиска, при этом в панели TotalCommander будет построен список всех файлов, содержащих искомый текст.

Дальше уже дело техники: открываем каждый из найденных файлов и ищем в нём строку с нашим текстом. В нашем случае видно, что строка "Показать новые ответы на Ваши сообщения." содержится в переменной $txt['show_unread_replies'].

Теперь нам осталось найти файлы, в которых содержится обращение к этой переменной.
Открываем папку с нашей темой, нажимаем Alt+F7, отмечаем галкой "С текстом" и вводим "$txt['show_unread_replies']". Нажимаем "Начать поиск".

Здесь выдало уже сразу несколько результатов. Во-первых это языковые файлы (которые нам уже не интересны), которых будет столько, сколько языков установлено у вас на форуме; и во-вторых (и это самое интересное) файл шаблона темы index.template.php - именно с ним и будем дальше работать.

Открываем этот файл редактором и ищем в нём эту строку. Находим кусок кода

// If the user is logged in, display stuff like their name, new messages, etc.

if ($context['user']['is_logged'])

{

echo '

<a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a> <br />

<a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a><br />';

}


Чтож, мы это сделали. Теперь вы можете редактировать этот фрагмент по своему усмотрению, перенести его в другое место или вовсе выкинуть из шаблона.

На сегодня всё.

[bazi8]

BIOHAZARD, спасибо! 
Это тема как раз для меня 

[Crashic]

спасибо. пригодилось очень даже.

[Serifa]

Надоело искать подходящую тему! Скопировала дефолтную тему в админке, притаранила туда сворованные откуда-то titlebg и прочие, фон вставила, поменяла цвет ссылок и еще кое-что. Все.

[Maria-Us]

Бесподобнейше!!!
Вот уж,  действительно - век живи, век учись.
Огромное спасибо за эту ветку!

[rellana]

BIOHAZARD
Спасибо за подробный рассказ. Очень пригодилось 

[Acid.Name]

BIOHAZARD  спасибо !!!

+1

[Dazoom]

Спасибо за топик! Но вот никак не могу осилить.

Тема core.

Итак в css файле, catbg является картинкой как бекграунд хедера, так и всех других заголовков рубрик.

.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
   color: #fff;
   font-family: Verdana, Helvetica, sans-serif;
   font-weight: bold;
   background: url(../images/catbg.jpg) #88A6C0 repeat-x;
}
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
   background: url(../images/catbg2.jpg) #A1BFD9 repeat-x;

но я никак не могу понять, как мне убрать этот фон только из хедера, чтобы там была лишь моя картинка, а не эти .catbg2.jpg catbg.jpg    

.catbg отделить от других и отдельно везде прописывать???

[Mavn]

класс css другой прописать для нужного блока тогда и проблем не будет

[Семён]

А как определить с помощью dragonfly, какой стиль у кнопки? Я щелкаю на кнопку серую - "Уведомлять" выводятся одни данные, щелкаю на кнопку верхнего меню - выводятся другие данные. Но не все из них (я про стиль) можно найти в файле index.css Не могу найти какой параметр отвечает за серый фон либо прозрачность кнопки (только текст, пока мышку не наведешь).

[BIOHAZARD]

тыкаем правым батоном в "Уведомлять", выбираем "Проинспектировать элемент"
видим конструкцию

Код Выделить Развернуть

<li>
  <a class="button_strip_notify" href="http://www.simplemachines.ru/index.php?action=notify;sa=on;topic=7551.10;ab4f8bca4=56ac69c59dc72d7e1b4b7765b86c31d3" onclick="return confirm('Вы уверены, что хотите получать уведомления при новых ответах в этой теме?');">
    <span>Уведомлять</span>
  </a>
</li>
указатель стоит на span и выдаются его стили
переходим на уровень выше -  a.button_strip_notify и видим в его стилях

Код Выделить Развернуть

.buttonlist ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(232, 232, 232);
background-image: url("http://www.simplemachines.ru/Themes/default/images/theme/menu_gfx.png");
собственно здесь и прописывается цвет фона кнопок
но не забывайте, что кроме цвета здесь используется ещё и фоновый рисунок

[AnnaVi]

Здорово!!! Огромнейшее спасибо за развернутую тему!

[Серый Лис]

 Автору огромное спасибо! Ну и +