Showing posts with label Module Better Login. Show all posts
Showing posts with label Module Better Login. Show all posts

Saturday, August 30, 2014

Styling Drupal Better Login with CSS

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/css

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;
}