For the project tcataxi.nl, I was provided with pre-coded HTML markup and stylesheets. My job was to turn the static markup into a dynamic Drupal powered website with every piece of content editable. While I’ve worked with Drupal many times before, I usually do the front-end myself and work with Drupal’s extra layers, ID’s and classes from the start.
Since I was hired only to integrate the site with Drupal, I decided to challenge myself not to touch a single line of the provided CSS. This is fairly easy at least until you start outputting a lot of different views. A few extra layers don’t compromise the styling and positioning of elements but when Drupal starts to add a whole bunch of them, the CSS breaks.
That’s what happens when you separate front-end development from CMS integration. Just modifying the CSS a bit would be the simple solution but it would also lead to having to frequently boot up a couple of virtual machines for testing in Internet Explorer 6 to 8. It seemed more interesting to just strip away the (in this case) unnecessary div tags that Drupal and Views by default spits out.
Turns out this was even simpler than changing the CSS. All that needs to be done is to add some template files. Once you figure out which template files are needed to strip away the overdose of markup, it’s a very straight-forward task. I decided to throw in quite a few of them to be on the safe side:
views-view.tpl.php
<?php if ($rows): ?> <?php print $rows; ?> <?php elseif ($empty): ?> <?php print $empty; ?> <?php endif; ?>
views-view-unformatted.tpl.php
views-view-nodes.tpl.php
<?php foreach ($rows as $id => $row): ?> <?php echo $row; ?> <?php endforeach; ?>
You get the point. After this, it’s just a matter of creating the node templates that will be used to output the content types you’re dealing with. For example, node-news.tpl.php could display the node, outputting whatever node variable or CCK field you have at your disposal. It’s all very simple.
I thought I’d write about this since there’s not a lot of information out there about it. Maybe because it’s common and easy, I don’t know. I for one used to have the habit of iterating through the nodes in a view manually, directly in the view’s template file using node_load() to get the data I needed. It sure sounds fun but having more template files that are loaded would of course be way more convenient in the end.
Conclusion—Drupal creates piles of markup you don’t want. Get rid of it and clean up your code, please.
Thanks for highlighting an issue that’s probably on a lot of drupal starters mind, who don’t like to see their clean html + css get ruined by Drupal’s sometimes bloated html output.
A lot of long time drupalers seem to defend this vehemently, which becomes obvious after spending more than two minutes in the views issue queue. Another good example: http://www.palantir.net/blog/drupal-theming-applying-sustainable-method-views
“I think that people need to stop trying to fiddle with the HTML layer in Drupal. Its not worth it, its not that interesting, and everything can be done with CSS anyway, and should be.”
Sure, Drupal and it’s themes is and ought to be modular, but this “one site fits all” approach to theming isn’t always what you or your client wants.