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