Question about HTML generation in Drupal

hartsa - May 7, 2008 - 06:08

Hi,

I'm trying to figure out general HTML generation principles in Drupal core, but it still remains a bit unclear. As a first exercise I'd like to figure out how the "user_login_block" is rendered to HTML and try to change the layout from ...

... current "user_login_block" layout
-------------------
"Username label"
"Username textfield"
"Password label"
"Password textfield"
-------------------

... to this "user_login_block" layout
-------------------
"Username label" : "Username textfield"
"Password label" : "Password textfield"
-------------------

I have tried to figure out the flow starting from USER MODULE's "user_block" function to FORM.INC's "drupal_render_form" function, but I just can't find the spot where "DIV" tags are inserted to form? I think I understand quite well how the $form array is constructed, but how and where is it rendered to HTML? Although there would be shortcut for achieving this (e.g. installing new theme), I'd really like to understand how the core does this in first place.

As a second problem I have a bit difficulties to find out how the "DIV" tags are rendered to HTML? Last time I've written basic HTML, was several years ago and then I was used that HTML is self explanatory. E.g. if I save the source HTML to local computer, I can preview the saved HTML file the same way, it was shown online? This doesn't seem to apply to drupal HTML pages. If I e.g. preview the drupal front page HTML, preview the HTML source, save it to local computer as .html file and open the local copy, all the contents are shown in "one column layout" and not as online? Is the rendering e.g. of "DIV" tabs based on .css files, or some other mechanism?

BR. Harri

Hello, I found the solution

hartsa - May 8, 2008 - 15:25

Hello,

I found the solution by debugging the drupal code. Don't know whether there is an easier way for debugging than the one I used and which is described below. In case you know some, please let me also know.

I did the core debugging, by copy-pasting the core functions to new DRUPAL PAGE, renaming the functions with prefix "debugging_" (for avoiding name collisions), adding "echo statements" insde the functions, calling the functions with test values and finally finding out which functions are called in which point.

I find out, that I had trusted too much that I can follow the code execution flow on source code level. Actually I had interpreted several IF statements incorrectly and was thus trying to look the solution from the wrong place.

BR. Harri

In general HTML output from

nevets - May 8, 2008 - 15:35

In general HTML output from Drupal comes from theme functions and this includes the forms.

As for the second part, Drupal like most modern web sites uses css in external files to control the look of the page, the generated html contains the structure but not the css so it displays differently on your local computer.

Thanks for your answer

hartsa - May 8, 2008 - 16:36

Thanks for your answer newets,

I'm still trying to find out what .css file defines that the "label" and "input" fields in below HTML are rendered one-above-another and not one-next-toanother? If someone could point me to right direction concerning also this issue, please do.

<div class="form-item">
<label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="60" name="name" id="edit-name"  size="15" value="" class="form-text required" />
</div>

<div class="form-item">
<label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
<input type="password" name="pass" id="edit-pass"  maxlength="60"  size="15"  class="form-text required" />
</div>

Btw. The drupal version I'm using is 5.7 and theme is Garland.

BR. Harri

The firebug extension to

nevets - May 8, 2008 - 16:47

The firebug extension to Firefox is your friend here, you can use it to inspect the css for the various html elements. If you look at the css for both the label and input elements I think you will find that they have display set to block, you can override the appropriate rules in style.css and change display to inline.

Thansk nevets, I got the

hartsa - May 8, 2008 - 18:09

Thansk nevets,

I got the firebug up and running and see what you mean.

BR. Harri

 
 

Drupal is a registered trademark of Dries Buytaert.