Styled Login Block

Required JavaScript jQuery files

Login

or recover your password

CSS


/*--------------------------------------------------------------------------
login block
--------------------------------------------------------------------------*/			
#login-block {
	background: #E8EFF3;
	width: 190px;
	padding: 10px;
	}

/*--------------------------------------------------------------------------
login block heading
--------------------------------------------------------------------------*/			
#login-block h2 {
	margin-top: 0;
	margin-bottom: 10px;
	color: white;	
	width: 90px;
float: left;
text-align: center;
	
	font-size: 12px;
	line-height: 20px;
	}

/*--------------------------------------------------------------------------
block element containg form items - text boxes and submit button
--------------------------------------------------------------------------*/			
.form-item {
	margin-top: 10px;
/*	margin-bottom: 0px;*/
	/*border: 1px red dotted;*/
	}

/*--------------------------------------------------------------------------
text boxes
--------------------------------------------------------------------------*/		
input[type=text] {
	width: 188px;
	border: 1px solid;
	border-color: #888 #ccc #ccc #888;	
	padding: 0;
	margin: 0;
	}


#login-block input[type=text]:focus {
	background-color: #ffffcc;
}

/*--------------------------------------------------------------------------
unordered list for create and forgot password
--------------------------------------------------------------------------*/		
/* block containing item list */
#login-block div.item-list {
	margin-bottom: 0px;
	height: 30px;
	background: url(../images/login-block-login-rounded-bg.png) no-repeat;
	width: 190px;
/*border: 1px red dotted;*/
	}

/* unordered list */
#login-block ul { 
	padding: 0;
	margin: 0;
	display: inline; 
	font-size: 10px;
	list-style-type: none;
	float: left;	
	}

/* unordred list line indent */
#login-block ul li { 
	margin: 0;
	float: left;
	width: 100px;
	}

/* menu item link */
#login-block ul li a {
	text-decoration:none;
	text-align: center;
	display: block;
	line-height: 20px;
	background: url(../images/login-block-new-account-rounded-bg.png) no-repeat;
	color: white;
/*	border: 1px solid;
	border-color: #ccc;	*/
	width: 100px;
	}
	
#login-block ul li.first { 
	margin-right: 0px;
	}

#login-block ul li.last { 
	/*margin-left: 5px;*/
	}

/* hover */	
#login-block ul li a:hover {
	background: url(../images/login-block-new-account-rounded-hover-bg.png) no-repeat;
	}


div.form-item span {
	font-size: 10px;
	}

JavaScript

HTML


<div id="login-block">

<div class="item-list">
<h2>Login</h2>
<ul><li class="last"><a href="/zerotouch_dev/using_drupal_source/drupal/user/password" title="Create a new user account.">Create
account</a></li></ul></div>


<form action="" method="get">

<div class="form-item" id="edit-name-wrapper">
 <span><label for="edit-name">Username</label></span><input type="text" maxlength="60" name="name" id="edit-name" value=""
class="form-text required" /></div>

<!--<br class="clear-float" />-->

<div class="form-item" id="edit-name-wrapper">
 <span><label for="edit-password">Password</label></span><input type="text" maxlength="60" name="password" id="edit-password"
value="" class="form-text required" /></div>

<div class="form-item form-item-submitx"><input type="submit" name="op" id="edit-submit" value="Login &#187;"  class="form-submit" />
<span>or <a href="./" title="Request new password via e-mail.">recover your password</a></span></div>

</div>