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

Rename My Account to Login Username

In Drupal 7, after user login then the user menu "My Account" and "Logout" links appear at the right corner.  This would be better if  I can change the link "My Account" to the login username.


This is the default:

And this is what I want:

STEP 1: Open user.module file
The user.module file can be found in folder /modules/user

STEP 2: Change the code
from:

function user_menu_title() {
  return user_is_logged_in() ? t('My Account') : t('User account');
}

to:
function user_menu_title() {
  return user_is_logged_in() ? $GLOBALS['user']->name : t('User account');
}

another method can be found here:

WYSIWYG editor in Drupal 7.30

In the previous Drupal version (before 7.30), the installation of CKEditor in Drupal was not straight forward. I had to download CKEditor, saved it to the web server then modified a bit the code in CKEditor to get it worked.

Now to get WYSIWYG CKEditor editor working in Drupal 7.30 is simple. Only one module is required, and it works. The installation must be done by the administrator of the website.

This is tested in Drupal 7.30, PhP 5.3.28. The CKEditor installation result is version 4.4.3.

Step 1: Go to Module menu

 

Step 2:  Then select Install new module

Step 3: Get the CKEditor module

Go to the project website https://www.drupal.org/project/ckeditor , then copy the module link location

Step 4: Paste the link to the installation

Step 5: Enable CKEditor module

 Once the installation completed, select Enable newly added modules

 Make sure you enable it, by clicking the selection box

then don't forget to save the configuration (at the bottom of the page)

Step 6: If you create a node, the editor is now equipped with the WYSIWYG tools.