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

14 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. Thanks for the solution..For best and cheap manual Seo services, Web designings. Must check Web Design Bangalore

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

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

    ReplyDelete
  11. Marketing92 is offering the top Quality Services for Development in Pakistan. We are dealing with all types of websites for our Clients by providing the Web Development in Lahore. We have the best team of Web Developer in Lahore, Pakistan for making awesome websites for clients and provide them complete support regarding their websites.

    ReplyDelete
  12. This is a wonderful constrain. I enjoyed the accruement lot. I acquisition scoring this communicator. Thanks for cropped this mensurable nub.

    ReplyDelete
  13. This is a nice and informative, containing all information and also has a great impact on the new technology. Thanks for sharing it website maintenance firm

    ReplyDelete
  14. We have different vehicles with various weight restricts that can oblige all your business needs! The most ideal approach to keep any thing sound and fresh is to verify in a temperature-controlled condition.Chiller truck rental in uae

    ReplyDelete