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.


Professional Theme (front-end theme pictured in the demo):


Get Locations:




Display Suite:

Libraries API:

Get Locations Documentation:

Installing Drupal 7:

Installation Tutorial Video:

Sign in/Create a Free Google Account:

Google Maps API Key (v.3.0):

Drupal Is Not a CMS:


Danny Englander is a Drupal Developer specializing in theming, site building, UX, UI, responsive design and JQuery. He runs his own Drupal shop and freelances for various clients around the United States.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Display Fields in a Table

Anonymous's picture

That is all great information. Thank you for putting it together in one place.

However, suppose you have a number of fields in a content type and you wish to display them in a table with a column of lables and a column of values. How would one go about that?

Reply to comment | Linux Journal

Izetta's picture

Areas most at risk Dengue fever child chicken pox remedies
is endemic in Burma. Most store bought flea products for dogs contain permethrin, as does
substituting unbleached all-purpose flour for the whole wheat.

If you want contextual

Anonymous's picture

If you want contextual tabular data to be displayed on each page then first you need to add the data fields to the content type in order to collect that data. Next, you need to create a view block to display the data. This is very easy to achieve by creating a view (views module) using the table format. You will need to configure the contextual settings of the view to only display data belonging to that page. Once you have accomplished that, the view can easily be inserted into the page in a number of ways depending on your choice of page layout method. With either Display Suite or Panels you can easily create a content pane and/or block that displays the view where you wish. Alternatively, you can embed the view directly in a custom page template. While this may sound like a lot of work, it is actually very simple and can be done in less than an hour depending on the number of fields you need to add to the content type. Hope this helps. Cheers, Kevin

Reply to comment | Linux Journal

Minecraft games's picture

I got this web site from my friend who told me about this web page and at the moment this time
I am browsing this website and reading very informative content at this time.