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 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
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.
