Для Начинающих…
Haliff3007
Haliff3007@ya.ru
Многие меня и Лорда спрашивали, как делать темы, как их переделывать? Приходилось очень много отвечать в постах, пока не пришла на ум написать этот туториал. Итак, поехали!
Данный туториал предназначен для людей, которые хоть-что то умеют делать в Html.
Он призван обеспечить более легкую переделку\создание тем для AntiSlaed CMS. Для начала предлагаю вам ознакомится с основными переменными и файлами.
Часть Первая – Переменные и структура файлов системы.
Переменные.
* В определенных файлах используются только свои переменные. То есть переменные от файла comment.html - $name – в файле Index.html работать не будет!
Файл index.html
* Прежде всего в файлах не нужно, точнее не стоит прописывать прямые пути, ведь вы случайно сможете переместить или переименовать папку, тогда придется все переписывать снова. Что избежать этого, пользуйтесь переменной $ThemeSel
Пример – “templates/$ThemeSel/picture.jpg”
К сожалению я должен вас огорчить – в файлах .css использовать переменные не получится.
Переменные файла:
$ThemeSel - Автоматические подставляет текущее название папки темы.
$theuser - Выводит СпидБар с информацией. Изменить можно в function/template.php на строке 62 и 64.
$home - Ссылка на главную.
$s_profil - Ссылка на аккаунт
$s_recomm - Ссылка на рекомендацию сайта ( ставить не стоит, так как модуль Recommended в АС отсутствует )
$s_feed - Ccылка на обратную связь
$s_favoriten - Ссылка добавить в закладки ( для работы необходимо скопировать Java код от стандартной темы. Рассмотрено будет позже )
$startseite $s_startseite - Cделать стартовой.
$homeurl - Ссылка на главную ( Используется вместо прописания прямой ссылки )
$sitename - Название сайта ( Используется , в основном в теге “alt” Лого темы )
{%BLOCKS left%} Вывод левых блоков
{%BLOCKS right%} Вывод правых блоков
{%BLOCKS message%} Вывод сообщения
{%BLOCKS center%} Вывод блоков центральных позиций
{%MODULE%} Вывод модуля
{%BLOCKS down%} Вывод блоков нижних позиций
{%BLOCKS time%} Вывод блока генерации страницы
{%LICENSE%} Вывод копирайтов
{%BLOCKS foot%} Нижний блок-баннер
{%BLOCKS variables%} {%BLOCKS query%} Вывод блока количества запросов в базу данных
$s_home | $s_news | $s_album | $s_faq | $s_pages | $s_recomm | $s_feed
Думаю и так понятно, в обяснениях не нуждается.
{%HEAD%} Вывод мета-тэгов, ставится между тэгами <head></head>
Файл basic.html
* Оформление новостей.
Для смены вывода для определенного модуля вида новостей, копируем файл и сменим название на basic-[Название модуля].html
Файл Basic.html отвечает за оформление новостей модуля News
Давайте теперь рассмотрим переменные оформления новостей.
Переменные файла.
$title - Вывод заголовка
$topicimage $content - Вывод картинки категории и самого текста новости.
$morelink - Ссылка на полную новость\вывод рейтинга\количества комментариев. Вывод всего этого настраивается в конфиге модуля News через админку.
Файл block-all.html
* Оформление всех блоков
Используются одинаковые переменные для файлов системы оформления блоков.
Переменные файла.
$title - Вывод заголовка блока
$content - Вывод контента блока.
Файлы block-center.html block-down.html block-left.html block-right.html message-box.html title.html
* Обьяснять думаю не надо – и так все понятно по названиям.
Файл comment.html
* Вывод комментариев.
Используется для оформления вида комментариев.
КСТАТИ! Этот файл отвечает только за выведенные комментарии, а так как все комментарии закрываются сплошной таблицей, то нет смысла менять начинку. Можно менять сам вывод комментов, это зависит только от вашей фантазии!
Переменные файла.
$name – Имя юзера
$avatar – Аватар Пользователя
$text – Вывод сообщения
$rate – Рейтинг Юзера
$link – Ccылка на домашнюю страницу и остальное в этом роде
$info – Выводит количество пунктов юзера и когда оставлен комментарий.
Файл prints.html
* Выводит оформление для печатной версии новости.
КСТАТИ! Расширять основную колонку , более чем ширина формата А4 не стоит – новость просто не напечатается полностью.
Переменные файла
$ptitle – Заголовок
$text – Вывод новости
$url – Ccылка на новость
Также в стандартной теме выводится Лого вашего сайта.
Файл search.html
* Выводит содержимое модуля Search.html
Менять не рекомендуется.
Файл Open-table.html и Close-table.html
* Выводит всем известные OpenTable и CloseTable
Функция проста.
В указанное место модуля, где прописана она, подключаются эти файлы.
В Главе Переделка мы рассмотрим его поподробней, ведь эта одна из главных заключающих дизайна сайта.
Файл warning.html
* Выводит информацию об ошибке и текст ее
Часть Вторая – Переделка тем от DLE.
Уфф… Что то я устал писать ).
Я не буду приводить , какие файлы оформления дле за что отвечают, поскольку это займет очень много моего времени и сил. И вашего, кстати тоже. Поэтому буду излагать четко, коротко и ясно – из какого файла куда-что вставлять и какие переменные писать. Если вы будете придерживаться этой главы, у вас должно получится все нормально. Предупреждаю сразу – сложные XHTML/CSS 2 темы лучше не браться переделывать при не знании этих языков – у вас не знаю что может получится. Перед переделкой, желательно потестить скин на ДЛЕ и увидеть как он выглядит, и после основной переделки приводить скин к оригиналу. А может быть и переделывать дальше – все зависит от вас. Также желательно, чтобы скин был более-менее хорошо сверстан и в нем отсутствовали более-менее банальные ошибки. Перед переделкой, рекомендую загрузить к себе на компьютер две программы, которые вам очень понадобятся – это NotePad ++ v3.9 и более свежие версии. Загрузить можно с офф. Сайта - http://notepad-plus.sourceforge.net/
Далее рекомендую загрузит другой вспомогательный инструмент – это Nvu версии 1.0
Загрузить можно отсюда: http://mozilla-russia.org/
Этот инструмент нужен больше для рипания шаблонов и тестов скинов.
Если вы не занимаетесь ни тем ни другим – все равно загрузите, он бесплатен, обладает хорошим функционалом и он еще пригодится для пре-теста темы.
Если вы скачали – тогда начинаем.
КСТАТИ! Оговорюсь сразу – если пишу «открываем ****.html и ****.tpl» то .html – это файл вашей темы АС , а файл .tpl – это файл темы DLE которую вы хотите переделать!
Скачиваем любой скин от ДЛЕ не младше версии 5.7
Копируем в корневой директории тем папку Stability
Разархивируем скин от дле в любую папку, переносим содержимое папки images от дле в папку images вашей будующей темы АС.
Открываем NotePad ++’ом файл index.html и main.tpl
Из main.tpl в файл Index.html копируем в самый низ все, сделав несколько отступов.
Нажимем ctrl+f и вводим в поле название темы:
Сначала смотрим пути к теме, если название, то подставляем название, если же относительный тэг {THEME} то вводим его.
Потом кликаем по «Поиск\Замена» и вводим во второе поле «templates/$ThemeSel»
Впрочем, смотрите на картинку:
Затем копируем файл темы dle – style.css в корневую нашей темы АС , предварительно сменив название на global.css или любое другое.
Затем находим тэг {headers} и меняем его на {%HEAD%}
Стираем строку <link type="text/css" rel="stylesheet" href="{THEME}/css/engine.css">
И под {%HEAD%} пишем
<link type="text/css" rel="stylesheet" href="templates/$ThemeSel/global.css">
Закроываем тэгом </head>
Делаем один отступ и вставляем код от стандартной темы:
<script language="JavaScript" type="text/javascript">
<!--
function bookmark() {
if (window.sidebar) {
window.sidebar.addPanel("$sitename", "$homeurl","");
} else if (document.all) {
window.external.AddFavorite("$homeurl", "$sitename");
}
}
// -->
</script>
Убираем тэг AJAX
Ищем
{info}
{content}
Меняем их на
{%BLOCKS message%}
{%BLOCKS center%}
{%MODULE%}
{%BLOCKS down%}
Затем стираем сверху остатки кодов старой темы, сохраняемся, выходим.
Идем в админку, в конфигурации, активируем тему ( НЕ ЗАБЫВАЕМ СМЕНИТЬ СНАЧАЛА НАЗВАНИЕ С Копия Stability на СВОЕ!!!)
Открываем наш тестовый сайт через Оперу и тестим.
Если не отображаются картинки, идем в папку темы\global.css и все относительные пути меняем на http://site.ru/templates/Your_Template_Name/
Сохраняем, снова тестим в опере.
Если все окей, идем в Basic.html
Открываем нотпадом++ и сделав два отступа копируем туда содержимое файла shortstory.tpl
Также меняем пути ( Смотри выше – пример {THEME}
{title} меняем на $title ( Переменные basic.html Описаны выше )
[full-link][/full-link] и все тэги стираем с их содержимым.
Вместо [full-link][/full-link] ставим $morelink
Вместо {short-story}ставим $content
Также стираем ненужные картинки ( типо edit.png и т.д )
Открываем Оперой, тестим.
Теперь займемся блоками.
Открываем файл Index.html
Находим таблицы с нужными блоками ( левыми )
Вырезаем.
Один блок копируем в block-left.html
Там стандартное стираем, вместо заголовка вставляем тэг $title
Стираем также контент блока, вставляем вместо него тэг $content
Ту же операцию проделываем с правыми блоками, только вместо block-left.html копируем в block-right.html
Часть Вторая – Переделка тем от DLE – Продолжение
В этом продолжении мы рассмотрим переделку основных, главных состовляющих элементов дизайна вашего сайта.
Прежде всего нам надо оформить open-table и close-table.
Именно они отвечают за вывод шаблонов, которые прописаны в модулях.
Для этого откроем файл info.tpl и начнем редактировать его.
Скопируем содержимое в файл table-open.html
Cразу видим тэг {error} все вплоть до него оставляем – остальное командой вырезать вычищаем из файла.
Таблицу с тэгом {title} нам в оформлении не нужна, поэтому смело трем ее.
Также не забываем сменить пути быстрой командой ( описана выше ) с {THEME} на templates/$ThemeSel
Затем открываем файл table-close.html и командой «Вставить» вставляем нижний код, который мы вырезали выше.
Также меняем пути, сохраняем.
Вот пример, чтобы вам было понятно:
Это файл table-open.html
<table width="578" border="0" cellpadding="0" cellspacing="0"><tr><td height="14" background="templates/$ThemeSel/images/n_n_01.gif"></td></tr></table><table width="578" border="0" cellpadding="0" cellspacing="0" background="templates/$ThemeSel/images/n_n_02.gif"><tr><td height="31" class="nwtitle"></td><td align="right" class="category"></td></tr></table><table width="578" border="0" cellpadding="0" cellspacing="0"><tr><td height="5" background="templates/$ThemeSel/images/n_n_03.gif"></td></tr></table><table width="578" border="0" cellpadding="0" cellspacing="0"><tr><td width="14" height="50" background="templates/$ThemeSel/images/n_n_04.gif"><img src="templates/$ThemeSel/images/n_n_04.gif" width="14" height="2"></td><td width="550" class="ncontent"><table width="100%" border="0" cellpadding="0" cellspacing="0" ><tr><td class="ncontent">
Это файл table-close.html
</td></tr></table></td><td width="14" background="templates/$ThemeSel/images/n_n_05.gif"><img src="templates/$ThemeSel/images/n_n_05.gif" width="14" height="1"></td></tr></table><table width="578" border="0" cellpadding="0" cellspacing="0"><tr><td width="578" height="14" background="templates/$ThemeSel/images/n_n_08.gif"></td></tr></table>
Далее открываем Оперой любой модуль, тестим.
Если есть ошибки – исправляем.
Далее идем дальше.
Для нормального отображения вида комментов пользователей , вам необходим маленький хак.
Итак, поехали.
Открываем файл function/template.php
Вверху, после функции Warning встявляем этот код:
function OpenComment() {
global $BlockGlob, $ThemeSel, $module_name;
static $cache;
if (!isset($cache)) {
$tmp_file = (file_exists("templates/".$ThemeSel."/comment-open-".$module_name.".html")) ? "templates/".$ThemeSel."/comment-open-".$module_name.".html" : "templates/".$ThemeSel."/comment-open.html";
$str = 'global $BlockGlob, $ThemeSel; echo "'.addslashes(file_get_contents($tmp_file)).'";';
$cache = create_function('', $str);
}
$cache();
}
function CloseComment() {
global $BlockGlob, $ThemeSel, $module_name;
static $cache;
if (!isset($cache)) {
$tmp_file = (file_exists("templates/".$ThemeSel."/comment-close-".$module_name.".html")) ? "templates/".$ThemeSel."/comment-close-".$module_name.".html" : "templates/".$ThemeSel."/comment-close.html";
$str = 'global $BlockGlob, $ThemeSel; echo "'.addslashes(file_get_contents($tmp_file)).'";';
$cache = create_function('', $str);
}
$cache();
}
Далее в папке с нашей темой создаем пустые файлы с именами comment-close.html и comment-open.html
Теперь нам необходимо настроить сам вид комментариев.
Открываем файл comments.tpl
Копируем все содержимое в файл comment.html нашей темы.
Редактируем его.
Здесь нужны хотя бы элементарные знания html.
В самом начале, вставляем этот код:
<a name="$id"></a>
Надпись, вроде написал {author} заменяем на написал $name
Лишние тэги, вроде <br />{group-icon}<br /><br />Группа: {group-name}<br />Регистрация: {registration} cмело стираем.
Затем <mg src="{foto}" border="0"> полностью заменяем на $avatar<br />$rate
Код вроде {comment}[signature]<br /><br />--------------------<br /> заменяем на $text<br>
[com-edit][изменить][/com-edit] [com-del][удалить][/com-del] на $link
ICQ: {icq} {ip}<br>Дата размещения: ({date})<br>Комментарии №: {comment-id} на
Комментарии №: <a name="$id">$id</a>
[fast][цитировать][/fast] на $info
Сохраняем, тестим.
Лишние тэги стираем.
Затем нам нужно оформить title.html
Опять обратимся к файлу info.tpl
Копируем его содержимое.
Меняем пути на правильные.
Вместо тэга {error} меняем на $text
Тэг {title} стираем.
Далее оформляем файл вывода ошибок и сообщений – warning.html
Открываем файл info.tpl
Копируем содержимое, изменяем пути.
Вместо тэга {title} встявляем $title
Вместо {error} пишем $text
И в самом внизу, после всех тэгов, пишем $toredirect
Ну вот, в принципе и все.
Вам только осталось потестить тему на ошибки.
Также не забудьте проверить пути в css файлах.
Удачной вам работы в дизайне и все что с ним связано!
Haliff3007
Haliff3007@ya.ru
www.AntiCMS.ru
Навигация
