Home

Login / Register

My Menu

Links

Customizing the Drupal Login Block as Horizontal Bar and Adding Links

Drupal Menu system is great indeed but it lacks support for arguments and links based on some custom php logic. Consider a scenario when you want to create a facebook style login bar that when logged out displays a facebook type horizontal login bar with username and password fields and after logged in, displays primary links including a link to current user and logout.

Follow the steps and you will get something like that working.

1- Create a block with following code and php code as input filter:

<?php
print "<ul id='mylinkbar'>";
print
"<li><a href='#'>Link Title</a></li>";//add your primary links manually
print "<li><a href='#'>Link Title</a></li>";
print
"<li><a href='#'>Link Title</a></li>";

global $user;
if (
$user->uid) {
print
"<li>";
print
l($user->name,"user");
print
"</li>";
print
"<li>";
print
l(" Log Out " ,"logout");
print
"</li>";
}
print
"</ul>";
?>

2- Add this block in the region you want this link bar to appear e.g. primary links, header, footer region or whatever region you have in your theme.

3- Add the default Drupal User Login Block in same region as above.

4- Add the following css code at the end of your stylesheet. Change the colors and other variable properties as per your theme.

// Css Code for making Default Drupal Block to appear as horizontal bar.
#block-user-0 {
margin: 2em 0 1em;
}
#block-user-0 *
{
display: inline;
color:#292928;
}
#edit-user-login-block {
display:none; /* rehide hidden form element */
}
#block-user-0 h2 {
font-size: 92%;
}
#block-user-0 .form-item {
margin-left: 1em;
font-size:11px;
}
#block-user-0 li {
list-style:none;
background:none;

}
#block-user-0 .form-text{
font-size:10px;
height:12px;
width:70px;
}
#block-user-0 .form-submit{
font-size:11px;
height:19px;
}

// Css Code for your custom link bar
#mylinkbar{
display:inline;
list-style-image:none;
background:none;
}
#mylinkbar li{
display:inline;
list-style-image:none;
margin-left:5px;
margin-right:5px;
background:none;
}

Thats all you need to do. You can play with it and customize as per your abilities.
Also have a visit to http://drupal.org/node/17272 for some similar code snippets.

Also check out the following post to see how to highlight the current url link:
http://www.dashplanet.com/tutorials/webmasters/drupal-cms/identifying-fo...

Your rating: None Average: 1.3 (7 votes)

Post new comment

  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.