Display suite part 1: Layouts and Styles

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

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.

76_1.png

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

76_2_1.png

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 the Layout from the Display suite page then Manage display on the Article row.

76_3.png

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

76_4_1_0.png

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

76_5_1.png

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

76_6.png

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

76_6_1.png

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.

76_8.png

Here is the Full content node view.

76_9.png

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.

76_10_0.png

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

76_11.png

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.

76_12_1.png

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.

76_13.png

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

Category: 
Tags: 

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net