Community & Support

Need to understand Drupal Theming - I suck!

Hi,

I have just started on Drupal about a month ago, and really want to get into it, because it seems like something that can really take my websites to the next level. Anyway, I have experience with PHP & MYSQL, but not as detailed as Drupal gets, so I don't quite understand all of it, yet.

Anyway, I am trying to theme a new site (knowonder.com/drupal236) and I can't seem to get it right. Here's a link to a screen of what it should look like: (http://knowonder.com/fake-site/).

Any help would be GREATLY appreciated. My main trouble seems to be that nothing I originally wrote is working (such as floating, and clearing floats), so the page won't grow automatically, like I set it up to do. I have been working from "Pro Drupal Development - Second Edition" from John K VanDyk, but that hasn't helped me debug this thing.

I also have the Devel module installed, but it isn't working with how my code is all messed up right now - so again - ANY help would be GREATLY appreciated.

Please let me know if you have any ideas. Thanks in advance!

Comments

=-=

anon users can't see content. They are presented with a "You are not authorized to access this page." $message. Check your permissions.

lastly, without knowing how you've set this up, not sure how we can help. Are they regions holding blocks?

Sorry about that...

Sorry - I changed it, so now you can see the main page. My regions are as follows:

regions[header] = Header
regions[login] = Login
regions[nav] = Navigation
regions[content] = Content
regions[sidebar_right] = Right Sidebar
regions[block1] = Block1
regions[block2] = Block2
regions[block3] = Block3
regions[block4] = Block4
regions[block5] = Block5
regions[block6] = Block6
regions[footer] = Footer
regions[footer_message] = Footer Message

So basically, I have my header with the login area in it, the nav below, and then the content is supposed to be the first large box (to the left) with the right sidebar on the right of it. Then, sequentially it has block1,2,3 and then on the next line, block4,5,6. Does that help? I'm not sure exactly what you were asking... Please let me know.

The long and the short

Very quick, but incomplete fix: Remove height:125px; on line 24th line of style.css. This is preventing the container div with the white background from growing with the page content.

Longer, but more complete fix: Your HTML code looks somewhat confused. #header and #block-block-1 are wrapping everything, and #block-block-10 is wrapping everything but your navigation bar and your footer, which probably isn't what you want. The W3C HTML validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.knowonder.com%2Fdrupa...) shows that you're forgetting to close at least one div somewhere. I'd guess you've forgotten to close some divs in your page template or your block template. I'd start there - go back through all the template files you've modified and make sure all your tags are closed properly. Some of your stylesheets might need to be redone after you do that, but it's worth it - the HTML issues should be fixed first.

HTH,
Cliff

Cliff Smith
CIO Services, LLC
http://www.cioservicesllc.com/

That's exactly what I'm talking about!

See, this is the junk that I'm talking about. When I made my code beforehand, it was totally fine - in other words, everything closed properly, etc., but then when I stick it into Drupal, Drupal adds all sorts of blocks and divs (like the #block-block-1 that I have no idea about) and messes things up. For example, in my original code, I have this piece:

<div class="header">
            <?php print $header ?>
           
            <div class="header-tl"></div>
            <div class="header-tr"></div>
           
            <div class="login">
                <?php print $login ?>
            </div>
           
        </div><!-- END HEADER -->

So, if you look at that, you can see all my divs are closed properly. Within the header area is just an image, and the login area is just an unordered list. Anyway, here's what Drupal puts out:

<div class="header">
<div class="block-block" id="block-block-1">


<div class="block-content">
<p><img alt="none" src="http://www.knowonder.com/images/knowonder-logo.png" id="logo" /></p>
</div>


<div class="header-tl"></div>
<div class="header-tr"></div>

<div class="login">
<div class="block-block" id="block-block-9">


<div class="block-content">
<ul>
<li><a href="#">Login</a></li>
<li class="none">|</li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>

</div>

</div><!-- END HEADER -->

Within that space of code, Drupal opens up 2 extra divs, and doesn't close them, which causes errors. I don't know what I'm doing wrong. Did any of what I just said make sense?

Yes, that's invalid code and

Yes, that's invalid code and would cause pain.

Drupal could not be producing an unclosed block like that unless it has been given a corrupt block.tpl.php from the theme.

I think you should check that that snippet is complete and internally valid.
Because Drupal template snippets are all (should be) valid XHTML, it's rare an error like unbalanced tags can sneak in - unless it's a typo.

Re: Yes, that's invalid code and

That did a huge fix for me! I found out that on a the block.tpl.php page, it was missing a closing , so now it's looking much better - I will keep searching the forums and reading what you all have to say - I really appreciate all the help!

see theming like a pro by Drupal dojo

see theming like a pro by Drupal Dojo : http://drupaldojo.com/lesson/theming-like-a-pro - one of the best guide to Drupal 6 theming , this PDF might solve all your problems: http://drupaldojo.com/files/misc/lesson28-slides.pdf. Have fun.

Geshan Manandhar
My Blog
My Drupal site

re: see theming like a pro by Drupal dojo

Geshan,

Thanks for the info - I'm watching the video in just a few minutes (after it downloads) and then going through the PDF. I will let you know how it goes.

if you can write css and php

if you can write css and php i think you can start with a basic template and modify. it wud be easier to understand by modifying and see changes.

some links that will help

http://drupal.org/project/basic
http://drupal.org/project/zen
http://www.slideshare.net/infowonders/drupal-6-theming-using-the-zen-theme

thanks

Arshad Chummun
Mauritius Drupal Developer
Drupal Mauritius | preprocess.me | @preprocessme

nobody click here