
This is the example of my login page:
the betterlogin.css file:
#auth_box {
width: 300px;
margin: 0 auto;
padding: 50px 0 0;
font-family: sans-serif;
background: #0779bf ;
}
#auth_box h1#the_logo {
text-align: center;
margin: 0;
padding: 0 0 25px;
background: #48a9e4; /* #CEF6F5 ; */
box-shadow: 0 0 3px 1px #ccc;
}
#auth_box h1#the_logo img {
max-width: 250px;
color: white;
}
#auth_box h2.title {
margin: 0;
padding: 0 0 15px;
font-size: 2em;
}
#auth_box input[type="text"],
#auth_box input[type="password"] {
width: 260px;
border: 1px #ccc solid;
border-radius: 3px;
padding: 5px;
font-size: 15px;
}
#auth_box input[type="submit"] {
float: right;
}
#auth_box #middle_part {
border-radius: 3px;
/* background: #E6F810; #fff; */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #4BF6FC),
color-stop(0.56, #E5F810)
);
background-image: -o-linear-gradient(bottom, #4BF6FC 0%, #E5F810 56%);
background-image: -moz-linear-gradient(bottom, #4BF6FC 0%, #E5F810 56%);
background-image: -webkit-linear-gradient(bottom, #4BF6FC 0%, #E5F810 56%);
background-image: -ms-linear-gradient(bottom, #4BF6FC 0%, #E5F810 56%);
background-image: linear-gradient(to bottom, #4BF6FC 0%, #E5F810 56%);
padding: 15px;
overflow: hidden;
box-shadow: 0 0 3px 1px #ccc;
}
#auth_box .back_link {
padding: 15px 0 0;
color: white ;
}
#auth_box #bottom_part {
font-size: 13px;
padding: 15px 0 0;
}
/* WAS */
body.html.not-front.not-logged-in.no-sidebars.page-user.page-user-login {
background: #0779bf;
}
#auth_box .password_link a {
color: white;
}
#auth_box .back_link a {
color: white ;
}
body.html.not-front.not-logged-in.no-sidebars.page-user.page-user-password {
background: #0779bf;
}
#auth_box .login_link a {
color: white;
}
div#edit-actions {
background: #E6F810;
}