Шаг 12. Дизайн.

Для сателлитов, дизайн имеет не такое большое значение как для СДЛ. Поэтому, особо усердствовать с переделкой шаблонов мы не будем. Главное, чтобы шаблон был чист от внешних ссылок, и неизвестного стороннего кода. Был удобен, и как можно красивее. Таких шаблонов для DLE валом, найти их не составит труда. Но учтите, Вы не можете делать все сателлиты на одном шаблоне. Для каждого нового сателлита, желательно подбирать новый шаблон.

В папке templates Вашего сайта, уже содержится 4 шаблона. Для своего первого сайта, можете использовать один из них. По умолчанию, используется шаблон Default, изменить его на другой, можно в админпанели, в разделе «Настройка системы».

Если Вы решили использовать шаблон не из стандартного комплекта, тогда скачайте его, и бросьте в папку templates. Папка с шаблоном, обычно называется так же, как и шаблон, содержит файлы шаблона, в основном имеющие расширение tpl, папки dleimages, bbcodes, images, style (style иногда css) и прочее. Убедитесь, что папка с шаблоном, не находится в другой папке, как иногда бывает, при распаковывании скачанного архива. В templates нужно положить только ту папку, которая содержит файлы шаблона, если она будет находится в другой папке, можете не удивляться, почему шаблон не отображается.

В админке сайта установите нужный шаблон по умолчанию, и убедитесь, что на сайте, он отображается так, как Вам нужно. Затем, откройте каждый файл шаблона в Notepad ++ и посмотрите, нет ли там ссылок на чужие сайты. Все лишние ссылки нужно удалить. Это можно сделать и через админку, в разделе «Шаблоны сайта», но с Notepad ++ Вам будет удобнее. Если Вы скачали шаблон с моего сайта, то проверку можете пропустить, все шаблоны у меня чистые.

Если Вы вообще ничего не знаете о HTML и CSS, то старайтесь выбирать только те шаблоны, которые технически, максимально соответствуют запросам Вашего сайта. Переделать шаблон, не владея HTML+CSS практически не возможно.

Дальше, на примере дефолтного (Default) шаблона DLE 9.2 я постараюсь объяснить Вам, как настроить шаблон под свой сайт.

main.tpl
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»ru» lang=»ru»>
<head>
{headers}
<link rel=»shortcut icon» href=»{THEME}/images/favicon.ico» />
<link media=»screen» href=»{THEME}/style/styles.css» type=»text/css» rel=»stylesheet» />
<link media=»screen» href=»{THEME}/style/engine.css» type=»text/css» rel=»stylesheet» />
<script type=»text/javascript» src=»{THEME}/js/libs.js»></script>
</head>
<body>
{AJAX}
<div id=»toolbar» class=»wwide»>
<div class=»wrapper»><div class=»dpad»>
<span class=»htmenu»><a href=»#» onclick=»this.style.behavior=’url(#default#homepage)’;this.setHomePage(‘http://dle-news.ru‘);»>Сделать домашней</a><span>|</span><a href=»#» rel=»sidebar» onclick=»window.external.AddFavorite(location.href,’dle-news.ru’); return false;»>Добавить в избранное</a></span>
{login}
</div></div>
<div class=»shadow»>&nbsp;</div>
</div>
<div class=»wrapper»>
<div id=»header» class=»dpad»>
<h1><a class=»thide» href=»/index.php» title=»DataLife Engine — Softnews Media Group«>DataLife Engine — Softnews Media Group</a></h1>
<form action=»» name=»searchform» method=»post»>
<input type=»hidden» name=»do» value=»search» />
<input type=»hidden» name=»subaction» value=»search» />
<ul class=»searchbar reset»>
<li class=»lfield»><input id=»story» name=»story» value=»Поиск…» onblur=»if(this.value==») this.value=’Поиск…’;» onfocus=»if(this.value==’Поиск…’) this.value=»;» type=»text» /></li>
<li class=»lbtn»><input title=»Найти» alt=»Найти» type=»image» src=»{THEME}/images/spacer.gif» /></li>
</ul>
</form>
<div class=»headlinks»>
<ul class=»reset»>
<li><a href=»/index.php»>Главная</a></li>
[group=5]<li><a href=»/index.php?do=register»>Регистрация</a></li>[/group]
<li><a href=»/index.php?do=feedback»>Контакты</a></li>
<li><a href=»/index.php?do=rules»>Правила</a></li>
</ul>
</div>
</div>
<div class=»himage»><div class=»himage»><div class=»himage dpad»>
<h2>Многопользовательский новостной движок,<br />
предназначенный для организации собственных<br />
СМИ и блогов в интернете.
</h2>
</div></div></div>
<div class=»mbar» id=»menubar»><div class=»mbar»><div class=»mbar dpad»>
<div class=»menubar»>
{include file=»topmenu.tpl»}
</div>
</div></div></div>
<div class=»wtop wsh»><div class=»wsh»><div class=»wsh»>&nbsp;</div></div></div>
<div class=»shadlr»><div class=»shadlr»>
<div class=»container»>
<div class=»vsep»>
<div class=»vsep»>
<div id=»midside» class=»rcol»>
[not-aviable=main]{speedbar}[/not-aviable]
<div class=»hbanner»>
<div class=»dpad» align=»center»>{banner_header}</div>
<div class=»dbtm»><span class=»thide»>на правах рекламы</span></div>
</div>
[sort]<div class=»sortn dpad»><div class=»sortn»>{sort}</div></div>[/sort]
{info}
{content}
</div>
<div id=»sidebar» class=»lcol»>
{include file=»sidebar.tpl»}
</div>
<div class=»clr»></div>
</div>
</div>
<div class=»footbox»>
<div class=»rcol»>
<div class=»btags»>
{tags}
<div class=»shadow»>&nbsp;</div>
</div>
</div>
<div class=»lcol»>
<p>Уважаемые вебмастера, Вы<br />
просматриваете тестовую страницу<br />
<b>DataLife Engine</b>.<br />
Текущая версия 9.2.</p>

</div>
</div>
</div>
</div></div>
<div class=»wbtm wsh»><div class=»wsh»><div class=»wsh»>&nbsp;</div></div></div>
</div>
<div id=»footmenu» class=»wwide»>
<div class=»wrapper»><div class=»dpad»>
<ul class=»reset»>
<li><a href=»/index.php»>Главная страница</a></li>
[group=5]<li><a href=»/index.php?do=register»>Регистрация</a></li>[/group]
[not-group=5]<li><a href=»/addnews.html»>Добавить новость</a></li>[/not-group]
<li><a href=»/newposts/»>Новое на сайте</a></li>
<li><a href=»/statistics.html»>Статистика</a></li>
<li><a href=»http://dle-news.ru»>Поддержка скрипта</a></li>
</ul>
</div></div>
<div class=»shadow»>&nbsp;</div>
</div>
<div id=»footer» class=»wwide»>
<div class=»wrapper»><div class=»dpad»>
<span class=»copyright»>
Copyright &copy; 2004-2011 <a href=»http://www.softdle.com«>DLE</a> All Rights Reserved.<br />
Powered by DataLife Engine &copy; 2011
</span>
<div class=»counts»>
<ul class=»reset»>
<li><img src=»{THEME}/images/count.png» alt=»count 88x31px» /></li>
<li><img src=»{THEME}/images/count.png» alt=»count 88x31px» /></li>
<li><img src=»{THEME}/images/count.png» alt=»count 88x31px» /></li>
</ul>
</div>
<div class=»clr»></div>
</div></div>
</div>
</body>
</html>

Это main.tpl — главный файл шаблона, отвечающий за вывод всего остального. Если Вы его очистите и сохраните, то увидите, что с сайта исчезло вообще все.

Красным, я выделил те участки, которые нужно удалить, либо, заменить в них чужую информацию на свою.

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

Зеленым, выделены те участки кода, которые подключают другие файлы шаблона, которые обязательно нужно открыть, и редактировать. Как видим таких всего два:

  1. {include file=»topmenu.tpl»}
  2. {include file=»sidebar.tpl»}

Открываем файлы topmenu.tpl и sidebar.tpl

topmenu.tpl
<ul id=»topmenu» class=»lcol reset»>
<li><a href=»#»><b>О сайте</b></a></li>
<li class=»sublnk»><a href=»#»><b>В мире</b></a>
<ul>
<li><a href=»#»><b>Новости</b></a></li>
<li><a href=»#»><b>Катастрофы</b></a></li>
<li><a href=»#»><b>Климат</b></a></li>
<li><a href=»#»><b>Погода</b></a></li>
</ul>
</li>
<li class=»sublnk»><a href=»#»><b>Экономика</b></a>
<ul>
<li><a href=»#»><b>Новости</b></a></li>
<li><a href=»#»><b>Биржи</b></a></li>
<li><a href=»#»><b>Катировки валют</b></a></li>
<li><a href=»#»><b>Рынок</b></a></li>
</ul>
</li>
<li><a href=»#»><b>Религия</b></a></li>
<li><a href=»#»><b>Криминал</b></a></li>
<li><a href=»#»><b>Спорт</b></a></li>
<li><a href=»#»><b>Культура</b></a></li>
<li><a href=»#»><b>Инопресса</b></a></li>
</ul>
<a class=»thide hrss» href=»/rss.xml» title=»Чтение RSS»>Чтение RSS</a>

Как Вы поняли, этот файл отвечает за вывод верхнего меню, которое на деле выглядит так:

Верхнее меню

Отредактировав этот файл, Вы отредактируете верхнее меню. Собственно, здесь Вам нужно только прописать свои категории, и поставить ссылки.

sidebar.tpl
<div id=»leftmenu» class=»block»>
<div class=»dtop»>&nbsp;</div>
<div class=»dcont»>
<div class=»btl»>
<h4>Навигация</h4>
</div>
<div class=»bluemenu»>
<ul class=»lmenu reset»>
<li><a href=»#»>О сайте</a></li>
<li><a href=»#»>В мире</a></li>
<li><a href=»#»>Экономика</a></li>
<li><a href=»#»>Религия</a></li>
<li><a href=»#»>Криминал</a></li>
<li><a href=»#»>Спорт</a></li>
<li><a href=»#»>Культура</a></li>
<li><a href=»#»>Инопресса</a></li>
</ul>
</div>
<div class=»dpad»>
<ul class=»lmenu reset»>
<li><a href=»/index.php?do=search&amp;mode=advanced»>Расширенный поиск</a></li>
<li><a href=»/index.php?do=lastnews»>Все последние новости</a></li>
<li><a href=»/index.php?action=mobile»>Мобильная версия сайта</a></li>
</ul>
</div>
</div>
<div class=»dbtm»>&nbsp;</div>
</div>

<div id=»news-arch» class=»block»>
<div class=»dtop»>&nbsp;</div>
<div class=»dcont»>
<div class=»btl»>
<h4>Архив новостей</h4>
<span class=»tabmenu»>
<a class=»thide tabcal» href=»#tabln1″>В виде календаря</a>
<a class=»thide tabarh» href=»#tabln2″>В виде списка</a>
</span>
</div>
<div class=»tabcont» id=»tabln1″>
<p>В виде календаря</p>
<div class=»dpad»>{calendar}</div>
</div>
<div class=»tabcont» id=»tabln2″>
<p>В виде списка</p>
<div class=»dpad»>{archives}</div>
</div>
</div>
<div class=»dbtm»>&nbsp;</div>
</div>

<div id=»popular» class=»block»>
<div class=»dtop»>&nbsp;</div>
<div class=»dcont»>
<div class=»btl»>
<h4>Популярные статьи</h4>
</div>
<ul>
{topnews}
</ul>
</div>
<div class=»dbtm»>&nbsp;</div>
</div>

{vote}

<div id=»news-partner» class=»blocklite»>
<div class=»dpad»>
<h4 class=»btl»>Новости партнеров</h4>
{inform_dle}
</div>
<div class=»dbtm»>&nbsp;</div>
</div>

<div id=»change-skin» class=»blocklite»>
<div class=»dpad»>
<div class=»rcol»>{changeskin}</div>
<b class=»rcol»>Оформление:</b>
</div>
<div class=»dbtm»>&nbsp;</div>
</div>

Как видим, sidebar.tpl отвечает за вывод левой колонки. Если Вы его очистите и сохраните, то увидите, что все блоки из левой колонки исчезли. Здесь Вам нужно настроить главное меню, и отредактировать блоки. Можете удалить ненужные, понять где какой блок начинается и заканчивается очень просто, они разделены пробелами. Например, чтобы удалить блок позволяющий изменять тему оформления, удалите то, что выделено серым цветом. Но это только в данном случае так, в будущем, Вам придется научится различать блоки без меток в виде пробелов, или каких либо других.

Вышеизложенной информации вполне достаточно, чтобы самостоятельно настроить свой первый шаблон. Тем не мене, Вам все таки стоит поближе познакомиться с HTML и CSS. Вреда от этого никакого, а пользы целый вагон.