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

11 comments:

  1. A good example in styling better login in drupal. Nice gradation in #auth_box #middle_part

    ReplyDelete
  2. For the color gradation, I generated the css codes using CSS Gradient Generator.

    ReplyDelete
  3. https://www.reddit.com/r/carvspan/comments/34qpb1/ Copy Trade Profit Review

    ReplyDelete
  4. Before beginning with the list of pros and cons, it is critical to highlight the core tenets of binary trading for those who are unaware. It is important to understand what binary trading is before moving forward. Binary trading can be defined as investing on the fluctuations (ups and downs) of a particular asset. Instead of hoping for an asset to rise, you are investing on whether it will rise or fall in the near future.


    https://www.strava.com/clubs/138191/group_events/48381
    https://www.strava.com/clubs/138193/group_events/48388
    https://www.strava.com/clubs/138201/group_events/48480
    https://www.strava.com/clubs/138204/group_events/48491

    ReplyDelete
  5. it's awesome app
    we have a Great collection, very beautiful and gorgeous weeding dress, looking nice also we offer u to visit our sides
    bridal lace for weeding dress.

    ReplyDelete
  6. Thank you so much for sharing this one really well defined all peaceful info,I Really like it,Love it- Hire Drupal Developer

    ReplyDelete
  7. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us. Web Design Company Bangalore | Website Designing Bangalore

    ReplyDelete
  8. It was a great information and Its really worth reading it. The author did an mind blowing work by describing each and every concept in detail. Thanks for such an informative post. Please keep up your good work.
    Engineering Colleges in Chennai

    ReplyDelete
  9. Thanks for the solution..For best and cheap manual Seo services, Web designings. Must check Web Design Bangalore

    ReplyDelete
  10. Very nice blog. It will gives complete information on SEO. Thanks for sharing!
    Web Development Services in India | Web Design Company in India

    ReplyDelete
  11. I would like to add Header, Main menu and footer to the better login. Can u help me how to implement.

    ReplyDelete