Data Life Engine. Урок 5. Оформляем приватные сообщения

Веб разработка - Уроки dle

Оформляем приватные сообщения (pm.tpl)

Многие почему-то побаиваются оформления ПС - приватных сообщений. Возможно это происходит из за того, что внутри этот шаблон выглядит весьма угрожающе, много когда, какие-то непонятные открывающие и закрывающие теги.
На самом же деле - это как раз один из простейших шаблонов, условно он разделен на 4 части%
1. заголовок+микроменю (входящие сообщения/отправленные сообщения/отправить сообщение)
2. список сообщений
3. написать новое сообщение, окно редактора
4. просмотр (чтение) сообщения

причем первая часть, заголовок+меню всегда неизменна и всегда вверху, по клику ссылки меню - меняется нижняя часть, список сообщений/написать новое/просмотр

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

Теперь чуть более подробно:

Вот эта часть кода вверху отвечает за заголовок+микроменю

[inbox]Входящие сообщения[/inbox][outbox]Отправленные сообщения[/outbox] [new_pm]Отправить сообщение[/new_pm]

Все, что между тегами [pmlist][/pmlist] - это вывод списка сообщений
Все, что между тегами [newpm][/newpm] - это написание нового сообщения
Все, что между тегами [readpm][/readpm] - это просмотр(чтение) сообщения

Код для pm.tpl будем писать по частям, которые потом все вместе вставим в шаблон.

<div class= pm_z >Персональные сообщения</div>
<div class= pm_t align= center ><img src= {THEME}/images/arrow_pm_2.png align= absmiddle border= 0 >[inbox]Входящие сообщения[/inbox]  <img src= {THEME}/images/arrow_pm_2.png align= absmiddle border= 0 >[outbox]Отправленные сообщения[/outbox]  <img src= {THEME}/images/arrow_pm_2.png align= absmiddle border= 0 >[new_pm]Отправить сообщение[/new_pm]</div>

[inbox]Входящие сообщения[/inbox] - ссылка на входящие сообщения, текст между тегами любой
[outbox]Отправленные сообщения[/outbox] - ссылка на входящие сообщения, текст между тегами любой
[new_pm]Отправить сообщение[/new_pm] - ссылка на написание нового сообщения

[pmlist]
<div class= pm_z_2 >Список сообщений</div>
<table width= 100% border= 0 cellspacing= 0 cellpadding= 0 class= pm_l >
<tr>
<td>{pmlist}</td>
</tr>
</table>
[/pmlist]

{pmlist} - выводит список заголовков сообщений

[newpm]
<div class= pm_z_3 >Отправка персонального сообщения</div>
<table width= 100% border= 0 cellspacing= 0 cellpadding= 0 style= padding: 10px; border: 1px solid #CCC; margin:10px; class= news >
<tr>
<td width= 104 height= 25 >Получатель:</td>
<td width= 1292 height= 25 ><input type= text name= name value= {author} class= f_in_1 /></td>
</tr>
<tr>
<td width= 104 height= 25 >Тема:</td>
<td width= 1292 height= 25 ><input type= text name= subj value= {subj} class= f_in_2 /></td>
</tr>
<tr>
<td colspan= 2 >{editor}<input type= checkbox name= outboxcopy value= 1 /> Сохранить сообщение в папке Отправленные <br /><br />
</td>
</tr>
[sec_code]
<tr>
<td width= 104 height= 25 >Код:</td>
<td width= 1292 height= 25 ><br />{sec_code}</td>
</tr>
<tr>
<td width= 104 height= 25 >Введите код:</td>
<td width= 1292 height= 25 ><input type= text name= sec_code id= sec_code style= width:115px class= f_input /></td>
</tr>
[/sec_code]
<tr>
<td colspan= 2 >
<input class= bbcodes_poll type= submit name= add value= отправить />  <input class= bbcodes_poll type= button onclick= dlePMPreview() value= просмотр />
</td>
</tr>
</table>
[/newpm]

{editor} - выводит окно редактора
[sec_code][/sec_code] - все что между этими тегами относится к выводу кода безопасности
{sec_code} - выводит картинку с секретным кодом

Код нового сообщения довольно большой, но если посмотреть внимательно - то совсем не страшный, это заголовок+табличка с полями и редактором+кнопка отправить, и все. [readpm]
<div class= pm_z_4 >{subj}</div>
<div class= pm_info >Отправил: {author}    <img src= {THEME}/images/arrow_pm.png align= absmiddle border= 0 >[reply][ответить][/reply]  <img src= {THEME}/images/arrow_pm.png align= absmiddle border= 0 >[del][удалить][/del]</div>
<div class= pm_text >{text}</div>
[/readpm]

{subj} - тема сообщения
{author} - автор собщения
[reply][ответить][/reply] - ответить на это сообщение, текст между тегами любой
[del][удалить][/del] - удалить сообщение, текст между тегами любой
{text} - выводит текст сообщения

В файл style.css добавляем следующий код:

.pm_z{
background: url(../images/mail_z.png) no-repeat 15px 0px;
height: 25px;
width: 250px;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 14px;
padding-top: 5px;
font-weight: bold;
color: #8E2F0D;
padding-left: 40px;
}

.pm_t {
font-family:Tahoma;
font-size:11px;
color:#606D77;
border: 2px dotted #cccccc;
margin-top: 5px;
margin-left: 10px;
padding: 5px;
height: 25px;
}
.pm_t a, .pm_t a:visited, .pm_t a:link {
color: #900;
text-decoration:none;
font-weight:bold;
}
.pm_t a:hover {
color: #B35800;
text-decoration: underline;
font-weight:bold;
}

.pm_z_2{
background: url(../images/mailbox.png) no-repeat 15px 0px;
height: 25px;
width: 250px;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 14px;
padding-top: 5px;
margin-top: 15px;
font-weight: bold;
color: #8E2F0D;
padding-left: 40px;
}

.pm_l {
font-family:Tahoma;
font-size:11px;
color:#606D77;
border: 1px solid #cccccc;
margin-top: 5px;
margin-left: 10px;
padding: 5px;
}

.pm_l td{
padding: 3px;
}

.pm_z_3{
background: url(../images/mail_post.png) no-repeat 15px 0px;
height: 25px;
width: 350px;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 14px;
padding-top: 5px;
margin-top: 15px;
font-weight: bold;
color: #8E2F0D;
padding-left: 40px;
}

.pm_z_4{
background: url('/../images/mail_open.png') no-repeat 15px 0px;
height: 25px;
width: 250px;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 14px;
padding-top: 5px;
margin-top: 15px;
font-weight: bold;
color: #000000;
padding-left: 40px;
}

.pm_text{
border:1px solid #CCCCCC;
margin-left: 18px;
margin-right: 0px;
padding: 5px;
}

.pm_info{
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-left: 15px;
padding-bottom: 5px;
}

.f_in_1{
width: 140px;
height: 14px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
}
.f_in_2{
width: 250px;
height: 14px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
}

Смотрим, что у нас получилось: