Simple Login Block

Required JavaScript jQuery files

None required

[ ]

CSS


/*--------------------------------------------------------------------------
login block
--------------------------------------------------------------------------*/			
#login-block {
	background: #e3e3e3;
	width: 200px;
	padding: 10px;
	}

/*--------------------------------------------------------------------------
login block heading
--------------------------------------------------------------------------*/			
#login-block h2 {
	margin-top: 0;
	margin-bottom: 10px;
	color: #555;	
	}

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

/*--------------------------------------------------------------------------
submit button
--------------------------------------------------------------------------*/		
/* div form-item-submit which encases the form submit button */
div.form-item-submit { 
	text-align: right; 
	}

/* input form submit button */
input.form-submit {
	width: 95px;
	border: 1px #ccc solid;
	}

/* input form submit button */
input.form-submit:hover {
	background: white;
	}

/*--------------------------------------------------------------------------
text boxes
--------------------------------------------------------------------------*/		
input {
	width: 198px;
	border: 1px solid;
	border-color: #888 #ccc #ccc #888;	
	padding: 0;
	margin: 0;
	}

/*--------------------------------------------------------------------------
unordered list for create and forgot password
--------------------------------------------------------------------------*/		
/* block containing item list */
#login-block div.item-list {
	margin-top: 10px;
	height: 20px;
	}

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

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

/* menu item link */
#login-block ul li a {
	text-decoration:none;
	text-align: center;
	display: block;
	line-height: 20px;
	background: #F0F0F0;
	color: #555;
	border: 1px solid;
	border-color: #ccc;	
	}
	
#login-block ul li.first { 
	margin-right: 5px;
	}

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

/* hover */	
#login-block ul li a:hover {
	color: #555;
	background: white;
	}

JavaScript

HTML


<p>Login</p>
<p> Username </p>
<p> Password </p>
<ul>
<li class="first"><a href="/zerotouch_dev/using_drupal_source/drupal/user/register" title="Create a new user account.">Create account</a></li>
<li class="last"><a href="/zerotouch_dev/using_drupal_source/drupal/user/password" title="Request new password via e-mail.">Forgot password</a></li>
</ul>