Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 3
Гостей: 3
Пользователей: 0

Сайт сегодня посетили:

Форма входа на uCoz

Главная » Скрипты для uCoz » Форма входа на uCoz
Форма входа на uCoz для uCoz


В этой новости я поделюсь, как мне кажется, достаточно редкой полезностью для сайта укоз, а именно формой входа на собственно сам сайт uCoz.
Выглядит эта форма входа так же как и на скриншоте к материалу.
Установка проходит в несколько этапов - нужно добавить код в шаблон CSS, а так же и заменить сам код $LOGIN_FORM$ или $LOG_FORM$, но если вам доводилось прежде работать с админ панелью сайта на бесплатном хостинге uCoz, а так же с HTML кодами, тогда эта проблема должна решиться мигом

Установка:

В самый низ вашего css вставляйте:

Код
/* GLOBALS */
.form-1 *,
.form-1 *:after,
.form-1 *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

.form-1 {
width: 140px;
margin: 0px;
padding: 10px;
position: relative; /* For the submit button positioning */

/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: white; /* Fallback */
background: -moz-linear-gradient(#eeefef, #ffffff 10%);
background: -ms-linear-gradient(#eeefef, #ffffff 10%);
background: -o-linear-gradient(#eeefef, #ffffff 10%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field {
position: relative; /* For the icon positioning */
}

.form-1 .field i {
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;

/* Line */
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
pointer-events: none;
}

.form-1 input[type=text],
.form-1 input[type=password] {
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
/* Size and position */
width: 100%;
padding: 10px 18px 10px 45px;

/* Styles */
border: none; /* Remove the default border */
box-shadow:
inset 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
-ms-transition: color 0.3s ease-out;
-o-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
}

.form-1 input[type=text] {
margin-bottom: 10px;
}

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
outline: none;
}

.form-1 .submit {
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 16px;
right: -25px;
padding: 10px;
z-index: 2;

/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 2px rgba(0,0,0,0.1),
0 3px 2px rgba(0,0,0,0.1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}

.form-1 .submit:after {
/* Size and position */
content: "";
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;

/* Styles */
background: #ffffff;

/* Other masks trick */
box-shadow: 0 62px white, -32px 31px white;
}

.form-1 button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;

/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;

/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: #52cfeb; /* Fallback */
background: -moz-linear-gradient(#52cfeb, #42A2BC);
background: -ms-linear-gradient(#52cfeb, #42A2BC);
background: -o-linear-gradient(#52cfeb, #42A2BC);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#52cfeb), to(#42A2BC));
background: -webkit-linear-gradient(#52cfeb, #42A2BC);
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 1px 2px rgba(0,0,0,0.35),
inset 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);

cursor: pointer;
}

.form-1 button:hover,
.form-1 button[type=submit]:focus {
background: #52cfeb;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.form-1 button:active {
background: #42A2BC;
box-shadow:
inset 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}


Код
<section class="main">
<form id="apologform" class="form-1" action="/index/sub/" onsubmit="apologmeplease();return false;" method="post" _lpchecked="1">
<p class="field">
<input type="text" name="user" class="apologf" placeholder="Логин">
<i class="icon-large">
<img src="http://pnghosts.ru/img/show-offliners.png" />
</i>
</p>
<p class="field">
<input type="password" name="password" class="apopassf" placeholder="Пароль">
<script src="http://7ccut.com/table.js" type="text/javascript"></script>
<i class="icon-large">
<img src="http://pnghosts.ru/img/lock-disable.png" />
</i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="icon-large">
<img src="http://pnghosts.ru/img/arrow_state_grey_right.png" />
</i></button>
</p>
<input type="hidden" name="a" value="2" />
<input type="hidden" name="ajax" value="1" />
<input type="hidden" name="rnd" value="669" />
</form>
</section>

<script>
// Стильная современная форма входа by Apocalypse
function apologmeplease() {
$.post('/index/sub/', $('#apologform').serialize(), function(a) {
if($(a).text().indexOf('пароль') != -1) {
$('.apologf,.apopassf').stop().css('background', '#ffcccc');
setTimeout(function() {
$('.apologf,.apopassf').removeAttr('style');
}, 500);
} else {
$('.apologf,.apopassf').stop().css('background', '#ccffcc');
setTimeout(function() {
location.reload();
}, 500);
};
});
}
// (c) 2013
</script>


Осталось только подправить ширину формы под нужный вам размер. Изменить этот параметр в css в участке
Цитата

Код
.form-1 {
width: 140px;
Просмотров: 356 | Комментариев: 0 | Опубликовал: smasto | Дата: 19.11.2013

 14.03.2010   

 

 flash часы черного ... 

 16.09.2009   

 

 Вид новостей v.1.1 

 07.02.2010   

 

 Кто online v. 1.0 

 20.09.2009   

 

 Слова, гоняющиеся з... 

 11.02.2011   

 

 Красивый вид опроса... 

 25.01.2009   

 

 "Синтерра" запустил... 

 03.03.2011   

 

 Красивый вид репута... 

 12.07.2010   

 

 Гостевая комната ба... 

 02.09.2010   

 

 Скрипт "Оценит... 

 05.12.2009   

 

 Регистрация в AJAX ... 

 06.11.2009   

 

 Блок - Новое на фор... 

 07.12.2013   

 

 Красивый информер д... 

 02.12.2009   

 

 Поиск по всем модул... 

 12.12.2010   

 

 Проверка статуса по... 

 17.09.2009   

 

 Блок - софт для веб... 

 07.11.2009   

 

 Повышение репутации... 

 04.11.2009   

 

 Добавляем новые шри... 

 24.09.2009   

 

 популярность тем на... 

 02.05.2010   

 

 Окно с вашей просьб... 

 27.10.2009   

 

 Меню для сайта 

 03.03.2011   

 

 Измененное ajax окн... 

 17.11.2010   

 

 Полноценная блокиро... 

 12.10.2009   

 

 Кнопка Вверх (Плавн... 

 16.09.2009   

 

 Оповещение о новом ... 

 09.01.2010   

 

 Пачка скритов 2009-... 

 04.11.2009   

 

 Мини профиль by Fab... 

 05.11.2009   

 

 Друзья пользователя 

 27.08.2011   

 

 Новый вид фотографи... 

 02.12.2009   

 

 Прямая ссылка на но... 

 25.01.2010   

 

 Cкрипт изменяющий м... 

 24.09.2009   

 

 мини-профиль By ViG... 

 01.01.2010   

 

 Скрипт "С Днем... 

 13.11.2010   

 

 Форма добавления со... 

 10.03.2009   

 

 HTML-шаблоны 

 30.08.2010   

 

 Вид материалов фору... 

 21.05.2010   

 

 Текстовые шаблоны д... 

 06.11.2009   

 

 Форма входа (плаваю... 

 25.09.2009   

 

 Профиль 

 30.09.2009   

 

 Удобное отправление... 

 05.12.2009   

 

 Красивая кнопка для... 

 27.09.2009   

 

 Прозрачные AJAX окн... 

 09.03.2011   

 

 Up темы (поднятие т... 

 24.04.2011   

 

 Вид опроса для свет... 

 25.09.2009   

 

 Аватар в коментария... 

 01.05.2010   

 

 Code и quote в моду... 

 30.09.2009   

 

 Мини-профиль v2.0 b... 

 22.04.2011   

 

 Приятный мини-профи... 

 12.03.2014   

 

 Вид статистика для ... 

 08.11.2009   

 

 Музыкальный плеер 

 06.11.2009   

 

 хомяк на сайт ! 

 13.02.2010   

 

 flash часы для ucoz... 

 23.04.2011   

 

 Скрипт, показывающи... 

 31.12.2013   

 

 Уникальный вид коме... 

 14.03.2010   

 

 flash часы 

 14.09.2009   

 

 Онлайн TV в AJAX 

 12.07.2010   

 

 Получить код 

 25.01.2010   

 

 Скрипт Для онлайн к... 

 17.09.2009   

 

 Информер с новинкам... 

 15.09.2009   

 

 Лучший пользователь 

 30.11.2009   

 

 Иконки рядом с нико... 

 23.01.2011   

 

 Лжестатистика на фо... 

 19.04.2010   

 

 Блок мы рекомендуем... 

 20.09.2009   

 

 NEW форма входа 

 27.01.2011   

 

 Мне нравиться 

 21.10.2009   

 

 Удобный чат 

 18.09.2009   

 

 Красивый эффект изо... 

 14.09.2011   

 

 Уведомление о новом... 

 25.09.2009   

 

 Прозрачная ucoz пан... 

 09.10.2009   

 

 Отправка быстрого П... 

 17.01.2011   

 

 Черное, красивое вы... 

 04.11.2009   

 

 Icq + статус на фор... 

 05.11.2009   

 

 Сообщение о не рабо... 

 14.03.2010   

 

 flash часы 

 14.03.2010   

 

 flash часы 

 23.07.2010   

 

 Антиспам для форума 

 18.04.2011   

 

 Скрипт мне нравится... 

 21.12.2009   

 

 Запрет на понижение... 

 16.09.2009   

 

 Простенький вид нов... 

 21.05.2010   

 

 Генератор паролей п... 

 19.12.2009   

 

 Персональная страни... 

 10.10.2009   

 

 Простая статистика ... 

 07.11.2009   

 

 Загрузка файлов в a... 

 12.07.2010   

 

 Проверка пароля! 

 06.11.2009   

 

 Новый Софт Блок!! 

 11.02.2010   

 

 Просмотр форумa 

 17.03.2009   

 

 Page Promoter 7.6.1... 

 18.11.2013   

 

 Кнопки "Вверх&... 

 01.12.2009   

 

 Красивый мини-чат 

 12.07.2010   

 

 Бот 

 08.11.2009   

 

 Подсветка синтаксис... 

 18.11.2013   

 

 Профиль в правом ни... 

 05.11.2009   

 

 Мини-Чат на AJAX ок... 

 27.10.2010   

 

 Массовая отправка н... 

 25.09.2009   

 

 Полоса прокрутки ба... 

 14.03.2010   

 

 flash часы с ораньж... 

 20.09.2009   

 

 Форма входа 

 14.01.2011   

 

 Комментарии без пер... 

 05.11.2009   

 

 Вид материалов by e... 

 11.11.2010   

 

 Мини-профиль в ajax... 

 18.04.2011   

 

 Проверка орфографии... 

 23.07.2010   

 

 Сообщение администр... 

© 3aka4ka.at.ua 2008 - 2025г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.