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
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
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
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 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 second Vi/Vim video we move on to doing some basic editing (see the Intro to Vi/Vim video for an overview). We cover inserting text in a few different ways, how to delete text, and then how to revert or save your changes. Note: this video was originally released August 9, 2010 on Lullabot.com.
Note: In some places the command line prompt is cut-off. The YouTube version of this video doesn't have the cut-off problem. We are working on getting this fixed, but in the meantime, check out the YouTube version instead.
Command Line Basics 10: Editing with Vi/Vim editor (youtube.com)
This video picks up where we left off in the Editing with Vi/Vim video. This time we take a look at some shortcuts for replacing text, how to copy/paste, and the cool visual mode feature you get with Vim Note: this video was originally released August 31, 2010 on Lullabot.com.
Note: In some places the command line prompt is cut-off. The YouTube version of this video doesn't have the cut-off problem. We are working on getting this fixed, but in the meantime, check out the YouTube version instead.
Command Line Basics 11: More Editing with Vi/Vim editor (youtube.com)
This video introduces you to the Vi (and Vim) editor. Vi is the most common text editor that you will have available to you on *nix systems so it pays to at least learn the basics in case you end up somewhere where that is all you have to use. Vim is also actually a very serviceable editor which many people (mostly hardcore geeks) use as their day to day editor. We'll talk briefly about Vi versus Vim, then open a file, move around, and close the the file. Our next video will dive more into editing files with Vi.
Note: There are a lot of editors out there on various systems, notably emacs, nano, and pico. Vi is considered the lowest common denominator (i.e. it is the most commonly available one), which is why it is the one being covered in the command line basics series. It is also the editor that I use personally, so is the one I am most familiar with. Please limit editor war discussions to other threads on the internet that are meant for them.
Note: this video was originally released July 27, 2010 on Lullabot.com.
Note: In some places the command line prompt is cut-off. The YouTube version of this video doesn't have the cut-off problem. We are working on getting this fixed, but in the meantime, check out the YouTube version instead.
Command Line Basics 9: Introduction to Vi/Vim editor (youtube.com)
Legacy Theme Development
GuideMarkup in Drupal 7
CourseLayouts
TopicA layout can describe how various components are arranged on various levels—from an entire page from the header to the footer, to just the “middle” where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.
This learning series covered just the tip of the theming iceberg. Hopefully you're now feeling motivated to learn even more about theming. In this lesson we will review some of the other topics you will want to explore next including: advanced theming techniques, using a base theme, such as Omega, layout modules. By the end of this lesson you will by able to identify which videos you should (or could) watch next to learn more about theming Drupal.
This lesson covers all the updates/differences in the latest 2.x version versus other Drupal 7 releases. The new 2.x version of Display Suite is still in active development at the time that this video was published, but we want to make sure you know the changes that are coming when the new version is finally released. This video is very important to view if you are using Display Suite version 2 for the first time and have watched other videos in this series. It covers UI changes/updates as well as feature differences.
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
Display Suite Fields
FreeIn this lesson we cover adding different type of custom fields to your layout using Display Suite. From adding a custom code field, blocks, to dynamic fields, each of these can be moved around your layout and replicated/modified across different display modes.