Find a new theme in Drupal 8

d88

Drupal 8 ships with the Bartik, Seven, Stark, and Classy themes. Although Bartik is a great theme, it’s likely one that you won’t use on your production site (although when browsing around the Web you’ll often run into a site that uses Bartik as its production theme).

Seven is the default admin theme, created specifically to render administrative pages. Stark is a very simple theme with virtually no styling, and Classy is a base theme that is meant to be the basis for building your own theme. If you’re going for a very clean and text heavy theme, then Stark may be a good choice for you, but it’s likely that you’ll want to pick from one of the hundreds of themes that you can freely download and use.

Before you begin your search for a new theme, you should sit down with a blank piece of paper and sketch out the general layout of at least the homepage of your new site. Key concepts to focus on include:
Will your site have a header or banner area? If so, how tall will the header be, and will it span the entire width of your page?

Will your site use horizontal menus and, if so, how many will you have and where will they be placed?

Does your design call for a left or right side bar? Or does your design call for two sidebars on the right or two on the left?

Will your site have a footer and, if so, does the footer span the entire width of the page?

Will you have a fixed width (say, 960px wide), or will the site need to adjust for different screen widths across a variety of desktops, laptops, tablets, and smartphones?

Answering these questions will help you narrow the choice of themes to only those that support your general layout and design goals.

The best place to begin your search for a theme is the Drupal.org website. To view a list of the available Drupal themes, visit http://www.drupal.org/project/project_theme. It’s where most drupal developers search for cool themes. For demonstration purposes, let’s search the Drupal.org site for a Drupal 8 theme that matches our intended layout and color scheme. On http://www.drupal.org/project/project_theme, select 8.x from the “Core compatibility” select list to limit the list to only themes that are Drupal 8 compatible, and then click the Search button. Drupal will display the list of themes, only listing those that are compatible with Drupal 8.

You can narrow the list of themes by filtering the results by theme name, maintenance and/or development status, and theme status (full projects or only sandbox projects, the latter of which are themes that are under development and have not yet been released). You can also use the “Sort by” filter to sort the results by creation date, last release, last build, title, author, or most installed. Choosing “Last release” shows all of the newly added themes (or updates to existing themes), which is a nice feature when you visit this page often and want to see what the community has contributed recently. For this demonstration, let’s sort by Title to list the Drupal 8 themes in alphabetical order.

Advertisements

Using Themes in Drupal 8

dr

The visual layout and presentation of your new Drupal site is defined through a Drupal component called a theme. A theme defines
-The colors used on the page.
-The fonts used for text, headings, links, and other elements.
-The placement of images and graphics that are present on every page of the site (images and graphics that are associated with the page itself rather than a content item).
-The layout of the page (such as a menu at the top, a banner area, a secondary menu below the banner, a column on the left, or a footer).

Themes can be as simple as a plain white canvas or as complex and visually energizing as your imagination can conjure up. Drupal themes are designed and developed using HTML, cascading style sheets (CSS), and elements such as variables, expressions, and tags from the Twig templating engine. Twig makes it easier for nondevelopers to create Drupal themes because they don’t have to know PHP, the programming language that Drupal is built upon. Most Drupal developers use custom themes, but also out-of-the-box themes.

We have already worked with a Drupal theme; the basic Drupal 8 site that we installed as part of the earlier chapters in this book uses the default Bartik theme. Bartik is a predominantly “black and blue” theme, with a relatively simple structure. The theme provides 17 different regions where you can place content, widgets, images, videos, forms, or other elements.

You’ll find as you browse through various Drupal themes that many of them follow this same generic layout, which for many people is a negative because it makes them believe that every Drupal site looks nearly identical. The truth of the matter is that, yes, many off-the-shelf themes follow this same layout pattern. However, you have the ability to create a layout that significantly deviates from the standard.