Блог
Главная » Пользователи » Оригинальная страница регистрации в стиле Вконтакте
13:20




Не обычная страница регистрации в стиле Вконтакте подойдет для сайтов со светлым шаблоном smile

Приступим к установке:

Идем ПУ--> Управление дизайном --> Страница регистрации и заменяем все на :
Code

<html>
<head>
<title>Страница регистрации</title>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<style type="text/css">
.udtb {text-align:left; padding:0px; clear:both; background:#fff;}
.udtlb {clear:left; float:left; width:195px; background:#f7f7f7; padding:5px 7px; border:0px; border-bottom:1px solid #ccc; border-right:1px dotted #ccc;}
.udtrb {width:594px; display:inline-table; background:#fff; padding:5px 7px; color:#333; text-align:left; border:0px; border-bottom:1px solid #ccc;}
select[name="c"] {padding:1px 2px 1px 2px !important; font-size:10px !important;}
</style>
</head>
<body style="background:#f2f2f2;margin:0;padding:0px;">
<div class="wrapDiz" style="padding-top:5px;margin: 0px auto; width:500px; height:100%;">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" style="padding-left:10px;" width="600">
<div class="BlockTitlle"><div style="float:right; margin-top:-2px;"></div><div style="text-align:center;display:block; color:#777777;">Регистрация нового аккаунта</div></div>
<div class="BlockCont" style="padding:0px;">
$BODY$
<div style="background: #fff;border-top:1px solid #ccc;"><div style="padding:6px;"><noindex>
  $POWERED_BY$
</noindex>
</div></div>
</div>
</td>
</tr></table>
</div>
</body>
</html>


Идем ПУ--> Управление дизайном -->Форма регистрации , все удаляем и вставляем это :
Code

<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<link type="text/css" rel="StyleSheet" href="/register/registr.css" />
<script>
  function shag1()
  {
  $('#shag1_t').css('display','block');
  $('#shag1_f').css('display','none');
   
  $('#shag2_t').css('display','none');
  $('#shag2_f').css('display','block');
   
  $('#shag3_t').css('display','none');
  $('#shag3_f').css('display','block');
   
  $('#shag1_info').css('display','block');
  $('#shag2_info').css('display','none');
  $('#shag3_info').css('display','none');
  }
  function shag2()
  {
  $('#shag1_t').css('display','none');
  $('#shag1_f').css('display','block');
   
  $('#shag2_t').css('display','block');
  $('#shag2_f').css('display','none');
   
  $('#shag3_t').css('display','none');
  $('#shag3_f').css('display','block');
   
  $('#shag1_info').css('display','none');
  $('#shag2_info').css('display','block');
  $('#shag3_info').css('display','none');
  }
  function shag3()
  {
  $('#shag1_t').css('display','none');
  $('#shag1_f').css('display','block');
   
  $('#shag2_t').css('display','none');
  $('#shag2_f').css('display','block');
   
  $('#shag3_t').css('display','block');
  $('#shag3_f').css('display','none');
   
  $('#shag1_info').css('display','none');
  $('#shag2_info').css('display','none');
  $('#shag3_info').css('display','block');
  }
  </script>

<div style="padding:5px 10px 10px 10px;" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="left_select1"></div>
</td>
<td><div class="reg_select" id="shag1_t">
<div style="color:#FFFFFF;font-weight:bold;text-shadow: 0 1px 0 #4C6FA1;">Шаг 1</div>
<div style="color:#FFFFFF;font-size:10px;padding-top:10px;text-shadow: 0 1px 0 #4C6FA1;">Данные для входа на сайт</div>
</div>
</td>
<td><div class="reg_no_select1" onclick="shag1();" id="shag1_f" style="display:none;">
<div style="color:#444444;font-weight:bold;text-shadow: 0 1px 0 #FFFFFF;">Шаг 1</div>
<div style="color:#444444;font-size:10px;padding-top:10px;text-shadow: 0 1px 0 #FFFFFF;">Данные для входа на сайт</div>
</div>
</td>
   
<td><div class="reg_no_select1" id="shag2_f" onclick="shag2()">
<div style="color:#444444;font-weight:bold;text-shadow: 0 1px 0 #FFFFFF;">Шаг 2</div>
<div style="color:#444444;font-size:10px;padding-top:10px;text-shadow: 0 1px 0 #FFFFFF;">Персональная информация</div>
</div>
</td>
<td><div class="reg_select" id="shag2_t" style="display:none;">
<div style="color:#FFFFFF;font-weight:bold;text-shadow: 0 1px 0 #4C6FA1;">Шаг 2</div>
<div style="color:#FFFFFF;font-size:10px;padding-top:10px;text-shadow: 0 1px 0 #4C6FA1;">Персональная информация</div>
</div>
</td>
   
<td><div class="reg_no_select1" id="shag3_f" onclick="shag3()">
<div style="color:#444444;font-weight:bold;text-shadow: 0 1px 0 #FFFFFF;">Шаг 3</div>
<div style="color:#444444;font-size:10px;padding-top:10px;text-shadow: 0 1px 0 #FFFFFF;">Завершение регистрации</div>
</div>
</td>
<td>
<div class="reg_select" id="shag3_t" style="display:none;">
<div style="color:#FFFFFF;font-weight:bold;text-shadow: 0 1px 0 #4C6FA1;">Шаг 3</div>
<div style="color:#FFFFFF;font-size:10px;padding-top:10px;text-shadow: 0 1px 0 #4C6FA1;">Завершение регистрации</div>
</div>
</td>
<td>
<div class="right_select1">
 
</div>
</td>
</tr>
</table>
</div>
<div style="padding:5px;" align="center">
<strong style="color:#bbb; margin:0px 2px;">$ERROR$</strong>
</div>
<table border="0" cellpadding="0" cellspacing="0" id="shag1_info">
<tr>
<td valign="top" width="881px" style="border-top: 1px solid #DAE1E8;background: #F7F7F7;">
<div style="padding: 15px 20px 15px 20px;">
<div style="border: 1px solid #DAE1E8;background: #FFFFFF; padding:30px 100px 30px 100px;">
<h1>Заполните данные для входа на сайт</h1>
<div style="padding: 5px 0 5px 0;text-align:left;">
<table border="0" cellpadding="0" cellspacing="5" width="100%">

<tr><td>
<h2>Логин</h2>
</td></tr>
<tr><td>
<div>$LOGIN_FL$</div>
</td></tr>


<tr><td>
<h2>Пароль</h2>
</td></tr>
<tr><td>
<div>$PASSWORD_FL$</div>
</td></tr>


<tr><td>
<h2>Подтвердите пароль</h2>
</td></tr>
<tr><td>
<div>$PASSWORD1_FL$</div>
</td></tr>

<tr><td align="center">
<div><input type="button" value="Далее" onclick="shag2();" /></div>
</td></tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="shag2_info" style="display:none;">
<tr>
<td valign="top" width="881px" style="border-top: 1px solid #DAE1E8;background: #F7F7F7;">
<div style="padding: 15px 20px 15px 20px;">
<div style="border: 1px solid #DAE1E8;background: #FFFFFF; padding:30px 100px 30px 100px;">
<h1>Заполните информацию о себе</h1>
<div style="padding: 5px 0 5px 0;text-align:left;">
<table border="0" cellpadding="0" cellspacing="5" width="100%">

<tr><td>
<h2>Имя</h2>
</td></tr>
<tr><td>
<div>$NAME_FL$</div>
</td></tr>

   
  
<tr><td>
<h2>Дата рождения</h2>
</td></tr>
<tr><td>
<div>$BIRTHDAY_FL$</div>
</td></tr>
   
   
   
  
<tr><td>
<h2>Пол</h2>
</td></tr>
<tr><td>
<div>$GENDER_FL$</div>
</td></tr>
   

<tr><td>
<h2>Skype</h2>
</td></tr>
<tr><td>
<div>$AOL_FL$</div>
</td></tr>

<tr><td>
<h2>ICQ</h2>
</td></tr>
<tr><td>
<div>$ICQ_FL$</div>
</td></tr>
   
   
  
<tr><td>
<h2>Сайт</h2>
</td></tr>
<tr><td>
<div>$WWW_FL$</div>
</td></tr>
   
<tr><td>
<h2>Подпись</h2>
</td></tr>
<tr><td>
<div>$SIGNATURE_FL$</div>
</td></tr>
</table>
<div><input type="button" value="Далее" onclick="shag3();" /></div>
</div>
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" id="shag3_info" style="display:none;">
<tr>
<td valign="top" width="881px" style="border-top: 1px solid #DAE1E8;background: #F7F7F7;">
<div style="padding: 15px 20px 15px 20px;">
<div style="border: 1px solid #DAE1E8;background: #FFFFFF; padding:30px 100px 30px 100px;">
<h1>Укажите E-Mail адрес и выберите аватар</h1>
<div style="padding: 5px 0 5px 0;text-align:left;">
<table border="0" cellpadding="0" cellspacing="5" width="100%">
<tr><td>
<h2>E-Mail</h2>
</td></tr>
<tr><td>
<div>$EMAIL_FL$</div>
</td></tr>
<tr><td>
<h2>Аватар (www адрес)</h2>
</td></tr>
<tr><td>
<div>$AVATAR_FL$</div>
<div class="video_date" style="padding-bottom:5px;"><div>Вы можете загрузить сюда аватар расширения JPG, PNG или GIF.<br>Размер изображения не должен превышать 160x200px.</div></div>
</td></tr>
<tr><td align="center">$SECURITY_CODE_FL$</td></tr>
<tr><td align="center">
<input type="hidden" name="grp" value="2">
<div><input id="siF20" type="submit" name="sbm" value="Регистрация"/></div>
</td></tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>


Из прикрепленного архива заливаем все в папку register

Пользуем на здоровье
Категория: Пользователи

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
    • Зайдете ли вы к нам еще?