Рейтинг: 3.0/2

Метки

вид формы входа, дизайн веб-формы

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » 2011 » Май » 26 » Форма входа аля "Одноклассники.ру" на Вашем сайте!

Итак, к чему мы будем стремиться:





И что мы имеем в данный момент (стандартное оформление формы входа системы uCoz для дизайна #971)



Для начала мы зайдем в Таблицу стилей (CSS) в Управлении дизайном - Редактировании шаблонов и найдём, в каком таком месте прописано столь ужасное оформление кнопки "Вход".
За её оформление отвечает класс .loginButton

Code
{font-size:7pt;background: #8D8A83;color:#DAD7CC;border:1px outset #615E58;}


Удаляем эту строчку, либо удаляем класс .loginButton из списка перечисляемых классов

Code
.pollBut, .loginButton,.searchSbmFl, .commSbmFl, .signButton {font-size:7pt;background: #8D8A83;color:#DAD7CC;border:1px outset #615E58;}


Пропишем свойства для класса .loginField, отвечающего за оформление полей ввода формы

Code
.loginField {height:25px;color:#666;}


Сохраним изменения. Идём дальше: заходим в редактирование шаблона "Первый контейнер"

и код блока с формой входа

Code

<!-- <block6> -->
<?if($LOGIN_FORM$)?>
<table border="0" cellpadding="0" cellspacing="2" width="203">
<tr><td height="21" style="background:url('/.s/t/971/9.gif') #D4DFF7;padding-left:30px;"><b><!-- <bt> --><!--<s5195>-->Форма входа<!--</s>--><!-- </bt> --></b></td></tr>
<tr><td style="background:#F1F1F1;padding:10px;border:1px solid #A7A6A6;"><!-- <bc> -->$LOGIN_FORM$<!-- </bc> --></td></tr>
</table>
<?endif?>
<!-- </block6> -->


меняем на следующий

Code

<!-- <block6> -->
<?if($LOGIN_FORM$)?>
<table border="0" cellpadding="0" cellspacing="2" width="203">
<tr><td style="background:#ECF2F4;padding:10px;border:1px solid #E0EBED;"><!-- <bc> -->$LOGIN_FORM$<!-- </bc> --></td></tr>
</table>
<?endif?>
<!-- </block6> -->


Затем входим в редактирование шаблона "Форма входа пользователей" и заменяем имеющийся в нём код на следующий

Code

<?if($PAGE_ID$="login")?><div style="width:180px;"><?endif?>
<?if($ERROR$)?><p style="color:red;text-align:center;">$ERROR$</p><?endif?>
<p style="font: 12px normal Arial, Helvetica, sans-serif;font-weight:bold;">Вход на сайт</p>
<span style="display:block;padding:5px 5 5 0px;font: 12px normal Arial, Helvetica, sans-serif;">Логин или E-mail:</span>
<input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/>
<span style="display:block;padding:5px 5 5 0px;font: 12px normal Arial, Helvetica, sans-serif;">Пароль:</span><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/>
<p style="padding-top:10px;font: 12px normal Arial, Helvetica, sans-serif;" nowrap><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?>
<input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></p>
<p><input class="loginButton" name="sbm" type="submit" value="Войти"/>    <a href="$REMINDER_LINK$"><span style="font: 12px normal Arial, Helvetica, sans-serif;">Забыли пароль?</span></a></p>
<?if($PAGE_ID$="login")?></div><?endif?>


В итоге получаем наше новое оформление для формы входа:

Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: