Вот решил сделать для сайта новую не стандартную форму входа в аккаунт пользователя, проверил в браузерах Мазила и IE8 где в последнем есть небольшой баг в стилях размеров кнопок.В следующей версии изменим баг и сделаем более универсальной саму форму.Новая форма входа не стандартная от ucozon
Так же есть удобства того что при клике поля ввода стандартная надпись исчезает, и если не вставлен не один символ то окно заполняется автоматический стандартной надписью Ваш Login на ucozon.ru, не забывайте изменить под свои запросы саму надпись при установке, так же на символы ввода наложен сам стиль цвета, по этому если вы хотите изменить его то делаете это только в стиле который вверху формы авторизации, прошу вас уважать труды сайта ucozon.ru и при копирование материала указывать первоисточник материала , что бы мы в последующем имели желание модернизировать данный не стандарт ucoz
Приступим к установке, все просто копируем код и заменяем стандартную форму, ширина самой формы статическая в 185 px на многих сайтах ширина блока меньше по этому если превышает внизу написано как уменьшить в 3 настройках размеров и сам тип шрифта.
сам пример смотрим на скрине, цвет кнопок в коде голубой с тематикой Вконтакте, на скрине вышла черно белым так как windows цвета не передаются, сам пример живой формы можно смотреть на нашем тестовом сайте
Установка:
Вставляем в место стандартной формы $LOGIN_FORM$
Внимание:Распространенная ошибка пользователей нашего сайта ucozon.ru в том что оставляют несколько форм на одной странице, что нарушает работу, рабочей версией остается та форма которая выше по коду страницы, по этому не советуем оставлять несколько форм авторизации на сайте
Code
<?if($LOGIN_FORM$)?>
<script type="text/javascript">
sendFrm549687=function(){
var o=$('#frmLg549687')[0],pos=_uGetOffset(o),o2=$('#blk549687')[0];
document.body.insertBefore(o2,document.body.firstChild);
$(o2).css({top:(pos['top'])+'px',left:(pos['left'])+'px',width:o.offsetWidth+'px',height:o.offsetHeight+'px',display:''}).html('<div align="left" style="padding:5px;"><div class="myWinLoad"></div></div>');
_uPostForm('frmLg549687',{type:'POST',url:'/index/sub/',error:function() {
$('#blk549687').html('<div align="left" style="padding:10px;"><div class="myWinLoadSF" title="Невозможно выполнить запрос, попробуйте позже"></div></div>');
_uWnd.alert('<div class="myWinError">Невозможно выполнить запрос, попробуйте позже</div>','',{w:250,h:90,tm:3000,pad:'15px'});
setTimeout("$('#blk549687').css('display','none');",'1500');
}
});
}
</script>
<style>
#buttonLOGIN{background:#6386d0;border:1px solid #3358a5;padding:3px;margin-top:1px;font-size:11px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:none;}
#buttonLOGIN:hover{background:#7e9fe4;border:1px solid #3358a5;padding:3px;margin-top:1px;font-size:11px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:none;}
#buttonLOGIN:active{background:#4f72bd;border:1px solid #3358a5;padding:3px;margin-top:1px;font-size:11px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:none;}
#buttonLOGIN1{background:#6386d0;border:1px solid #3358a5;padding:2px;margin-top:0px;font-size:11px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:none;}
#buttonLOGIN1:hover{background:#7e9fe4;border:1px solid #3358a5;padding:2px;margin-top:0px;font-size:11px;color:#FFF;font-weight:bold;cursor:pointer;text-decoration:none;}
fieldset {border:1px solid #a3bae9; padding:2px 5px; margin-bottom:3px;}
.loginField {font-size:11px;color:#999;text-decoration:none;}
.remsiteRega {display:none}
</style>
<fieldset style="width: 185px;">
<div id="blk549687" style="border: 1px solid rgb(204, 204, 204); position: absolute; z-index: 82; background: url("http://s44.ucoz.net/img/fr/g.gif") repeat scroll 0% 0% transparent; display: none;"></div><form id="frmLg549687" action="/index/sub/" method="post" style="margin: 0pt;" onsubmit="sendFrm549687();return false;">
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<tbody><tr><td><input class="loginField" name="user" onblur="if (value == '') {value = 'Ваш Login на ucozon.ru'}" onfocus="if (value == 'Ваш Login на ucozon.ru') {value =''}" value="Ваш Login на ucozon.ru" size="20" style="width: 100%;" maxlength="50" type="text"></td></tr>
<tr><td><input class="loginField" name="password" size="20" style="width: 100%;" maxlength="15" type="password" onblur="if (value == '') {value = 'Пароль'}" onfocus="if (value == 'Пароль') {value =''}" value="Пароль"></td></tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<tbody><tr><div class="remsiteRega"><input id="remsitePage1" name="rem" value="1" checked="checked" type="checkbox"><label for="remsitePage1"></label></div>
<td><input id="buttonLOGIN1" class="loginButton" name="sbm" value="Вход" type="submit"></td>
<td><a id="buttonLOGIN" href="javascript://" rel="nofollow" onclick="new _uWnd('Prm','Напоминание пароля',300,130,{autosize:1,closeonesc:1},{url:'/index/5'});return false;">Вспомнить</a></td>
<td><a id="buttonLOGIN" href="$REGISTER_LINK$">Регистрация</a></td>
</tr>
</tbody></table>
<input name="a" value="2" type="hidden"><input name="ajax" value="1" type="hidden"><input name="rnd" value="687" type="hidden"></form>
</fieldset><?endif?>
Настройка размеров через
size="20" настройка размеров ввода логина и пароля по длине
<fieldset style="width: 185px;"> размер рамки вокруг формы
Будут еще обновления версии формы и вы их сможете увидеть на нашем саййте ucozon
автор: mdbaner сайт автора: www.ucozon.ru Внимание: при копирование материала ссылка на сайт автора клик-кабельная обязательна http://ucozon.ru , в противном случае на ваш сайт будет подана жалоба по статье: 2.3. При цитировании материалов Сайта, включая охраняемые авторские произведения, ссылка на Сайт обязательна (подпункт 1 пункта 1 статьи 1274 Г.К РФ).