Data Life Engine. Урок 8. Оформляем панель информации(профиль) пользователя

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

Оформляем userinfo.tpl

Шаблон профиля пользователя состоит из 2х частей.

1я часть, это то, что пользователь видит зайдя в свой профиль - имя, дату регистрации, аватар, полное имя, место жительства, группу, последнее посещение и т.д.

2я часть которая становится доступна после нажатия кнопки Редактировать профиль , после нажатия этой кнопки внизу открывается табличка, в которую пользователь вводит данные

Важной частью кода является строка <div id= options style= display:none; > все что идет ДО этой строки, это то что пользователь видит войдя в свой профиль, а все что ПОСЛЕ этой строки пользователь видит нажав кнопку Редактировать профиль

Вот скриншот из визуального редактора, где показаны части ДО и ПОСЛЕ нажатия редактировать профиль

КОД1, выводит таблицу которую пользователь видит сразу войдя в профиль

{usertitle} - имя пользователя
{fullname} - полное имя
{land} - место жительства
{registration} - дата регистрации
{lastdate} - последнее посещение
{status} - в какой группе находится
{time_limit}[/time_limit] - выводит текст, если пользователь находится во временной группе
{rate} - рейтинг
{news_num} - количство новостей
[rss][/rss] - RSS
{comm_num} - количество комментариев
{email} - почта
{pm} - приватное собщение
{edituser} - редактировать профиль, доступно только владельцу логина
{info} - краткая информация о пользователе
{foto} - выводит фотографию пользователя, если она загружена

КОД2, выводит таблицу редактирования профиля, после нажатия кнопки Редактировать профиль

Это обычная таблица с полями для редактирования информации, емейла, пароля, подписи и т.д. тегов здесь почти нет, просто поля для заполнения пользователейм которые вставляются в табличку.
{allowed-ip} - Значение IP с которого разрешена авторизация

В файл style.css добавляем стили:

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

Скриншот: