6.11.13, 22:50
1 комментарий
  DLE Хаки

Форма входа в админцетр DataLife Engine

Решил разнообразить то, что вижу каждый раз при входе в админцетр DLE. Стандартная форма входа, по-моему, ужасна. Как, впрочем, и большинство стандартных элементов этой CMS, включая шаблоны.

Макет отыскал в сети и при верстке шел по пути наименьшего сопротивления: фон формы - PNG изображение, input'ы - CSS-спрайт с разными состояниями полей. Стандартный чекбокс скрыт и вместо него сделан передвижной, с использованием CSS3.

Можно было бы, конечно, сверстать все используя лишь две иконки: ключа и пользователя. Но так как форма входа в адмику - это элемент не настолько массовый как сам сайт или админка, то я решил не заморачиваться.

Кстати, крестик в правом верхнем углу не закрывает форму, а сбрасывает значение полей.

Смотрите скрины.

Инструкция по применению:

1. Скачать архив imgs.zip и его содержимое (2 картинки) загрузить в каталог /engine/skins/images/

2. Открыть /engine/skins/default.skin.php,
найти код:

$skin_login = <<<HTML 


и удалить весь код идущий после, до:

HTML;


3. Вместо удаленного фрагмента вставить: (картинку и тайтл заменить на свои):

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Firstvector.org backoffice</title>
	<meta charset="{$config['charset']}" />
	<link rel="stylesheet" href="engine/skins/default.css?v=2">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script>
		jQuery(document).ready(function($){
			if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
				$(window).load(function(){
					$('input:-webkit-autofill').each(function(){
						var text = $(this).val();
						var name = $(this).attr('name');
						$(this).after(this.outerHTML).remove();
						$('input[name=' + name + ']').val(text);
					});
				});
			}
		});
	</script>
</head>
<body>
	<div class="login">
		<div class="avatar">
			<img src="/templates/sbport/dleimages/noavatar.png" alt="Firstvector.org" />
		</div>
		<form name="login" action="" method="post">
			<input type="hidden" name="subaction" value="dologin" />
			<input type="reset" value="" />
			<div class="username">
				<input type="text" name="username" placeholder="Username" />
			</div>
			<div class="password">
				<input type="password" name="password" placeholder="Password" />
			</div>
			<div class="chckbox">
				<div class="slide">	
					<input type="checkbox" value="1" id="login_not_save" name="login_not_save" />
					<label for="login_not_save"></label>
				</div>
				<label for="login_not_save" class="label">Чужой компьютер?</label>
			</div>
			<input type="submit" value="Enter" />
			<div class="error">{result}</div>
		</form>
	</div>
</body>
</html>


4. Открыть /engine/skins/default.css и в конец файла добавить:

/* LOGIN */
.login {
	position:relative;
	top:200px;
	width:335px;
	height:250px;
	margin:0 auto;
	padding:10px 10px 0;
	background:url(./images/formbg.png) no-repeat;
}
.login input[type="reset"] {
	position:absolute;
	right:13px;
	top:11px;
	width:13px;
	height:13px;
	background:none;
	cursor:pointer;
}
.avatar {
	position:relative;
	width:65px;
	height:65px;
	margin:5px auto;
	overflow:hidden;
}
.avatar:after,
.avatar:before {
	content:"";
	position:absolute;
	z-index:2;
	top:3px;
	left:3px;
	right:3px;
	bottom:3px;
	-webkit-border-radius:50%;
	border-radius:50%;
	-webkit-box-shadow:0 0 3px 0 #ccc;
	box-shadow:0 0 3px 0 #ccc;
}
.avatar:after {
    z-index:1;
    -webkit-box-shadow:0 0 0 50px #fff;
	box-shadow:0 0 0 50px #fff;
}
.avatar img {
	display:block;
	min-width:65px;
	max-width:65px;
	min-height:65px;
	max-height:65px;
}
.login form {
	clear:both;
	width:218px;
	margin:20px auto 0;
}
.login input {
	border:none;
}
.login input:focus {
	outline:none;
}
.login input::-webkit-input-placeholder {
	color:#999;
}
.login input:-moz-placeholder {
	color:#999;
}
.login input[type="password"],
.login input[type="text"] {
	font-size:12px;
	font-family:Candara;
	color:#999;
	width:168px;
	height:30px;
	padding:0 10px 0 40px;
	background:url(./images/forminput.png) no-repeat;
}
.login input[type="password"]:focus,
.login input[type="text"]:focus {
	-webkit-box-shadow: 0 0 3px rgba(130,211,79,.6) inset, 0 0 2px #82d34f;
	box-shadow: 0 0 3px rgba(130,211,79,.6) inset, 0 0 2px #82d34f;
}
.login input[type="text"] {
	margin-bottom:12px;
}
.login input[type="text"]:focus {
	background-position:0 -60px;
}
.login input[type="password"] {
	background-position:0 -30px;
}
.login input[type="password"]:focus {
	background-position:0 -90px;
}
.chckbox {
	float:left;
	height:24px;
	margin:20px 0 8px 5px;
}
.label {
	float:left;
	height:20px;
	cursor:pointer;
	color:#999;
	margin:-1px 0 0 10px;
	font-size:11px;
	font-family:Candara;
	-moz-user-select:none;
	-khtml-user-select:none;
	user-select:none;
}
.chckbox label:hover {
	color:#222;
}
.slide {
	position:relative;
	float:left;
	width:40px;
	height:14px;
	background:#91bf73;
	-webkit-border-radius:50px;
	border-radius:50px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2);
}
.slide label {
	position:absolute;
	top:-1px;
	left:25px;
	display:block;
	width:16px;
	height:16px;
	-webkit-border-radius:50px;
	border-radius:50px;
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	-o-transition:all .4s ease;
	-ms-transition:all .4s ease;
	transition:all .4s ease;
	cursor:pointer;
	-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.7);
	box-shadow:0 0 2px 0 rgba(0,0,0,.7);
	background:#fcfff4;
	background:-webkit-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:-moz-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:-o-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:-ms-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4',endColorstr='#b3bead',GradientType=0);
}
.slide input[type=checkbox]:checked + label {
	left:0;
}
.login input[type="submit"] {
	position:relative;
	float:right;
	height:20px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	font-family:Candara;
	cursor:pointer;
	margin-top:15px;
	background:#ccc;
	-webkit-box-shadow:0 2px 0 1px #bcbcbc;
	box-shadow:0 2px 0 1px #bcbcbc;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.login input[type="submit"]:hover {
	background:#8db96f;
	-webkit-box-shadow:0 2px 0 1px #80a269;
	box-shadow:0 2px 0 1px #80a269;
}
.login input[type="submit"]:focus {
	top:1px;
	background:#8db96f;
	-webkit-box-shadow:0 0 0 1px #80a269;
	box-shadow:0 0 0 1px #80a269;
}
.error {
	clear:both;
	font-size:11px;
	font-family:Candara;
	margin-left:3px;
}


Автор: BR0kEN)

СКАЧАТЬ

Вес файла
2.7 Kb

Реклама

Комментарии

  1. NorDULaN Пользователь offline 7 ноября 2013 12:46                    

    ооо шикарно..
    С ещё одним модулем если совместить.. будет круто dance3

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204