Contributed and custom themes can ship with a thumbnail screenshot that will be used to represent the theme when listing themes in the administration UI.
In this tutorial you'll learn how to:
- Prepare your site for the screenshot
- Create a screenshot of your theme
- Define a screenshot file for your theme in the THEMENAME.info.yml file
Some, but not all, themes come with administrator-configurable settings that you can change through the UI. These might allow you to upload your own logo, choose between a couple of different pre-defined layouts, or turn features of a theme on or off. In this tutorial we’ll look at where you can find these theme settings if they exist, and how to go about changing them.
Clear Drupal's Cache
FreeKnowing how to clear Drupal's cache is an important skill for any developer. You'll likely find yourself doing it frequently in order to get Drupal to register the changes you make to your code, or other updates you make via the UI. It is also a good first step to trouble shooting problems with your Drupal site: Clear the cache before you do any other debugging to ensure it's not just a bad cache entry.
One important aspect of theme administration is the configuration of global and theme-specific settings. In this tutorial, you will learn where theme settings are configured in Drupal's administrative interface, the difference between global and theme-specific settings, and what each global setting refers to on a base installation of Drupal with a custom theme installed.
Drupal 8.1 now provides a user interface (UI) for conducting a Drupal-to-Drupal migration. Since there is no direct upgrade path for Drupal 6 or 7 to 8, you should become familiar with the migrate system in Drupal, as it will allow you to migrate your content from previous versions to Drupal 8.
Site Update: Navigation for Tutorials
Blog postWe've been working hard to improve the navigation on our new tutorials. Today we released a new and improved design that makes navigating tutorials much easier. See it in action in our Drupal 8 Theming Guide.
So far, 2016 has been a great year for Drupal and Drupalize.Me. We started off as our own company, and we’ve been heads-down on lots of new Drupal 8 tutorials. We have a deep love for Drupal and the community around here—so in addition to working hard at our business, we encourage each other to roll up our sleeves in the wider community as well. Here’s a little rundown of what’s been on our team’s radar recently.
Today I'm happy to say we've added three more tutorial to our theme guide that expand on JavaScript Libraries in Drupal. We now have tutorials that provide some orientation and basic exposure to Modernizr.js, Underscore.js, and Backbone.js and how to use them in a theme or module.
Underscore.js is a very small library which provides several utility functions and helpers to make working with JavaScript a little bit easier. In this tutorial we'll take a look at a part of the library, learn where the full library is documented, and see how we can make use of Underscore.js in a custom block on our Drupal site.
It's probably not too surprising that a library called Backbone aims to provide structure to your front-end JavaScript code and applications. In this tutorial we'll take a look at how Backbone.js goes about achieving that goal, and how you can make use of it on your Drupal site. We'll first take a high-level look at the main components that make up the Backbone.js library. With that basic understanding in place we'll look at an example of how you might integrate Backbone.js into a Drupal site.
In developing the theme for your website it's important to take accessibility into account. Making your site available and functional for as many users as possible is always a good idea. Progressive enhancement and graceful degradation are key, but how do you go about accounting for the minute differences between browser capabilities? This is where the Modernizr.js library can help you out.
Modernizr is a collection of browser detection tests which allow you, in either CSS or JavaScript, to determine if a particular browser supports a large list of features. From there it can automatically add classes to your page depending on the results of a particular feature test. It can also be used to create additional custom tests. In this tutorial we'll take a look at a few of the feature detection tests that Modernizr natively supports as well as how a custom test can be added to a Drupal theme.
New Tutorial Format Feedback
Blog postLast year we launched a new written format for our tutorials. We’re really excited about this format because it gives us the flexibility to present information in whatever way makes the most sense. With text and video on the same page, it's easy to find what you need, and it gives you the option to learn however you learn best.
Release Day: Theme Hook Suggestions
Blog postWe just added 2 new tutorials about Theme Hook Suggestions! First learn the concept behind this topic in our tutorial Discover Existing Theme Hook Suggestions. Then learn how to add them in our tutorial Add New Theme Hook Suggestions.
When determining which template file to use to theme an element, Drupal uses the list of theme hook suggestions to look for the best match. This allows for fine-grained control over how things appear based on dynamic state and contextual information in your application. The list of theme hook suggestions varies for each base template, so we need a way to figure out our options.
In this tutorial we'll look at:
- How to determine the list of valid theme hook suggestions for any template file
- How theme hook suggestions are added by modules and themes
By the end of this tutorial you should be able to explain how theme hook suggestions are added, and determine the valid suggestions for any template file.
Themes and modules can alter the list of theme hook suggestions in order to add new ones, remove existing ones, or reorder the list. This powerful feature allows for the definition of custom logic in your application that can tell Drupal to use different templates based on your own unique needs. You might for example; use a different page template for authenticated users, or a custom block template for someone's birthday.
In this tutorial we'll cover:
- Adding new theme hook suggestions from a theme using
hook_theme_suggestions_HOOK_alter() - Altering the list of theme hook suggestions
- Removing theme hook suggestions
- Reordering the list of theme hook suggestions
Drupal 6 was released in February of 2008 and on February 26th, 2016, after 7 years, Drupal 6 was retired, in accordance with the Drupal community’s policy of only providing active support for two major versions of Drupal at any given time. While it is possible to migrate a Drupal 6 (or 7) site to Drupal 8, the tools are still in flux. While simple sites make for simple migrations—since most sites are not simple and require considerable research, planning, and effort to migrate—migration remains a complex process. Continue reading to find out more about how Drupal 6's end-of-life impacts Drupal site owners and what options you have if you still run a Drupal 6 site.
Release Day: Our Drupal 8 Theming Guide
Blog postToday, we're super excited to publish our Drupal 8 Theming guide, a collection of tutorials that will teach you everything you need to know to create amazing Drupal 8 themes. We've put hundreds of hours into researching, digesting and understanding the Drupal 8 theme system. We've poured over the existing documentation and helped to update it whenever we could. We've read the code that makes it all possible, we've dissected core and contributed themes, and talked with front-end developers at Lullabot about their experiences, in order to learn about best practices and unique challenges. And then we boiled it all down into the ultimate Drupal 8 theming guide.
What Is a Theme?
FreeThemes are the part of Drupal that you, and anyone else visiting your Drupal powered application, see when they view any page in their browser. You can think of a theme as a layer, kind of like a screen, that exists between your Drupal content and the users of your site. Whenever a page is requested Drupal does the work of assembling the content to display into structured data which is then handed off to the presentation layer to determine how to visually represent the data provided.
Drupal themes are created by front-end developer. Frequently referred to as themers, or theme developers. Themes consist of standard web assets like CSS, JavaScript, and images, combined with Drupal-specific templates for generating HTML markup, and YAML files for telling Drupal about the file and features that make up each individual theme.
In this tutorial we'll:
- Explain what a Drupal theme is.
- Explain the role of a Drupal themer in the process of building a Drupal site.
- Get a high level overview of the types of files/code that themes are made of.
By the end of this tutorial you should be able to explain what a Drupal theme is, and the kind of work a Drupal theme developer will be expected to do.
Template files are responsible for the HTML markup of every page generated by Drupal. Any file ending with the .html.twig extension is a template file. These files are composed of standard HTML markup as well as tokens used by the Twig template engine to represent dynamic content that will be substituted into the HTML markup when the template is used. As a theme developer, you'll work with this a lot.
In this tutorial we’re going to learn about:
- What template files are, and how they fit into the big picture of creating a theme
- How template files are used in order to allow theme developers to modify the HTML markup output by Drupal
- Naming conventions for, and specificity of, template files
Twig is the default template engine for Drupal. If you want to make changes to the markup that Drupal outputs you're going to need to know at least some Twig. In this tutorial, we will outline the role that Twig now plays in Drupal, how Twig impacts the theming experience, and where to find additional resources for learning Twig.
At the end of this lesson, you'll be able to:
- Describe the role that Twig plays in creating Drupal themes
- Explain how Twig impacts the theming experience in Drupal
- Locate additional resources for learning Twig