Урок номер 9 - оформляем результаты поиска, страницу поиска , оформляем панель информации пользователя

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

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

Навигация:

Урок номер 9
Оформляем результаты поиска, страницу поиска ,
оформляем панель информации пользователя

1. Оформляем страницу поиска search.tpl

Открываем файл search.tpl, и видим в нем код (картинки убрал для наглядности):

Код1:

<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdl.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/mtdbg.png" class="ntitle" valign="top" colspan="2"><b>Поиск на сайте</b></td>
<td width="5"><img src="{THEME}/images/mtdr.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="news" valign="top" colspan="2"><div id="searchtable" name="searchtable">{searchtable}</div></td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlbot.png" width="5" height="32" border="0"></td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right"> </td>
<td width="5"><img src="{THEME}/images/mtdrbot.png" width="5" height="32" border="0"></td>
</tr>
</table>
[searchmsg]
<div><span class="sresult">{searchmsg}</span></div>
[/searchmsg]

Давайте посмотрим какие теги здесь используются:

{searchtable} - Форма поиска в виде таблицы

{searchmsg} - Вывод сообщения о результатах поиска

[searchmsg] и [/searchmsg] - Вывод текста в случае если был произведен поиск

Эти теги нужно в ставить в одну из уже созданных нами форм, можно взять оформление из краткой новости или полной или из комментариев или из инфо, я взял шаблон из info.tpl.

удаляем весь код из файла search.tpl, и вставляем туда вот этот код:

Код2:

Затем открываете сайт, вводите слово в строку поиска, и видите результаты - у нас все получилось!

Скриншоты:

2. Оформляем результаты поиска searchresult.tpl

Открываем страницу searchresult.tpl, в ней видим огромное количество непонятного кода, пугаться не стоит, код на самом деле прост как 2 копейки, просто его много)

Вот этот код:

[searchposts]

[fullresult]
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdl.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/mtdbg.png" class="ntitle" valign="top">{result-title}</td>
<td background="{THEME}/images/mtdbg.png" class="category" valign="top" align="right">{link-category} #{search-id}</td>
<td width="5"><img src="{THEME}/images/mtdr.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="news" valign="top" colspan="2">{result-text}</td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlbot.png" width="5" height="32" border="0"></td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right">[edit]<img src="{THEME}/images/edit.png" title = "Редактировать новость" border="0">[/edit] Просмотров: {views} автор: <b>{result-author}</b> {result-date} <font color="#3B84D0">Комментарии ({result-comments})</font> [result-link]<font color="#3B84D0">Подробнее</font>[/result-link]</td>
<td width="5"><img src="{THEME}/images/mtdrbot.png" width="5" height="32" border="0"></td>
</tr>
</table>
[/fullresult]

[shortresult]
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdl.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/mtdbg.png" class="ntitle" valign="top">[result-link]{result-title}[/result-link]</td>
<td background="{THEME}/images/mtdbg.png" class="category" valign="top" align="right">{link-category} #{search-id}</td>
<td width="5"><img src="{THEME}/images/mtdr.png" width="5" height="50" border="0"></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlbot.png" width="5" height="32" border="0"></td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right">Просмотров: {views} автор: <b>{result-author}</b> {result-date} <font color="#3B84D0">Комментарии ({result-comments})</font></td>
<td width="5"><img src="{THEME}/images/mtdrbot.png" width="5" height="32" border="0"></td>
</tr>
</table>
[/shortresult]

[/searchposts]

[searchcomments]

[fullresult]
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlblue.png" width="5" height="58" border="0"></td>
<td background="{THEME}/images/mtdbgblue.png" class="ctitle" valign="top">написал: {result-author} ({result-date}) [result-link]{result-title}[/result-link] <font size="1">#{search-id}</font></td>
<td width="5"><img src="{THEME}/images/mtdrblue.png" width="5" height="58" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td valign="top">
<table width="100%">
<tr>
<td width="110" valign="top"><img src="{foto}" border="0"></td>
<td class="news" valign="top">{result-text}[signature]<br /><br />--------------------<br /><div class="slink">{signature}</div>[/signature]</td>
</tr>
</table>
</td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/mtdlbot.png" width="5" height="32" border="0"></td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right">{ip} Зарегистрирован: {registration} ICQ: {icq} [com-edit][изменить][/com-edit] [com-del][удалить][/com-del]</td>
<td><img src="{THEME}/images/mtdrbot.png" width="5" height="32" border="0"></td>
</tr>
</table>
[/fullresult]

[shortresult]

<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlblue.png" width="5" height="58" border="0"></td>
<td background="{THEME}/images/mtdbgblue.png" class="ctitle" valign="top">написал: {result-author} ({result-date}) [result-link]{result-title}[/result-link] <font size="1">#{search-id}</font></td>
<td width="5"><img src="{THEME}/images/mtdrblue.png" width="5" height="58" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/mtdlbot.png" width="5" height="32" border="0"></td>
<td background="{THEME}/images/mtdbgbot.gif" class="slink" align="right"></td>
<td><img src="{THEME}/images/mtdrbot.png" width="5" height="32" border="0"></td>
</tr>
</table>

[/shortresult]

[/searchcomments]

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

Все что заключено между тегами [searchposts][/searchposts] отвечает за вывод данных найденых в новостях.
Результаты поиска можно представить как полными новостями так и заголовками.
[fullresult][/fullresult] - код который находится между этими тегами отвеает за вывод поисковой информации в виде полных статей
[shortresult][/shortresult] - код который находится между этими тегами отвечает за вывод информации в виде только заголовков статей

Искать информацию теперь можно и в комментариях

Все, что заключено между тегами [searchcomments][/searchcomments] отвечает за вывод найденных данных в комментариях
[fullresult][/fullresult] - выводит полные комментарии
[shortresult][/shortresult] - выводит только заголовки комментариев.

{result-author} - выводит автора новости или комментария
{result-date} - выводит дату новости или комментария
[result-link]{result-title}[/result-link] - заголовок-ссылка
{result-text} - найденный текст.
{result-comments} - ссылка на комментарии к найденной новости
[edit]<img src="{THEME}/images/edit.png" title = "Редактировать новость" border="0">[/edit] - редактировать найденную новость.

Меняем этот код. Таблицы я использовал из comments.tpl и shortstory.tpl, конечно же их пришлось немного модифицировать.

[searchposts]

[fullresult]
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="12" height="34" valign="top"><div align="left"><img src="{THEME}/pics/newsl.gif" width="11" height="8" /></div></td>
<td width="24" class="newsbg" valign="top"><img src="{THEME}/pics/news.png" width="24" height="24" alt="" border="0"/></td>
<td width="100%" class="newsbgt" valign="top">{result-title}</td>
<td width="13" valign="top"><div align="right"><img src="{THEME}/pics/newsr.gif" width="12" height="8" /></div></td>
</tr>
<tr>
<td height="34" colspan="4"><table width="100%" border="0" align="center">
<tr>
<td width="50%"><div align="left"></div></td>
<td width="50%" class="category"><div align="right">{link-category} #{search-id}</div></td>
</tr>
</table></td>
</tr>
</table>
<br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="news" valign="top">{result-text}<br><br></td>
</tr>
<tr>
<td colspan="3" class="newsf" align="right"><span class="slink">[edit]<img src="{THEME}/images/edit.png" title = "Редактировать новость" border="0">[/edit] Просмотров: {views} автор: <b>{result-author}</b> {result-date} <font color="#3B84D0">Комментарии ({result-comments})</font> [result-link]<font color="#3B84D0">Подробнее</font>[/result-link]</span></td>
</tr>
<tr>
<td width="12" height="13" valign="top"><img src="{THEME}/pics/newsfl.gif" width="12" height="8" /></td>
<td width="100%" class="newsfbg"> </td>
<td width="11" valign="top"><img src="{THEME}/pics/newsfr.gif" width="11" height="8" /></td>
</tr>
</table>
[/fullresult]

[shortresult]
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="12" height="34" valign="top"><div align="left"><img src="{THEME}/pics/newsl.gif" width="11" height="8" /></div></td>
<td width="24" class="newsbg" valign="top"><img src="{THEME}/pics/news.png" width="24" height="24" alt="" border="0"/></td>
<td width="100%" class="newsbgt" valign="top"><span class="ntitle">[result-link]{result-title}[/result-link]</span></td>
<td width="13" valign="top"><div align="right"><img src="{THEME}/pics/newsr.gif" width="12" height="8" /></div></td>
</tr>
<tr>
<td height="34" colspan="4"><table width="100%" border="0" align="center">
<tr>
<td width="50%"><div align="left"></div></td>
<td width="50%" class="category"><div align="right">{link-category} #{search-id}</div></td>
</tr>
</table></td>
</tr>
</table>
<br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3" class="newsf" align="right"><span class="slink">Просмотров: {views} автор: <b>{result-author}</b> {result-date} <font color="#3B84D0">Комментарии ({result-comments})</font>]</span></td>
</tr>
<tr>
<td width="12" height="13" valign="top"><img src="{THEME}/pics/newsfl.gif" width="12" height="8" /></td>
<td width="100%" class="newsfbg"> </td>
<td width="11" valign="top"><img src="{THEME}/pics/newsfr.gif" width="11" height="8" /></td>
</tr>
</table>
[/shortresult]

[/searchposts]

[searchcomments]

[fullresult]
<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> </TD>
<TD class="zagl">написал: {result-author} ({result-date}) [result-link]{result-title}[/result-link] <font size="1">#{search-id}</font></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>
<table width="100%" border=0 class="news">
<tr>
<td width=180 valign="top"><img src="{foto}" border="0"></td>
<td valign="top">{result-text}[signature]<br />
<br />--------------------<br /><div class="slink">{signature}</div>[/signature]
</td>
</tr>
</table>
</TD></TR>
<TR>
<TD class="slink" align="right">{ip} Зарегистрирован: {registration} ICQ: {icq} [com-edit][изменить][/com-edit] [com-del][удалить][/com-del]</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>

[/fullresult]

[shortresult]
<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> </TD>
<TD class="zagl">написал: {result-author} ({result-date}) [result-link]{result-title}[/result-link] <font size="1">#{search-id}</font></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></TD>
</TR>
<TR>
<TD class="slink" align="right"> </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>
[/shortresult]

[/searchcomments]

Скриншоты:

Вывод полной новости в поиске и вывод заголовков

Вывод комментариев в поиске и вывод заголовков

На этом все.

3. Оформляем панель информации пользователя userinfo.tpl

Открываем файл userinfo.tpl, находим в нем строку

Весь код, что идет ДО этой строки - это то что пользователь видит зайдя в свой профиль
Весь код который идет ПОСЛЕ этой строки - это окно которое появляется после нажатия кнопки "Опции" (блок "Редактирование информации") (то окно где выставляется подпись, фото, пароль и т.д.)

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

Вот полностью код из файла userinfo.tpl

Код7:

<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlgeen.png" width="5" height="58" border="0"></td>
<td background="{THEME}/images/mtdbggreen.png" class="ntitle" valign="top" colspan="2">Пользователь: {usertitle}</td>
<td width="5"><img src="{THEME}/images/mtdrgreen.png" width="5" height="58" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td width="70" valign="top"><img src="{foto}" border="0"></td>
<td class="news" valign="top" style="padding-left:5px;">Полное имя: <span class=date>{fullname}</span>
<br>Дата регистрации: <span class=date>{registration}</span>
<br>Последнее посещение: <span class=date>{lastdate}</span>
<br>Группа: <font color="red">{status}</font> [time_limit] в группе до: {time_limit}[/time_limit]
<br><br>Рейтинг: <span class=date>{rate}</span>
<br><br>Место жительства: <span class=date>{land}</span>
<br>Номер ICQ: <span class=date>{icq}</span>
<br>Немного о себе:<br>{info}<br><br>Количество публикаций:    <span class=date>{news_num}</span>
<br>Количество комментариев: <span class=date>{comm_num}</span> [ {comments} ]<br><br>E-Mail адрес: <span class=date>[{email}]</span> <span class=date>[{pm}]</span> <span class=date>{edituser}</span>
</td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png" colspan="2"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
[not-logged]
<div id="options" style="display:none;">
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/mtdlgeen.png" width="5" height="58" border="0"></td>
<td background="{THEME}/images/mtdbggreen.png" class="ntitle" valign="top">Редактирование информации</td>
<td width="5"><img src="{THEME}/images/mtdrgreen.png" width="5" height="58" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="news" valign="top" style="padding-left:15px;">
<table width="500" class="slink">
<tr valign="middle">
<td width="70" height="25">Ваш E-Mail</td>
<td height="25"><input type="text" name="email" value="{editmail}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "><br />{hidemail}</td>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td height="10"> </td>
</tr>
<tr valign="middle">
<td width="120" height="25">Ваше Имя</td>
<td height="25"><input type="text" name="fullname" value="{fullname}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25"><nobr>Место жительства  </nobr></td>
<td height="25"><input type="text" name="land" value="{land}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25">Номер ICQ</td>
<td height="25"><input type="text" name="icq" value="{icq}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td height="10"> </td>
</tr>
<tr valign="middle">
<td width="120" height="25">Старый пароль</td>
<td height="25"><input type="password" name="altpass" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25">Новый пароль</td>
<td height="25"><input type="password" name="password1" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25">Повторите</td>
<td height="25"><input type="password" name="password2" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25" valign="top">Блокировка по IP</td>
<td height="25"><input type="text" name="allowed_ip" value="{allowed-ip}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "> Ваш текущий IP: {ip}<br /><font style="color:red;font-size:10px;">* Внимание! Будьте бдительны при изменении данной настройки. Доступ к вашему аккаунту будет доступен только с того IP адреса или подсети, который вы укажите. Пример: 192.48.25.71 или 129.42.*.*</span></td>
</tr>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td colspan=2 height="10"> </td>
</tr>
</tr>
<tr valign="middle">
<td width="120" height="25">Фото:</td>
<td height="25"><input type="file" name="image" style="width:278px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "><br>
<input type="checkbox" name="del_foto" value="yes">  Удалить фотографию</td>
</tr>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td height="10"> </td>
</tr>
<tr valign="middle">
<td width="70" height="25">О себе</td>
<td height="25"><textarea name=info style="width:320px; height:70px; font-family:verdana; font-size:11px; border:1px solid #E0E0E0 ">{editinfo}</textarea></td>
</tr>
<tr valign="middle">
<td width="70" height="25">Подпись</td>
<td height="25"><textarea name=signature style="width:320px; height:70px; font-family:verdana; font-size:11px; border:1px solid #E0E0E0 ">{editsignature}</textarea></td>
</tr>
{xfields}
<tr valign="middle">
<td colspan=3 height="25"><div style="padding-top:2px; padding-left:0px;">
<input name="image" type="image" src="{THEME}/images/send.png"><br /><br />
<input name="submit" type="hidden" id="submit" value="submit">
</div></td>
</tr>
</table>
</td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
</div>
[/not-logged]

Описание тегов из этого кода:

{usertitle} - выводит в заголовок никнейм пользователя
<img src="{foto}" border="0"> - выводит аватару пользователя
{fullname} - выводит полное имя пользвателя
Дата регистрации: <span class=date>{registration}</span> - тег {registration} показывает дату регистрации пользователя
Последнее посещение: <span class=date>{lastdate}</span> - тег {lastdate} показывает дату последнего посещения сайта
Статус на сайте:<font color="red">{status}</font> - тег {status} показывает статус пользователя на сайте (админ, юзер, журналист и т.д.)
Рейтинг: <span class=date>{rate}</span> - тег {rate} показывает рейтинг пользователя
Место жительства: <span class=date>{land}</span> - тег {land} выводит данные о месте жительства пользователя (обычно это поле никто не заполняет:))
Номер ICQ: <span class=date>{icq}</span> - тег {icq} показывает номер ICQ пользователя
Немного о себе:<br>{info} - тег {info} выводит информацию пользователя которую он добавил в окно "о Себе"
Количество публикаций: <span class=date>{news_num}</span> - тег {news_num} показывает количество публикаций пользователя
Количество комментариев: <span class=date>{comm_num}</span> [ {comments} ] - показывает количество комментариев
E-Mail адрес: <span class=date>[{email}]</span> - тег {email} показывает адрес электронной почты пользователя
<span class=date>[{pm}]</span> - тег {pm} выводит ссылку "персональное сообщение"
<span class=date>{edituser}</span> - {edituser} - выводит ссылку на второе окно, опции. Код этого окна идет после строки
Собственно все основные теги идут в первой части кода, во второй части - опции - просто формы и их оформление.
[time_limit] в группе до: {time_limit}[/time_limit] - срок нахождения в группе

Итак наша задача (уже в который раз!:)) взять участки кода из оригинального оформления и вставить в свою таблицу, что я иделаю.

Да, чуть не забыл, вот отдельно код таблицы в которой находятся формы второй части (Редактирование информации) кода:

Код8:

Для оформления 1 части кода я взял таблицу из файла comments.tpl - она идеально подходит, только одна, нижня строка лишняя,
для оформления 2 части кода, то что отображается после нажатия на кнопку опции (Редактирование информации) я взял код из файла info.tpl.

вот что получилось в итоге, этот код вы вставляете в userinfo.tpl вместо оригинального :

Код8:

<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> </TD>
<TD class="zagl">пользователь: {usertitle}</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>
<table class="news" border=0>
<tr>
<td width=180 valign="top"><img src="{foto}" border="0"></td>
<td valign="top">Полное имя: <span class=date>{fullname}</span>
<br>Дата регистрации: <span class=date>{registration}</span>
<br>Последнее посещение: <span class=date>{lastdate}</span>
<br>Статус на сайте:<font color="red">{status}</font> [time_limit] в группе до: {time_limit}[/time_limit]
<br><br>Рейтинг: <span class=date>{rate}</span>
<br><br>Место жительства: <span class=date>{land}</span>
<br>Номер ICQ: <span class=date>{icq}</span>
<br>Немного о себе:<br>{info}<br><br>Количество публикаций:    <span class=date>{news_num}</span>
<br>Количество комментариев: <span class=date>{comm_num}</span> [ {comments} ]<br><br>E-Mail адрес: <span class=date>[{email}]</span> <span class=date>[{pm}]</span> <span class=date>{edituser}</span></td>
</tr>
</table>
</TD></TR>
<TR>
<TD> </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>
[not-logged]
<div id="options" style="display:none;">
<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> </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>
<table width="500" class="slink">
<tr valign="middle">
<td width="70" height="25">Ваш E-Mail</td>
<td height="25"><input type="text" name="email" value="{editmail}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "><br />{hidemail}</td>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td height="10"> </td>
</tr>
<tr valign="middle">
<td width="120" height="25">Ваше Имя</td>
<td height="25"><input type="text" name="fullname" value="{fullname}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25"><nobr>Место жительства  </nobr></td>
<td height="25"><input type="text" name="land" value="{land}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25">Номер ICQ</td>
<td height="25"><input type="text" name="icq" value="{icq}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td height="10"> </td>
</tr>
<tr valign="middle">
<td width="120" height="25">Старый пароль</td>
<td height="25"><input type="password" name="altpass" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25">Новый пароль</td>
<td height="25"><input type="password" name="password1" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25">Повторите</td>
<td height="25"><input type="password" name="password2" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr valign="middle">
<td width="120" height="25" valign="top">Блокировка по IP</td>
<td height="25"><input type="text" name="allowed_ip" value="{allowed-ip}" style="width:167px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "> Ваш текущий IP: {ip}<br /><font style="color:red;font-size:10px;">* Внимание! Будьте бдительны при изменении данной настройки. Доступ к вашему аккаунту будет доступен только с того IP адреса или подсети, который вы укажите. Пример: 192.48.25.71 или 129.42.*.*</span></td>
</tr>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td colspan=2 height="10"> </td>
</tr>
</tr>
<tr valign="middle">
<td width="120" height="25">Фото:</td>
<td height="25"><input type="file" name="image" style="width:278px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "><br>
<input type="checkbox" name="del_foto" value="yes">  Удалить фотографию</td>
</tr>
</tr>
<tr valign="middle">
<td width="120" height="10"> </td>
<td height="10"> </td>
</tr>
<tr valign="middle">
<td width="70" height="25">О себе</td>
<td height="25"><textarea name=info style="width:320px; height:70px; font-family:verdana; font-size:11px; border:1px solid #E0E0E0 ">{editinfo}</textarea></td>
</tr>
<tr valign="middle">
<td width="70" height="25">Подпись</td>
<td height="25"><textarea name=signature style="width:320px; height:70px; font-family:verdana; font-size:11px; border:1px solid #E0E0E0 ">{editsignature}</textarea></td>
</tr>
{xfields}
<tr valign="middle">
<td colspan=3 height="25"><div style="padding-top:2px; padding-left:0px;">
<input name="image" type="image" src="{THEME}/images/send.png"><br /><br />
<input name="submit" type="hidden" id="submit" value="submit">
</div></td>
</tr>
</table>
</TD></TR>
<TR>
<TD> </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>
</div>
[/not-logged]

Скриншот:

На это у меня все. Успехов!

Урок окончен.

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

В 10, 11 уроках мы рассмотрим создание центральной страницы (main.tpl) и по сути общей темы всего скина "с нуля" а так же я дам ответы на наиболее часто задаваемые вопросы.