Руководство по созданию дизайна для DataLife Engine 5.х-6.3

list Обсудить на форуме DLE

Навигация:

Скачать необходимые файлы
Подготовка к использованию уроков и немного о самих уроках (обязательно к прочтению перед выполнением уроков)
Урок номер 1 - Оформление блоков в DLE, или свой дизайн блока за 5 минут.
Урок номер 2 - Оформляем новости или Сделаем юзерам приятно!
Урок номер 3 - Оформление комментариев или комментируем всё!
Урок номер 4 - Оформляем обратную связь, потерянный пароль, страницу оффлайн, статистику и инфо.
Урок номер 5 - Оформляем приватные сообщения.
Урок номер 6 - Оформляем добавление новостей и регистрацию посетителей.
Урок номер 7 - Меняем логотип, делаем навигацию, меняем копирайты, меняем рекламный блок, редактируем форму поиска
Урок номер 8 - Оформляем статические страницы, опросы и speedbar
Урок номер 9 - Оформляем результаты поиска, страницу поиска , оформляем панель информации пользователя
Урок номер 10 - Вредные советы.
Урок номер 11 - Создаем основную страницу "с нуля"
Урок номер 12 - Расширенное редактирование login.tpl
Дополнение 1 - Добавляем дополнительные поля в профиль пользователя
Дополнение 2 - Добавляем дополнительные поля в новости

 

Урок номер 11
Расширенное редактирование login.tpl


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

Итак, в стандартном виде шаблона дле 5.3-5.5 форма логина выводится вертикально. Мы же сделаем ее горизонтальной и выведем ее перед рекламным блоком, в учебном скине просто больше некуда ее вставить, поскольку он расчитывался на вертикальный вид.

!Пример даю уже на готовом учебном скине!

Открываем main.tpl и удаляем из него блок панель управления, удаляем полностью. Далее ищем такой код:

Код 1:

<TABLE cellSpacing=0 cellPadding=0 width=100% >
<TD valign=top width=14>
<IMG src="{THEME}/pics/1.gif" border=0></TD>
<TD valign=top background="{THEME}/pics/2.gif"></TD>
<TD valign=top width=14><IMG src="{THEME}/pics/3.gif" border=0></TD></TR>
<TR>
<TD valign=top width=14 background=" {THEME}/pics/4.gif" rowSpan=3>&nbsp;</TD>
<TD class="zagl">Рекламный блок</TD>
<TD width=14 background="{THEME}/pics/6.gif" rowSpan=3>
<IMG src="{THEME}/pics/spacer.gif" border=0></TD>
<TR height=15>
<TD class="news"><br>
{banner_header}</TD>
</TR>
<TR>
<TD>&nbsp;</TD></TR>
<TR>
<TD valign=bottom width=14><IMG src="{THEME}/pics/8.gif" border=0></TD>
<TD background=" {THEME}/pics/10.gif"></TD>
<TD valign=bottom width=14 background=" {THEME}/pics/9.gif">
<IMG src="{THEME}/pics/9.gif" border=0></TD>
</TR>
</TABLE>

Это код рекламного блока, берем этот же код, копируем его в блокнот, удаляем из него заголовок и тег {banner_header}, вместо них вставляем заголовок панель управления и тег {login}

Полученный код из блокнота вставляем перед кодом рекламного блока, вот такой код получится у нас:

Код 2:

<TABLE cellSpacing=0 cellPadding=0 width=100% >
<TD valign=top width=14>
<IMG src="{THEME}/pics/1.gif" border=0></TD>
<TD valign=top background="{THEME}/pics/2.gif"></TD>
<TD valign=top width=14><IMG src="{THEME}/pics/3.gif" border=0></TD></TR>
<TR>
<TD valign=top width=14 background=" {THEME}/pics/4.gif" rowSpan=3>&nbsp;</TD>
<TD class="zagl">Панель управления</TD>
<TD width=14 background="{THEME}/pics/6.gif" rowSpan=3>
<IMG src="{THEME}/pics/spacer.gif" border=0></TD>
<TR height=15>
<TD class="news"><br>
{login}</TD>
</TR>
<TR>
<TD>&nbsp;</TD></TR>
<TR>
<TD valign=bottom width=14><IMG src="{THEME}/pics/8.gif" border=0></TD>
<TD background=" {THEME}/pics/10.gif"></TD>
<TD valign=bottom width=14 background=" {THEME}/pics/9.gif">
<IMG src="{THEME}/pics/9.gif" border=0></TD>
</TR>
</TABLE>
<br>

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

Открываем файл login.tpl, там куча ужасного и непонятного кода. Вот код оттуда:

Код 3:

<?
if ($is_logged == TRUE){
$login_panel = <<<HTML
<div style="padding-top:2px; padding-left:20px;">Привет, <b>{$member_id['name']}</b>!</div>
<div style="padding-top:5px; padding-bottom:5px; padding-left:22px;"><table width="100%" class="copy">
HTML;
if ($user_group[$member_id['user_group']]['allow_admin']) {
$login_panel .= <<<HTML
<tr>
<td style="padding:2px;"><a href="{$adminlink}" target="_blank">Админцентр</a></td>
</tr>
HTML;
}
$login_panel .= <<<HTML
<tr>
<td style="padding:2px;"><a href="{$link_profile}">Мой профиль</a></td>
</tr>
<tr>
<td style="padding:2px;"><a href="{$link_pm}">Cообщения ({$member_id['pm_unread']} | {$member_id['pm_all']})</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_favorites}">Мои закладки</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_stats}">Статистика</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_addnews}">Добавить новость</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_newposts}">Обзор непрочитанного</a></td>
</tr>
</table>
</div>
<div style="padding-top:2px; padding-bottom:5px; padding-left:10px;"><a onclick="javascript: showBusyLayer()" href="{$link_logout}"><b>Завершить сеанс!</b></a></div>
HTML;
} else {
$login_panel = <<<HTML
<div style="padding-top:5px;"><form method="post" onsubmit="javascript:showBusyLayer()">
<table width="165" class="stext">
<tr align="left" valign="middle">
<td width="58" height="25" align="left">Логин</td>
<td height="25" align="right"><input type="text" name="login_name" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="left">Пароль</td>
<td height="25" align="right"><input type="password" name="login_password" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="left">&nbsp;</td>
<td height="25" align="right"><div style="padding-top:2px; padding-left:0px;">
<input onclick="submit();" name="image" type="image" src="{THEME}/images/send.png">
<input name="login" type="hidden" id="login" value="submit">
</div></td>
</tr>
</table></form>
</div><div style="padding-top:8px; padding-left:5px; padding-bottom:5px;"><a href="{$link_regist}">Регистрация на сайте!</a><br /><a href="{$link_lost}">Забыли пароль?</a></div>
HTML;
}
?>

Если игнорировать непонятные нам строки и смотреть только на чистый и известный нам HTML код, то из всего этого кода мы можем выделить 2 таблицы, в которых и находится меню пользователя+формы авторизации.

Вот отдельно код этих двух таблиц:

Код 4 (1 таблица, админ меню, меню пользователя):

<div style="padding-top:5px; padding-bottom:5px; padding-left:22px;">
<table width="100%" class="copy">
HTML;
if ($user_group[$member_id['user_group']]['allow_admin']) {
$login_panel .= <<<HTML
<tr>
<td style="padding:2px;"><a href="{$adminlink}" target="_blank">Админцентр</a></td>
</tr>
HTML;
}
$login_panel .= <<<HTML
<tr>
<td style="padding:2px;"><a href="{$link_profile}">Мой профиль</a></td>
</tr>
<tr>
<td style="padding:2px;"><a href="{$link_pm}">Cообщения ({$member_id['pm_unread']} | {$member_id['pm_all']})</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_favorites}">Мои закладки</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_stats}">Статистика</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_addnews}">Добавить новость</a></td>
<tr>
<td style="padding:2px;"><a href="{$link_newposts}">Обзор непрочитанного</a></td>
</tr>
</table>

Код 5 (вторая таблица, формы авторизации):

<table width="165" class="stext">
<tr align="left" valign="middle">
<td width="58" height="25" align="left">Логин</td>
<td height="25" align="right"><input type="text" name="login_name" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="left">Пароль</td>
<td height="25" align="right"><input type="password" name="login_password" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="left">&nbsp;</td>
<td height="25" align="right"><div style="padding-top:2px; padding-left:0px;">
<input onclick="submit();" name="image" type="image" src="{THEME}/images/send.png">
<input name="login" type="hidden" id="login" value="submit">
</div></td>
</tr>
</table>


Внимательно посмотрев на код таблиц мы можем сказать что это САМЫЕ ОБЫЧНЫЕ ТАБЛИЦЫ, даже без графического оформления - оно и не нужно там, а елси есть желание - то можно сделать самому. Границы таблиц равны нулю. Наша задча сделат упстую таблицу с горизонтальным расположением элементов и вставить туда ссылки и код из оригинальной таблицы.

Делаем пустую таблицу, ВИЗУАЛЬНО с видимыми границами она должна выглядеть вот так:

       
       

Далее в эту таблицу АККУРАТНО переносим код из оригинала, вот что у меня получилось в итоге:

Код 6:

<table width="100%" border="0" class="copy">
<tr>
HTML;
if ($user_group[$member_id['user_group']]['allow_admin']) {
$login_panel .= <<<HTML
<td style="padding:2px;" width=100><a href="{$adminlink}" target="_blank">Админцентр</a></td>
HTML;
}
$login_panel .= <<<HTML
<td style="padding:2px;" width=100><a href="{$link_profile}">Мой профиль</a></td>
<td style="padding:2px;" width=100><a href="{$link_pm}">Cообщения ({$member_id['pm_unread']} | {$member_id['pm_all']})</a></td>
<td width=80><a href="{$link_newposts}">Обзор непрочитанного</a></td>
</tr>
<tr>
<td style="padding:2px;" width=100><a href="{$link_favorites}">Мои закладки</a></td>
<td style="padding:2px;" width=100><a href="{$link_stats}">Статистика</a></td>
<td style="padding:2px;" width=100><a href="{$link_addnews}">Добавить новость</a></td>
<td style="padding:2px;" width="60%"></td>
</tr>
</table>
<br>

Что я поменял - во первых убрал строку <div style="padding-top:5px; padding-bottom:5px; padding-left:22px;"> и закрывающий </div> - нам этот стиль не нужен, во вторых чуть ниже находится строка с ссылкой "завершить сенанс", там я подправил отступ от левого края, вот что вышло:

<div style="padding-top:2px; padding-bottom:5px; padding-left:2px;">
<a onclick="javascript: showBusyLayer()" href="{$link_logout}"><b>Завершить сеанс!</b></a></div>

Все, вместо стандартного меню пользователя мы имеем свое собственное, расположенное там где нам нужно. Главное - это умение создавать простейшие таблицы и аккуратность и внимательность при переносе кода (я лично 2 раза ошибся прежде чем все получилось).

За оформление таблицы отвечает класс class="copy" в style.css

Скриншот вы увидите чуть ниже.

Перейдем ко второй таблице, форма авторизации. Здесь таблица еще проще. Одно только замечание, ниже оригинальной таблицы находится код :

<div style="padding-top:8px; padding-left:5px; padding-bottom:5px;"><a href="{$link_regist}">Регистрация на сайте!</a><br /><a href="{$link_lost}">Забыли пароль?</a></div>

Это ссылки на регистрацию и восстановление пароля, этот код я тоже поместил в ячейку новой таблицы.

Вот что получилось в итоге:

Код 7:

<table width="100%" border="0" class="stext">
<tr>
<td width="5%">Логин</td>
<td width="11%"><input type="text" name="login_name" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
<td width="6%">Пароль</td>
<td width="11%"><input type="password" name="login_password" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
<td width="13%" align="left"><div style="padding-top:2px; padding-left:5px;">
<input onclick="submit();" name="image" type="image" src="{THEME}/images/send.png">
<input name="login" type="hidden" id="login" value="submit">
</div></td>
<td width="54%" align="left"><div style="padding-top:8px; padding-left:20px; padding-bottom:5px;"><a href="{$link_regist}">Регистрация на сайте!</a><br /><a href="{$link_lost}">Забыли пароль?</a></div></td>
</tr>
</table>

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

Как мы увидели из урока все изменеие вида и формы расположения элементов login.tpl заключается в создании своих таблиц и переноса туда кода из оригинала.

Финальные скриншоты:

Сссылка на финальный вариант скина с измененным login.tpl находися в раздле загрузки

© 2007 Egiptyanin