Update: I have written an updated version of this series over athttp://webwash.net. The updated version covers Display Suite 7.x-2.x.

• Configuring Layouts with Display Suite in Drupal 7
• Handling View Modes and Regions with Display Suite in Drupal 7

The Display suite is a powerful module which allows you to customise the node view page without writing any code. You can apply custom layouts as well as custom fields without a module. Configuration of this module is fully exportable with features.

In this post I’ll show you how to get started and how to create a layout. In part 2 (coming soon), I’ll show you how to create custom view modes and how to expose blocks as fields. Also don’t forget to check out the Take Full Control of Your Site Layout with Display Suite for Drupal 7 video from DrupalCon London.

Getting started

To get started go to http://drupal.org/project/ds and download the modules into “sites/all/modules”.

If you haven’t already, also download and enable the Chaos tool suite module. Display suite requires it.

Once you have enabled the module go to “Administration >> Structure” and click on “Display suite”.

How to create custom layouts

One of the powerful features you get from the Display suite module is the ability to create custom layouts for any entity display (nodes, comments, users etc…) using a simple UI.

To create a custom layout for the article content type for example, click on theLayout from the Display suite page then Manage display on the Article row.

The Manage display page looks the same except for the new Display suite vertical tabs at the bottom of the page.

In the Custom display settings tab tick the Full content checkbox and click onSave.

Now let’s customise the Full content display. Click on the Full content tab in the top right corner.

Select the layout that you want to use from the Select a layout select box, then click on Save.

Straight away you’ll see that you get a lot more fields. Simply drag the field that you want into any region and once you finished click on Save.

Here is my layout.

Here is the Full content node view.

Styles

Display suite allows you to define custom CSS class for any regions without overriding any templates.

To create custom region styles click on the Styles link from the Display suite administration page.

Now define your custom css classes by adding them into the text area one line at a time. In this example I added:

article-left|Article left
article-right|Article right

Now go back to the Manage display page and click on the Extra classes for regions tab at the bottom of the page, then assign a class to a region.

If you now go to the article page and view the HTML, you should see your custom classes on the main wrapper DIV for each region.

If you have any problems or questions please leave a comment.