Drupal 7 content type templates tutorial

Choose that, and save Add date type. The new Date Type is saved you'll refer to it later. For the event image, you'll want a custom style. For width, choose , and save Add effect. The new effect is saved, and you will refer to it later. You now get a new page with options. You can pretty much accept the defaults here, but let's customize a little:. Save the content type. Back on the content types landing page, you now will see Event Machine name: event , in addition to Basic page and Article, as shown in Figure 6.

Click manage fields for Event. You'll see that the Body Field already exists. Click to edit on Body, and simply change the Label to Event Overview, and save the settings. Figure 7 shows the finished Manage Fields page. Figure 7. The finished Fields page for Event. As you might have noticed when creating all these fields, there are dozens of other options for customization, and for the most part, you accepted many of the defaults.

However, as you get more into Drupal site building, you'll want to explore these options and experiment with them. Now you just need to do a little theming using the Manage Display tab for your Event content type. This will be a two-part process. The first is to get some reasonable defaults for your display. Using the "select lists and drag" icons, make your layout look like Figure 8. Note the Gear icons at the far right; you can click on those to fine-tune your settings, but always remember to choose Update, and then save the page after any changes.

You'll notice with the Date and Event photo, you now have the respective format and style you created previously. 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. 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. Open styles. 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:. 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.

Figure 10 shows the final themed layout. 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. If you want to get more hands-on with code, you could dispense with Display Suite and add a node--event. Web Development.

Drupal 7: It's All about Fields When you customize content in Drupal 7, it involves creating or modifying what's often referred to as a content type. Theming and Nodes A Drupal 7 Node is simply an individual page with content that's rendered using a specific content type that contains all of your fields.

Figure 1. Drupal 7 Administrator Toolbar On the content type landing page, as shown in Figure 2, you can see existing types, and you would add new ones here. Tools Needed Now that you have a basic overview of how content types work, let me show you how to build a new one and theme it.

Mock It Up When creating a new content type, I like to do a quick mock-up to get a better picture of how I want the finished product to look. Figure 4. Mock-up of how an Event page will look. Essential Modules The mock-up helps determine which modules I'll use.

In the Format string text box, copy and paste or type in this string: l F j, Y- g:i a T You will see that it immediately renders as a nicely formatted date like this: Sunday August 12, am PDT Let's give this new format a name. Create an Image Style For the event image, you'll want a custom style. You can pretty much accept the defaults here, but let's customize a little: Name: Event.

Using page--content-type. Page Template Per Content Type The most common and overriding concept we used to follow is to not includ in the default list is the page. Full Name. Work Email. Job title. About work. I've tried these combos of things: putting node--my-custom-type. I'm at a complete loss. RJ Cole. Add a comment. Active Oldest Votes. Matthijs Bierman Matthijs Bierman 1, 9 9 silver badges 14 14 bronze badges. Sign up or log in Sign up using Google.

Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog.