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(
    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 */ {
  background: #0779bf;

 #auth_box .password_link a {
    color: white;

  #auth_box .back_link a {
    color: white ;
  } {
  background: #0779bf;
 #auth_box .login_link a {
    color: white;
div#edit-actions {
  background: #E6F810;

Thursday, August 28, 2014

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

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

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

another method can be found here:

Saturday, August 9, 2014

Minbar Prayer Times in Ubuntu 14.04

I recently installed Ubuntu 14.04 replacing the old version 11.04 (not upgrading), then I did the following steps to install Minbar Prayer

a) Install Minbar Prayer Times from Ubuntu Software Center
b) Include minbar in startup program
c) Set the preference of minbar to "startup minimised to tray"
In older Ubuntu versions Minbar Prayer Times should be located on right top panel, but now it is missing. Rebooting the machine did not help.

Then I did the following steps to show the Minbar icon:
Step 1: From Ubuntu terminal (Ctrl+Alt+T), enter the command
sudo apt-add-repository ppa:gurqn/systray-trusty
Step 2: enter the command
sudo apt-get update

Step 3: enter the command
sudo apt-get upgrade
Step 4: then reboot the system by entering the command
sudo reboot

Finally the icon Minbar Prayer Time shown on top panel, and it starts (but minimised mode) every time the system starts.

Another reference related this problem can be found here.

Wednesday, August 6, 2014

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 , 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.