This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
This series walks that blurry line between site building and theming. This series will show you how you can affect markup using a base theme, Zen; a module for semantic field markup, Fences; and widely-used favorite site building modules: Views, Panels, and Display Suite. You'll also learn how to apply prototype markup from a Pattern Lab template using Views UI.
Many widely-used Drupal site building modules such as Views, Panels, and Display Suite include in their administrative interface options for adding wrapper HTML markup and CSS classes. This series will show you how these modules can affect markup in a Drupal site, using the administrative UI, as well as utilizing template files and layouts in code.
Of course, markup really begins with the theme and this series features the Zen theme, a Drupal base theme featuring semantic HTML5 markup. I'll cover installation of Zen, as well as using Drush to install a subtheme using Zen's starterkit.
A great module pair for Zen is the Fences module, which allows you to specify any one of a host of semantic HTML selectors to wrap around your Drupal site's fields. I'll walk you through installation of Fences, Fences' configuration settings, and how Fences alters the field settings form in Drupal's administrative interface.
Panels and Display Suite have many similarities in functionality and if you're curious about the differences between them and you might go about doing the same task in each module, this series will provide a good overview of each module, allowing you to compare and help you decide which module you want to use on your Drupal site.
This series can also serve as a "crash-course" for site builders and themers, who need to quickly get up to speed on customizing markup on a Drupal site using one or more of these modules or theme.
Finally, if you want to dip your toes in the prototyping waters, I've included a tutorial and a challenge based on a Pattern Lab prototype, in which you apply HTML and CSS classes from the Pattern Lab "mustache" template files to a view of recent articles.
Zen is a base, or parent, theme for Drupal that features lean, semantic HTML5 markup and a starter kit for custom theme development. In this tutorial, we will install Zen and create a subtheme for custom theme development using Drush. I use the Drush command provided by Zen because of all of the tedious renaming required when cloning the "STARTERKIT" into a subtheme. The Drush command provided by Zen automates this and makes it a relatively painless process. If you need to install Drush, see our related video tutorial, Installing Drush with Composer, or read the instructions for installation on the Drush web site.
In the next tutorial, I'll briefly explain why you might want to use a base theme and when it makes the most sense to do so. After that, I will walk through and highlight some of the HTML5 semantic markup in Zen's template files, contrasting the markup with the corresponding template files in the core Drupal 7 theme, Bartik.
Other tutorials in the Markup in Drupal series also use a subtheme of Zen, called zendemo, as a theme for the demo site. This was done to demonstrate how markup is first and foremost affected by the theme. It was also done to show how using a base theme that uses semantic HTML5 markup can be advantageous if you want to use HTML5 elements in the built-out components and pages of your Drupal site.
To follow along, download the latest version of Drupal 7, and follow the instructions in the video for installing Zen and a creating a subtheme.
In the downloads section below you'll find a database and files downloads, which is the state of the site after this tutorial, with Zen and the subtheme "zendemo" installed.
Additional resources
In this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.
Additional resources
In this tutorial, I will take you on a tour of some of the template files included with Zen and highlight how HTML5 semantic markup was incorporated into the markup of several different template files.
Additional resources
Zen — Drupal.org
Zen documentation — Drupal.org
HTML5 Developer Guide — MDN
This is a review what I covered in the previous tutorials in this series about Zen, including how to use Zen as a base or parent theme, why you might use a base theme in theme development, how HTML5 markup is included in Zen's template files, and how to install Zen and create a subtheme for your own custom development.
Additional resources
Now let’s take a look at how we can configure fields to use semantic markup using the Fences module. In this tutorial, we’ll install and enable Fences module using Drush. Then we’ll take a look at the configuration settings for the module. Next we’ll hop into the field settings form for the body field and select an HTML5 tag as a new markup wrapper. Finally, we’ll take a look at how Fences field settings configuration carries over to Views and how we can override Fences markup in Views' field settings.
Additional resources
This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:
- What affects markup in Views
- Selecting an appropriate Views display format as a starting point for markup output
- Customizing field markup
- Customizing wrapper selectors and CSS classes
- Accessing theming information in Views
- Overriding Views template files
Additional resources
One thing that affects markup in Views is the format that is using for the display. In this tutorial we'll take a look, step-by-step, at the Unformatted list format in Views. We'll examine its default markup, how to add custom CSS classes—and to which elements—and what it looks like to remove all of Views' default markup.
Additional resources
Continuing our look at how Views' formats affect your markup, in this tutorial we'll take a look, step-by-step, at the HTML list format in Views. We'll examine its default markup and how to add custom CSS classes to various elements.
Additional resources
As we continue to look at how Views formats affect markup, we'll now examine the Table format in Views. We'll take a look at its default markup, how to add custom CSS classes to various elements and explore other settings unique to this format.
Additional resources
We've examined the Views formats and row style formatting. Now I'll walk you through the default field wrapper markup in Views. We'll inspect the default markup for fields, remove the default field wrapper markup and I'll point out some of the implications of this action, and then I'll apply a different Views format, so that you can see how the field wrapper markup is impacted by that configuration change. This will give you a better understanding of how markup is affected at the field-level in the context of a view.
Additional resources
Now that we’re familiar with the default field wrapper markup in Views, let’s explore how to customize this markup. In this tutorial, I will introduce to you a prototype of recent posts that was built using Pattern Lab. We’ll inspect the wrapper markup of two template files that compose this media list. After getting familiar with the prototype markup, we’ll apply that markup, step-by-step, to the fields in our view of recent posts. In doing so, we will use the custom field markup settings for each field and utilize rewrite results and replacement tokens to customize our markup output even further.
Additional resources
In the next few tutorials, we'll pull back the veil of Views theming a bit and introduce some tools to help you wrangle Views' template files. In this tutorial, I'll introduce you to Views Theme Information and how to use this interface to find out which template files are being used to mark up your view.
Additional resources
In this tutorial, we'll download the Theme Developer module and use it to inspect our view when it is using view modes for display instead of fields. We'll also look at how Theme Developer interacts with Views and some of the "gotchas" that can occur when using these modules together.
Additional resources
Theme Developer — Drupal.org
Devel — Drupal.org
simplehtmldom API — Drupal.org
In this tutorial, I'll walk you through how to identify a template file to override, locate the template file in your site's code base, and copy it into your active theme.
Additional resources
In this tutorial, I will show you how to apply a class to the wrapper markup of the view using the Views UI.
Additional resources
In these tutorials on markup in Views, we learned :
- What affects markup in Views
- How to use the Views UI to change markup
- How formats affect markup output
- How to customize row and field wrapper markup
- How to rewrite output with replacement tokens
- How to override Views template files
- How to add a CSS class to your View
As you learned, there are a number of ways to affect markup in Views ranging from utilizing the UI to editing a template file in code.
Ready for a challenge?
Now that you’ve learned all about markup in Views, can you apply what you’ve learned? Use your knowledge of customizing markup using the Views UI and your knowledge of overriding Views template files to apply the HTML markup in the pattern lab prototype to a view of recent posts. Download the demo files and database containing the view of recent posts in the additional resources section below. Contained in the top-level of the files download is a directory called "misc." Inside "misc" you'll find the demo-pattern-lab files:
- The latest posts file is located in
misc/demo-pattern-lab/source/_patterns/02-organisms/03-sections/00-latest-posts.mustache - The media block file is located in
misc/demo-prototype/source/_patterns/01-molecules/02-blocks/00-media-block.mustache
Use your knowledge of inspecting views template files to locate the read more link markup in order to customize the markup and placement of the read more link, to match the prototype markup. You can find the setting to turn on the more link in the Views UI under the pager section in the middle column.
Here’s another hint: you’ll want to update the field settings for the body field to display a trimmed or summary display instead of the full body value.
Finally, For a bonus challenge, create an image style that matches the prototype image dimensions, and apply it to the image field in your view. To learn more about image styles in views, check out the video Using Image Styles with Views in the Drupalize.Me library.
Good luck with this challenge!
Additional resources
Now let's shift gears and take a look at how using Panels affects markup in Drupal. I will show you some unique-to-Panels concepts as well as how to apply Drupal theming principles to customize markup on a Drupal site that uses Panels.
In the tutorials that follow, you will learn:
- About Panels layouts
- How to add CSS classes using Panels
- How to override the panel pane template file
- What Panels means by “Style”—with a broad overview of Style Plugins and where to go for a deeper dive
Additional resources
Panels — Drupal.org
Chaos Tools Suite (CTools) — Drupal.org
Theming Basics for Drupal 7 — Drupalize.Me
As discussed in the previous tutorial, one thing that affects markup in Drupal when using the Panels module is the Panels layout. In this tutorial, I will provide an overview of how layouts work in Panels. To learn more about how to create your own Panels layout in code, see the related tutorial: Adding Custom Panels Layouts in Your Theme. To learn how to use the Flexible Layout Builder in Panels, see this tutorial: Custom Panels Layouts.
Additional resources
Adding Custom Panels Layouts in Your Theme — Drupalize.Me
Custom Panels Layouts — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, we'll finish setting up the Test page using Page Manager. We'll enable Views Content Panes, create a new content pane display in our view of recent articles, and place that content pane in the panel page.
Additional resources
Overview of Views Content Panes — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, I will show you how to add and remove CSS classes from the body tag using Panels. I will also point out the other CSS-related settings and the pros and cons of each one.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, I will demonstrate how to add a wrapper div and a class around, and just outside, the Panels layout markup, using the Panels administrative console.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, I'll walk you through how to add a CSS class or ID to a panel pane using the Panels administrative console.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
The panel pane template file controls the markup for the panel pane container. When you place content into a panel region, it is wrapped by a container called the panel pane. To change this wrapper markup, you will need to copy the panels pane template file into your theme’s templates directory. Let’s walk through this process in this tutorial.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, we'll take a brief look at what Panels means by "Style" as applied to a region or panel, and I'll walk you through the settings form and how to change a style for a panel pane using the Panels administrative console.
For a more in-depth look at Panels Style Plugins, including how to create your own, check out these related tutorials:
Additional resources
Customize Panels Styles with CTools Style Plugins
Styling Panel Panes with Stylizer
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this lesson, I provide a recap of the Panels-related tutorials in this series.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Customize Panels Styles with CTools Style Plugins — Drupalize.Me
Display Suite is another popular module for handling the layout and display of content on a Drupal site. In this next set of tutorials, we'll take a look at how markup is affected in Drupal when using Display Suite.
Additional resources
In this tutorial, I’ll show you how to create a custom layout to use in Display Suite. We’ll take a look at the instructions in Display Suite’s ds.api.php file to find out how to provide our own custom layout. In this process, we’ll take a shortcut and copy a layout from Display Suite into my custom theme and modify it. In the next tutorial, we’ll look at the drush command ds-build which allows you to quickly scaffold a display suite custom layout in your module or theme.
Additional resources
Now that we have gained an understanding of how to create a custom layout manually (in the previous tutorial), we’ll look at the drush command ds-build which allows you to quickly scaffold a Display Suite custom layout in your module or theme.
Additional resources
In this tutorial, I will show you how to add a CSS class to apply to a region using Display Suite.
Additional resources
In this tutorial, I will show you how you can add a class to the wrapper markup for a field using Display Suite, Display Suite Extras, and Display Suite's field templates.
Additional resources
In this tutorial, I will demonstrate how you can change the HTML selectors of the regions and layout wrapper markup using Display Suite.
Additional resources
In this tutorial, I'll give you a tour of the field templates interface in Display Suite. I'll show you how to enable Display Suite field templates and walk you through how to customize the markup for each type of field template. I’ll also demonstrate how CSS classes can be applied to various components of field output using the Display Suite's "Expert" field template.
Additional resources
In this series of tutorials on how markup is affected in Drupal when using Display Suite, I showed you:
- How to affect markup using Display Suite (DS)
- How to create a custom layout to use in DS
- How to add and utilize custom CSS classes in DS
- How to configure custom markup wrappers
- How to utilize Display Suite’s field templates UI to customize markup output on fields
