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.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState