Для Начинающих…
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
//////////// Блин , нету силы больше писать…
Бошка болит – Продолжение следует!!!
Вот - Скоро допишу.