Themes
by Chaz Chumley, Matt Glaman, Richard Jones, Nick Abbott
Drupal 8: Enterprise Web Development
- Drupal 8: Enterprise Web Development
- Table of Contents
- Drupal 8: Enterprise Web Development
- Credits
- Preface
- 1. Module 1
- 1. Introduction
- 2. Installation
- 3. Basic Concepts
- 4. Getting Started with the UI
- 5. Basic Content
- 6. Structure
- 7. Advanced Content
- 8. Configuration
- 9. Users and Access Control
- 10. Optional Features
- 11. Reports
- 12. Extending Drupal
- 13. Theming Drupal
- 14. Getting Support
- 2. Module 2
- 1. Up and Running with Drupal 8
- 2. The Content Authoring Experience
- 3. Displaying Content through Views
- 4. Extending Drupal
- 5. Frontend for the Win
- 6. Creating Forms with the Form API
- 7. Plug and Play with Plugins
- 8. Multilingual and Internationalization
- 9. Configuration Management – Deploying in Drupal 8
- 10. The Entity API
- 11. Off the Drupalicon Island
- 12. Web Services
- 13. The Drupal CLI
- 3. Module 3
- 1. Setting Up Our Development Environment
- 2. Theme Administration
- 3. Dissecting a Theme
- Setting up a local development environment
- Default themes versus custom themes
- Folder structure and naming conventions
- Managing configuration in Drupal 8
- Reviewing the new info.yml file
- The role of templates in Drupal
- Creating our first basic theme
- Introducing Twig
- Template variables
- The role of the theme file in Drupal
- Summary
- 4. Getting Started – Creating Themes
- 5. Prepping Our Project
- 6. Theming Our Homepage
- Creating our HTML wrapper
- Creating our homepage
- Implementing our Header Top region
- Implementing our Header region
- Adding a logo
- Enabling Site branding
- Printing our Header region
- Creating Block templates
- Implementing our search form block
- Placing our search form block
- Creating a search form block template
- Adding custom JavaScript
- Creating an input element template
- Working with menus
- Creating a menu template
- Creating System Menu block template
- Creating a sticky header
- Implementing our Headline Region
- Implementing our Before Content region
- Implementing the footer
- Summary
- 7. Theming Our Interior Page
- 8. Theming Our Blog Listing Page
- Reviewing the Blog Listing mockup
- Creating our blog listing
- Creating a Post Listing view
- Managing our Post Listing block
- Implementing our Node template
- Adding CSS classes to Twig
- Working with content variables
- Using the without filter
- Creating our post image slider
- Working with field templates
- Adding the Owl Carousel library
- Using Twig filters for dates
- Printing title and teaser
- Creating our post metadata
- Field templates and taxonomy
- Handling comments in Drupal 8
- Creating a theme file
- Creating a Categories block
- Managing our Categories block
- Implementing responsive sidebars
- Theming a Block template
- Drupal Views and Twig templates
- Managing popular versus recent content
- Adding the About Us block
- Summary
- 9. Theming Our Blog Detail Page
- Reviewing the Blog detail mockup
- Previewing our Blog detail page
- Creating a Post Full template
- Working with comments
- Implementing social sharing capabilities
- Summary
- 10. Theming Our Contact Page
- 11. Theming Our Search Results
- 12. Tips, Tricks, and Where to Go from Here
- A. Biblography
- Index
A Drupal theme is the engine that provides the framework for the visual layout and design of your site, including bringing together the CSS, JavaScript, images, and colors. A Drupal theme itself determines the visual design of the website you are building.
In the standard install, there are a number of basic themes provided, and you can switch between them at any time.
The Standard profile installation ships with the Bartik theme. This theme is comprised of 17 page regions into which you can place one or more blocks. The 17 regions are shown in the following diagram:
As you can see from the preceding diagram, the list of default regions for the Bartik theme and their relative positions on the page is enough to fill the layout of many sites.
Page and theme template regions will be covered in detail in Chapter 13, Theming Drupal.
Just as with modules, you can download themes from https://www.drupal.org/ or you can create your own.
All themes have a settings page allowing you to change certain elements of the display, for example the color scheme used or whether to display the site logo and name. More complex themes have a greater range of settings within them.
There are also themes that are designed for use when visiting administrative pages, such as when managing users or create actual content. Themes such as these are known as administration themes or admin themes for short.
Drupal 8 ships with Seven as its admin theme.
A lot of effort has been made in Drupal 8 to ensure that admin themes work well on mobile devices allowing you to edit your content while on the move.
Some themes are not designed as finished products, but instead as starting points for your own theme development. These are commonly referred to as base themes. You can, and should, extend and override a base theme by creating a subtheme.
Themes will be covered in more detail in Chapter 13, Theming Drupal.
-
No Comment