Customizing the login block.

Jose C. - September 18, 2006 - 07:48

Hello,

I need to customize the login block, and I don't know where to start. I am having a lot of troubles understanding theming, so please, give me a hand here.

I need the login block to be displayed only when the user clicks on a link called "log in", which I created in a menu on the main page. By this I mean that whenever the user goes to my front page at my Drupal site, he is supposed to get a welcome message along with a few links (available on a menu I created). When the user clicks on the login link at that menu, only then will he get the login box.

On a related subject, how can I make such login box look differently? Instead of having the password textfield below the username one, I need to have it on its right, and it must be smaller. Is that possible? Please, give me a hand as to where should I start if I want to achieve this, because I'm at a loss.

Thank you very much for your help.
Jose Carlos.

As a start, you can disable

c2uk - September 18, 2006 - 08:18

As a start, you can disable the login block in administer > blocks > user login. And create a menu item that links to just user. If not logged in, this should generate a login page, if logged in you should be directed to your own user account page.

Many styling issues can be solved by using CSS. If you are not yet familiar with CSS, I recommend to visit http://www.w3schools.com/css/default.asp and http://htmldog.com/

Mind you, I'm a beginner with drupal myself.

Random tips on theming

alienbrain - September 18, 2006 - 09:34

Drupal works like this to implement themeing:

The data structure is assembled in one or more variables, arrays or objects. A data structure only holds raw data that doesn't contain any theme-specific xhtml/css.
The Drupal passes this assembled data structure to the appropriate theme function. Theme functions are functions that start with theme_, and their job is to build a piece of xhtml out of the data structure passed to them (this is called rendering).
After all data structures available on a page request are rendered, they are collected together and sent back to the user.

Drupal implements a simple but effective mechanism that allows you to replace any of the theme_ in case you don't like how it renders the data structure. You do this by using a file called template.php, please read template.php: Overriding other theme functions for details.

After defining the override, it's going to be used instead of the original theme_ function whenever Drupal needs to render the data structure in question.

Well, three more notes to be precise:

  • Drupal believes that theme maker should have fair knowledge of CSS. That affects the procedure explained above as sometimes you may find some XHTML inside data structures in a way you will NOT be able to override. This is rare cases and happens when it's believed that the XHTML is simple enough that it can be completelly customized in every possible way using CSS. Ok, What if it's not simple enough and/or it's hard to customize it this way, or you think there is a good point in making this XHTML overridable (e.g. by having it in its own theme_ function)? You have to submit an issue to the appropriate project explaining your point of view.
  • How do you find out if a piece of the page is themeable or not (e.g. it has its own theme_ function and not embeded inside data structures)? If what you want to customize is something you get from Drupal itself (not from a module you downloaded separatelly) then check the this themable functions page. But if what you want to customize is something you get from a separate module, then you will have to check the source code of the module for any functions that start with theme_. Also, some modules have this documented somewhere and you can find a link to the module documentation in the module project page here
  • Drupal theming actually offers more options than what I explained above. I assumed you are using the default template engine PHPTemplate, but you actually have the option to use other template engines, or not use one at all. So make sure to check the appropriate Theme developers handbook page for the template engine you are using.

Well, this was my try at answering your theme doubts, now about the user login..

I need the login block to be displayed only when the user clicks on a link called "log in"

Check this module http://drupal.org/project/logintoboggan it has this feature.

On a related subject, how can I make such login box look differently? Instead of having the password textfield below the username one, I need to have it on its right, and it must be smaller.

Doing a view-source on page to check the XHTML of the login box, it looks like what you are asking for can be achieved using CSS without touching any php code.

I've very quickly tried achieving this to illustrate my point, and this is how I did it..
First, I wanted that block to be displayed in the header instead of the left sidebar, so I went to admin->block, and changed the placement of the User Login box to header.

Then I modified bluemarine theme by adding this css to the end of themes/bluemarine/style.css:

#user-login-form {
  text-align: left;
}

#block-user-0 {
  font-size: 10px;
}

#block-user-0 h2.title {
  display: none;
}

#block-user-0 label {
  float: left;
  margin-left: 5px;
  line-height: 22px;
}

#block-user-0 input.form-text {
  float: left;
  width: 80px;
  margin-left: 5px;
}

#block-user-0 input.form-submit {
  margin-left: 10px;
}

And that indeed gave me the look you described.

Well, that's it, happy theme-ing!

Thank you so much for your

Jose C. - September 18, 2006 - 11:21

Thank you so much for your reply. I'll start themeing right now, and reading the documentation you pointed me to.
Thank you very much for the CSS code too. I'm starting to understand how it all works now. I'll keep instructing myself :)

I'll tell you how everything's going.

 
 

Drupal is a registered trademark of Dries Buytaert.