4. Getting Started with the UI
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
In this chapter, we will walk you through the key parts of the standard Drupal 8 User Interface (UI) UI focusing our attention on the main visible components like the Toolbar, Shortcuts and Drupal's main administrative menu, the Administration menu.
As you work through this chapter, please keep in mind that the intention here is merely to provide you with a quick overview and that much more detail and guided tutorial assignments will follow in later chapters.
When you first visit your new Drupal 8 site immediately after installation at: http://drupal-8.dd:8083 you will do so, from the point of view of the admin user, that is, you are logged in as the special user with user ID (uid) set to 1.
To see the site from an anonymous site visitor's perspective, click on the Log out link at the top right of the page:
You will now see only the login link at the top right corner of the page:
Log back in using the credentials you set up in Chapter 2, Installation.
After logging in again, click on the Home tab or Drupal logo to go back to the front page.
We will now walk you through the page in order to illustrate what we were talking about back in Chapter 3, Basic Concepts, when we referred to pages being made up of blocks and views:
The default front page comprises the following elements:
- The Toolbar, which in turn contains four icons: Manage, Shortcuts, the currently logged in user (admin), and at the right-hand end, the Edit toggle icon that reveals / hides the contextual links (the encircled pencil icons that appear as you hover over editable content, see later).
- The Tray, which is immediately underneath the Toolbar, is a set of illustrated links that relates to the top level of the Administration menu.
- The Main menu, which is also hard coded in the default theme page template.
- The Search block is provided by the Search module, which is active by default.
- The Main content (a view) of the page in this case is provided by a View, which lists all of the content of any type that has been promoted to the front page. On a brand new site, there isn't any content, so don't expect to see much here.
- The Tools menu, like most things, exposed as a block.
In addition, at the bottom of the page you will see the Footer, which contains the following:
By default, the Toolbar module displays links to top-level items from the core Administration menu of which, in a standard install, there is only one: Administration which itself comprises: Content, Structure, Appearance, Extend, Configuration, People, Reports, and Help.
Other modules have the opportunity to add extra links at any level with associated icons.
Let's experiment a little with it now, to illustrate some key navigation points. Click on the Manage link to show/hide the default set in the Tray which houses the Administration menu as follows:
You can easily toggle the position of the Tray between horizontal and vertical modes by clicking on the position toggle icon at the far right-hand side:
We'll now step through each item in the tray (although not in quite the order that you see them presented on the screen), and cover the basic features provided by each. Before we do that, let's first introduce three key ideas:
-
No Comment