How to build this complex page?

Question

I came across a website today that uses Drupal. When looking at their contact page I noticed it's build up in a pretty complex way (columns, consistent styles, icons next to phone numbers). In theory it could be possible for a user (not the webdesigner) to create all this html by hand but I doubt that.

Since I'm a complete newbie when it comes to Drupal, I don't know all of the functionality it contains. Could anyone tell me how this page was likely created? Using a custom module or some other feature I don't know about?

Answer 1

Caveat up front: I do not know Drupal.

However, taking a quick look at the URI supplied, I noticed the following CSS references:

<style type="text/css" media="all">@import "/sites/all/modules/cck/content.css";</style>
style type="text/css" media="all">@import "/sites/all/modules/cck/fieldgroup.css";</style>

A quick google, and it seems the developers are using the following two modules in that Drupal installation:

• Fieldgroup
• Fieldgroup Tabs

Both of which seem related to the Drupal Content Construction Kit.

As usual, YMMV and HTH.

:)

Answer 2

The HTML/CSS isn't massively complex; it's quite likely it was written by hand. I mean, "consistent styling" is exactly what CSS is designed for.

I don't think it would be the result of a Drupal plugin, because the variation between sections and columns is too much. The only way to find out for definite would be to ask the people behind the website.

Answer 3

CCK deals primarily with data structure, and a little with display. The mentioned layout would not be possible with CCK alone.

Two distinct methods immediately come to mind, for achieving a complex layout.

1) custom theming

This is definitely more of a hands-on approach. Create a custom .tpl.php file. The name could be something like node-123.tpl.php, for overriding the display of a particular node. Inside it, create your custom markup, insert the specific variables from the node ($node->item), and format using CSS.

2) Panels module

This requires installing the panels module (http://drupal.org/project/panels) and learning the basics of how it works. But this could arguably be the easiest, most flexible, and most maintainable method of implementing a complex layout. It includes a layout builder GUI to create custom and complex layouts, with unlimited nested rows and columns. It generates all of the needed divs and css for you. Into each region that you create using the layout builder, you can insert pretty much anything: menus, blocks, views, existing nodes, custom content, etc.