I use Drupal module Better Login. The default style is so plain. Styling is necessary to change the look of the login page. The style can be changed by modifying the css file betterlogin.css in folder /sites/all/modules/betterlogin/cssThis 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;
}






















