Главная » Скрипты » Компактная форма входа серебряного цвета 09.08.2012 17:04
DEMO |
Ну что же, приступим к установке ? Для начала можно посмотреть демонстрацию, а вот теперь давай посмотрим на код CSS: Code #logform{ width:260px; border:none; background:none; } input#lognamepass{ color:#666; margin-top:3px!important; font-size:14px!important; width:255px!important; padding:5px; float:left!important; box-shadow: 0 0 5px #ccc; -mox-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; border:1px solid #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: -webkit-linear-gradient(top, #ccc, #fff)!important; background: -moz-linear-gradient(top, #ccc, #fff)!important; background: -ms-linear-gradient(top, #ccc, #fff)!important; background: -o-linear-gradient(top, #ccc, #fff)!important; } input#logbutton{ color:#666; font-size:14px!important; float:left!important; margin-top:3px!important; width:255px!important; cursor:pointer; padding:5px 0 5px 0; text-align:center; display:inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:none!important; background: -webkit-linear-gradient(top, #ccc, #fff)!important; background: -moz-linear-gradient(top, #ccc, #fff)!important; background: -ms-linear-gradient(top, #ccc, #fff)!important; background: -o-linear-gradient(top, #ccc, #fff)!important; box-shadow: 0 0 5px #999; -mox-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; } input#logbutton:hover{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:none!important; -webkit-box-shadow: 0 0px 2px rgba(0,0,0,0.25), inset 0 0 3px #666!important; -moz-box-shadow: 0 0px 2px rgba(0,0,0,0.25), inset 0 0 3px #666!important; box-shadow: 0 0px 2px rgba(0,0,0,0.25), inset 0 0 3px #666!important; } input#lognamepass:focus{ border:1px solid #999; box-shadow: 0 0 5px #999; -mox-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; background: -webkit-linear-gradient(top, #fff, #eee)!important; background: -moz-linear-gradient(top, #fff, #eee)!important; background: -ms-linear-gradient(top, #fff, #eee)!important; background: -o-linear-gradient(top, #fff, #eee)!important; } Если нужно поменять размеры(для тех кто не знает как и что.) нужно изменить: 260px на свои значения. Теперь нужно зайти в управление дизайном и найти "Форма входа пользователей" И заменить там все этим кодом:Code <div id="logform"> <input id="lognamepass" type="text" name="user" value="Логин/E-mail" onblur="if(this.value=='') this.value='Логин/E-mail';" onfocus="if(this.value=='Логин/E-mail') this.value='';"/> <div style="clear:both;"></div> <input id="lognamepass" type="password" name="password" value="**********" onblur="if(this.value=='') this.value='**********';" onfocus="if(this.value=='**********') this.value='';"/> <div style="clear:both;"></div> <input id="logbutton" name="sbm" type="submit" value="Войти" /> </div> Теперь сохраняем и смотрим на результат. И еще хочу сказать о условных операторах этой формы. $LOGIN_FORM$ это - именно то что мы изменяем.(нужно ставить там где хотим видеть эту форму) $LOG_FORM$ а это - стандартная форма входа, ее нельзя изменять, тем более мы используем красивую форму входа - зачем нужна стандартная ?
|
|
Добавлять комментарии могут только зарегистрированные пользователи. Регистрация | Вход
|
Полезная информация
Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера
Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px
Mozilla Firefox - один из лучших браузеров (рекомендуем)
Opera - Популярный браузер, но не полностью поддерживает CSS3
Google Chrome - один из лучших и быстрых браузеров
Safari - Качественый браузер от компании Apple
Яндекс.Браузер - браузер от Яндекс на платформе Chrome
|