Creating and Theming a Custom Content Type with Drupal 7

Let's add in a Display Suite layout; this is where all the magic happens. At the bottom of Manage Display, find the tab called Layout for event in default. Click, and using the Select a layout list, choose Two Column, and save the page. You'll notice you have an updated UI showing Right, Left and Disabled. All Fields default to Disabled, so position the Fields where you want them in your new two-column node layout. You either can drag your Fields up to the right or left area or use the Region select list to choose. I find the latter to be easier. Figure 9 shows the layout after repositioning Fields and saving the page.

Figure 9. The Finished Display Suite Layout

Add CSS to the Theme

By default, the two-column Display Suite layout is split 50%, but let's add some CSS to the theme to mirror the wireframe. Open styles.css, located at sites/all/themes/professional_theme/, and add this code after the final closing brace at the end of the file. You'll notice this CSS file has media queries in it, and for the sake of this demo, let's add our styles in after any media query, but you also could theme this per media query:

.group-right { 
width: 36%; 
padding-left: 2%; 
float: right; 
}

.group-left { 
width: 62%; 
}

.field-name-field-event-image { 
margin-top: 20px; 
} 
.getlocations_map_canvas { 
max-width: 100%; 
}

From the admin toolbar, click on Content, and then choose Add content, and choose Event. You now will see a blank node create form. Fill in a Title, choose your Date, and fill in some Overview Text. Next, choose an address for your event, and once it's filled in, click the Geocode this address button, and your little map below will re-center itself on your address. Finally, upload an image, choose a link/title, and save your node. Figure 10 shows the final themed layout.

Figure 10. The Final Themed Layout for the Event Content Type

There's so much more you can do with custom content types and theming in Drupal 7; this is just the tip of the iceberg. To enhance the content editor experience, a nice addition would be to add a WYSIWYG editor to the Overview Text area. If you want to get more hands-on with code, you could dispense with Display Suite and add a node--event.tpl.php file to your theme folder and theme the Fields individually.

Resources

Professional Theme (front-end theme pictured in the demo): http://drupal.org/project/professional_theme

Date: http://drupal.org/project/date

Get Locations: http://drupal.org/project/getlocations

Link: http://drupal.org/project/link

Geocoder: http://drupal.org/project/geocoder

geoPHP: http://drupal.org/project/geophp

Display Suite: http://drupal.org/project/ds

Libraries API: http://drupal.org/project/libraries

Get Locations Documentation: http://drupalcode.org/project/getlocations.git/blob/refs/heads/7.x-1.x:/README.txt

Installing Drupal 7: http://drupal.org/documentation/install

Installation Tutorial Video: http://learnbythedrop.com/drop/173

Sign in/Create a Free Google Account: https://code.google.com/apis/console

Google Maps API Key (v.3.0): https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Drupal Is Not a CMS: http://www.palantir.net/blog/drupal-not-cms