Guides

Not sure where to start? Our guides walk you through different skillsets and topics, like Site Building, Theming, and Module Development.

Get started
Showing 1-20 of 24 results
Theming

Advanced Theming for Drupal 7

Course
Theming
Drupal 7
17 tutorials
Introduction Advanced Theming in Drupal 7 Free
PHP for Themers Free
Altering Variables with Preprocess Functions
Adding New Variables with Preprocess Functions
Adding New Variables to a Specific Node Type
Adding Conditional CSS and Javascript
Dynamic Templates with theme_hook_suggestions
Overriding Theme Functions
Creating a Preprocess Function for a Theme Function
Function Name Suggestions
Theme Alter Hooks for CSS and JavaScript
Altering the Page from the Theme Layer
Altering Forms from the Theme Layer
Best Practices for hook_form_alter()
Theming Forms
Theme Settings
Strategies for Keeping Template Files Clean
Theming

Theming Basics for Drupal 7

Course
Theming
Drupal 7
15 tutorials
Introduction to Theming Basics for Drupal 7 Free
Preparing a Site for Theming
Enabling Themes and Theme Settings
Translating a Design into a Drupal Theme
Helpful Browser Extensions for Drupal Theming
Creating the .info File and Adding CSS
Customizing the Page Template File
Adding Regions to the Page Template
Customizing the Node Template
Creating Dynamic Templates for Specific Node Types
Using the Theme Developer Module
Add JavaScript to a Theme
Tour of Popular Page Template Variables
Add a Screenshot to Your Theme
Conclusion to Theming Basics
Theming

Themes in Drupal

Course
Theming
Drupal 8, 9, 10, and 11
5 tutorials
What Is a Theme? Free
Download, Install, and Uninstall Themes Free
Theme Settings Overview
Change Theme Settings
Add a Screenshot to Your Theme
Theming

Creating Themes in Drupal

Course
Theming
Drupal 8, 9, 10, and 11
10 tutorials
Structure of a Theme
Start a New Theme with Starterkit
Describe Your Theme with an Info File
Theme Inheritance with Base Themes
Drupal Base Themes: Stable and Classy
Use a Base Theme
Regions
Add Regions to a Theme
Fast by Default
Configure Your Environment for Theme Development
Theming

Theme Hook Suggestions for Drupal Templates

Course
Theming, Module Development
Drupal 8, 9, 10, and 11
2 tutorials
Discover Existing Theme Hook Suggestions
Add New Theme Hook Suggestions
Theming

Hands-On Theming Exercises for Drupal

Course
Theming
Drupal 8, 9, 10, and 11
10 tutorials
Set Up Demo Site for Theming Practice Free
Exercise: Create a New Theme
Exercise: Add an Asset Library
Exercise: Configure Your Environment for Theme Development
Exercise: Override the Main Page Template
Exercise: Override the Node Template
Exercise: Override the Main Menu Template
Exercise: Override the Image Field Template
Exercise: Use the t Filter in a Template
Exercise: Preprocess Functions
Site Building

Layout Builder in Drupal

Course
Site Building, Theming, Site Administration
Drupal 8, 9, 10, and 11
14 tutorials
Introduction to Layout Builder Free
Create a Flexible Layout for a Content Type Free
Change the Layout on a Per-Page Basis
Limit Blocks Available in Layout Builder with Block List Override
Use Layout Builder Restrictions to Configure Available Layouts and Blocks
Layout Builder Design Patterns
Implement the Layout Builder View Modes Pattern
Use Layout Builder Modal When Creating Custom Blocks
Define Custom Layouts in a Module or Theme
Comparison of Layout-Building Approaches in Drupal
Tips for Theming with Layout Builder
Add Views to a Layout
How to Add Custom Styles in Drupal's Layout Builder
Adding Asset Libraries to Custom Layouts
Site Building

Views UI: Query, List, and Display Content

Course
Site Building, Theming
Drupal 8, 9, 10, and 11
16 tutorials
Set up Demo Site with Views and Content Free
Add a REST Endpoint with Views Free
Overview: Filter Criteria in Views Free
Add Filter Criteria to a View
Overview: Exposed Filter Criteria in Views
Expose Filter Criteria to Users in Views
Overview: Sort Criteria in Views
Add Sort Criteria to a View
Overview: Exposed Sort Criteria in Views
Expose Sort Criteria to Users in Views
Overview: Relationships in Views Free
Add a Relationship to a View
Overview: Contextual Filters in Views
Create a Page with a Contextual Filter
Overview: Theming Views Free
Override a View's Wrapper Template
Module Development

Settings Forms in Drupal

Course
Theming, Module Development
Drupal 8, 9, 10, and 11
2 tutorials
Create a Settings Form in a Module
Customize Theme Settings
Module Development

Chapter 5: Output Themeable Content from a Module

Course
Module Development
Drupal 8, 9, 10, and 11
9 tutorials
Concept: Themeable Output Free
Concept: Render API Free
Output Content Using Render API
Concept: Template Files
Add a Template File
Concept: Asset Libraries
Add CSS and JavaScript to a Module's Output
Concept: Internationalization (i18n)
Output Translatable Strings
Theming

Breakpoint API in Drupal

Course
Theming
Drupal 8, 9, 10, and 11
3 tutorials
Breakpoints and Media Queries
What Is a Breakpoint YAML File?
Create a Breakpoint YAML File
Site Building

Change Drupal's Appearance with Themes

Topic
Site Building, Theming
Drupal 8, 9, and 10
More information

Themes provide the HTML, CSS, JavaScript, and other assets that are responsible for the look and feel of your site.

Module Development

Layout Builder API in Drupal

Course
Site Building, Theming, Module Development
Drupal 8, 9, 10, and 11
3 tutorials
Dynamic Layout Plugins in Drupal's Layout Builder
How to Create a Layout with Configurable Settings in Drupal's Layout Builder
Build Dynamic Custom Layouts with Derivatives
Theming

Output Themeable Content in Drupal

Course
Theming, Module Development
Drupal 8, 9, 10, and 11
10 tutorials
Output Plain Text and Simple HTML Markup
Use #prefix and #suffix Properties to Wrap an Element
Use Render Element Types in a Render Array
Output a List of Items
Output a Table
Output Content with a Template File
Add Classes and HTML Attributes to Render Arrays
Generate URLs and Output Links
Get Information about the Current User
Use #access to Show/Hide Elements in a Render Array
Backend and Infrastructure

Introducing Docker for Drupal Developers

Course
Backend and Infrastructure
18 tutorials
What Is Docker? Free
Install Docker Free
Run a Container Interactively
What Is a Container?
What Is an Image?
Use a Detached Container
Run Sets of Containers
Create a Compose File
Start, Stop, and List Container Sets
Get Data into Containers
Use Bind Volumes
Set Environment Variables
Expose Ports
Import and Export Databases into a Container
Docker Hub
List, Delete, and Update Images
Use Tags in Docker
Run Drupal in Docker
Theming

PSD to Drupal 7 Theme

Course
Theming
Drupal 7
21 tutorials
PSD to Theme Introduction Free
Introduction to the Domicile Theme Free
Theming by Component
Create a Theme Style Guide
Extract Design Assets
Create CSS Stub Files
Layout Rules for CSS Stubs
Create a Checklist of Drupal Elements
Prepare Drupal for Theming
Customize Image Styles
Create and Place Custom Blocks
Create the Theme Infrastructure
Prepare the Theme Info File
Incorporate Style Guide Stubs into the Theme
Establish Page Layout Structure with page.tpl.php
Insert Site-Wide Components into page.tpl.php
Install Your Theme
Enable Your Theme
Identify and Theme Components
Review the Completed Theme
Next Steps for Your Theme
Theming

Introduction to Omega 3.x

Course
Theming
Drupal 7
15 tutorials
Brief Explanation of the Omega Video Series Free
Omega Overview and Terminology Free
Omega Demo Site
Create an Omega Sub-Theme
Debugging Settings in Omega
Omega Grid and Responsive Settings
Configure Zones and Regions in Omega
Add and Remove Regions in Omega
Omega Libraries, Css, and Advanced Element Settings
Export Omega Theme Settings
Understand Omega CSS and DOM
Omega Global CSS and Custom Templates
Add Template Variables in Omega
Create a New Omega Zone
Finish the 960 Robots Omega Sub-Theme
Site Building

Hands-On Exercises: Movie Project

Course
Site Building, Theming, Module Development
Drupal 7
36 tutorials
Movie Project: Install Drupal and Modules Free
Movie Project: Design a Content Type Free
Movie Project: Create a Content Type Free
Movie Project: Build a View and Use Image Styles Free
Movie Project: Use Views Relationships Free
Movie Project: Create a Custom Layout with Panels Free
Movie Project: Use Quicktabs with Panel Pages Free
Movie Projects: Create Static Pages, Menus and Webforms Free
Movie Project: Build the Homepage Free
Movie Project: Configure URL Aliases and User Permissions Free
Movie Project: Configure Search Free
Movie Project: Create a Custom Theme Free
Movie Project: Create CSS for Default Markup Free
Movie Project: Override Template Files Free
Movie Project: Use jQuery to Extend Functionality Free
Movie Project: Use Responsive CSS Free
Movie Project: Alter a Node with a Custom Module Free
Movie Project: Change a Page Programmatically Free
Movie Project: Create a Form Free
Movie Project: Validate a Form Free
Movie Project: Create a Node from a Custom Form Free
Movie Project: Fetch and Attach an Image File Free
Movie Project: Create Taxonomy Terms Programmatically Free
Movie Project: Import Data in a Site Update Free
Movie Project: Create a Drush Command Free
Movie Project: Create an Administration Form Free
Movie Project: Add User Permissions Free
Movie Project: Manage Configuration Changes Free
Movie Project: Install a WYSIWYG Editor Free
Movie Project: Analyze Site Performance Free
Movie Project: Create Database Tables and Alter Forms Free
Movie Project: Create Autocomplete Fields Free
Movie Project: Add Form Data to Custom Database Tables Free
Movie Project: Create a Render Array and Theme Functions Free
Movie Project: Integrate Ajax Functionality Free
Movie Project: Create Custom Blocks Free
Theming

Getting Started with Responsive Web Design in Drupal 7

Course
Theming
Drupal 7
14 tutorials
Introduction to Responsive Web Design in Drupal Free
Setting Content Priorities that Stack up
Percentages Not Pixels: Adapting the 960px Grid
Responsive Typography
Calculating Responsive Margins and Padding
Adding the Viewport Meta Tag to html.tpl.php Free
Restoring the Natural Flow of Elements
Adding Media Queries and Breakpoints to 960.css
Configuring the Responsive Menus Module
Flexible Images and Media with CSS's max-width
Create Responsive Slideshows in Drupal: FlexSlider Free
Adapting a Fixed-Width Search Form to Flex with Its Container
Styling a Mobile-Friendly Header and Navigation
Cleaning up Tables, Up-Scaled Images, and More Fun with Media Queries
Site Building

Markup in Drupal 7

Course
Site Building, Theming
Drupal 7
33 tutorials
Zen: Introduction and Installation Free
Why Use a Base Theme? Free
Zen: Identify HTML5 Markup in Templates
Recap: Markup in Zen
Fences: Semantic Markup for Fields
Introduction to Markup in Views
Views Unformatted List Format
Views HTML List Format
Views Table Format
Views Default Field Wrapper Markup
Views Advanced Field Wrapper Markup
Views Theme Information
Theme Developer Module and Views
Views Template Files
How to Add a Class to a View
Recap and Challenge: Markup in Views
Introduction to Markup in Panels
Overview of Layouts in Panels
Set up Demo Panel Page
Panels: Add or Remove CSS Body Classes
Panels: Add CSS Classes to the "Main" Region
Panels: Add CSS Classes or IDs to Panel Panes
Override Panel Pane Template File
What Is Style in Panels?
Recap: Markup in Panels
Introduction to Markup in Display Suite
Display Suite: Provide a Custom Layout
Display Suite: Create a Custom Layout with Drush
Display Suite: Add CSS Classes to Regions
Display Suite: Add CSS Classes to Fields
Display Suite: Add Custom HTML Wrappers
Display Suite: Utilize Field Templates
Recap: Markup in Display Suite

Drupal version

Category

Content type

Guides

Not sure where to start? Our guides provide useful learning tracks for all skill levels.

Navigate guides