Not being a developer per say, I am responsible for converting the PSDs into HTML, CSS & Js. Our Drupal Web Developer doesn't know the answer to this question so I hope someone here can answer it for me.

After handing over the HTML, CSS & Js file to the developer, this is what he brought back. All the lines of code you see in the firebug that is not green highlighted is Drupal 7 generated (we are using Adaptive Theme with sub-theme Sky which we are further modifying).

firebug breakdown of code

I dont understand what all these (& they are a lot) divs do, what purpose they serve.

Are they generated in every Drupal website & is code we should not be worrying about or are we doing it all wrong?

  • 1
    You theme with the mark-up you have, not the mark-up you'd like to have. rarepattern.com/nodes/2011/… – Capi Etheriel Jul 19 '12 at 4:12
  • Thats an excellent reference @barraponto. We've just had a long discussion & decided that from now on, Im going to be using a Drupal 7 template as a starting point. Cheers for that. – Kayote Jul 19 '12 at 5:28

Drupal is notorious for producing way, way too much markup in an attempt to make absolutely every individual page element individually themeable. Whether you think this is 'good' or 'bad' completely depends on your opinion, there are probably as many advantages as disadvantages.

I would say it definitely is something you should be worrying about though. A page stuffed with extraneous tags is bad for SEO, bad for javascript performance, and (arguably) can make the document less semantically correct.

Every time I build a new theme these days I first drop in some heavily stripped-down template overrides.

For example my standard node.tpl.php simply looks like this:

<?php echo render($content); ?>

field.tpl.php file looks like this:

<?php foreach ($items as $delta => $item): ?>
<?php echo render($item); ?>
<?php endforeach; ?>

and region.tpl.php:

<?php if ($content): echo $content; endif; ?>

Those are the absolute extremes in stripping out the tags, my template files very rarely stay this basic once the project gets going. But using this method I can build upon the bare content output and just wrap what I need to to style that particular theme. It gives me enough control over the markup while keeping as clean a DOM as I can manage.

The downside to this method is that some contributed modules contain their own CSS files that target the generic classes that Drupal outputs. These will obviously stop working if you've stripped those tags out, so there's a good amount of manual intervention required.

A good example of this are the field types provided by the media module. They rely on the surrounding tags for styling, and look awful when removed. I usually get around this by making field specific template files (e.g. field--media.tpl.php) which have all of the original markup in them.

| improve this answer | |
  • This is an excellent answer Clive & thank you. You mentioned exactly the concerns I have, that is, in an era, where smartphones are used more and more, Drupal seems a bit too heavy. As we are using Adaptive Theme, I doubt we can do what you have done, regardless, we will start a thorough search to clean it up as much as possible. – Kayote Jul 18 '12 at 15:48

This is standard Drupal behaviour, but you can change it using one of the following modules:

they both allow you to override the amount of outputted html tags

| improve this answer | |
  • I don't know about fences but display suite is a huge amount of overhead to add to the site just to theme the HTML tags – Clive Jul 18 '12 at 14:01
  • display suite is huge, but can also be a time saver while theming, it save you the hassle of dealing with .tpl.php files. – Attiks Jul 18 '12 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.