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

______________________

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.

Comments

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.

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix