Our main focus for the Domicile theme is restyling Drupal's markup with CSS. Although it is tempting to put all of your CSS into a single file, things can quickly grow out of control. In our theme we'll break our CSS into smaller stub files to make the theme easier to maintain using the file naming conventions for Drupal 8.By the end of this lesson you will be able to incorporate CSS files into your theme via the theme's .info file.
Additional resources
Drupal uses a series of nested template files to build out the rendered HTML pages we see in our browser. The template file page.tpl.php holds markup between <body> and </body> tags. We talked about the nested nature of template files in Lesson 3: Theming by Component.
In this lesson we will:
- create the file page.tpl.php
- add the relevant markup, and CSS classes for our grid framework
- insert relevant PHP variables so that Drupal can render each of its page components.
By the end of this lesson you will be able to create, or adapt, a page.tpl.php file to suit the conventions you identified in your style guide.
Designs often have a few elements which don't need to be easily edited and can essentially be "hard wired" into the template files. In our design there are three or four images which fall into this category. In this lesson we'll edit the page.tpl.php file to insert our design assets from Lesson 5: Extract Design Assets. By the end of this lesson you will know which variables can be used in a template file to ensure the correct directory is always used for hard-coded image files.
One of the Drupal 8 initiatives that really excites me is Web Services. Drupal has never been easy to work with as a web service, but all that is about to change! In this article I am going to explore what has been going on behind the scenes with RESTful Web Services in Drupal Core and attempt to implement some working examples. After reading, you will be able to create a new node on your site via the Drupal 8 Core REST API.
You're Back!
Blog postOur winter elves* have not taken a break and have continued to crank out improvements to the Drupalize.Me platform. This week's release includes fixes identified in over a dozen tickets. A few of our favorites are highlighted below.
A New Year
Blog postWelcome to 2014! We're delighted to see you on this side of the calendar.
Technically a theme can be installed onto any Drupal site, but it never quite works this way in real life. In this lesson we'll create a playground so that we can try out our theme before deploying it to a live server. We'll start by installing Drupal and adding some “fake” content and menus with the devel generate module. For these tasks we'll use Drupal's default theme, Bartik. By the end of this lesson you will be able to install Drupal in an environment where a development version of the theme can be safely tested.
Additional resources
One of the most time consuming things a content editor can be forced to do is resize images before creating their content. Fortunately we can get Drupal to do the resizing for us. It's not perfect—it's just a plain resize, but it's enough for most basic sites. By the end of this lesson, you will be able to configure Drupal to resize images to your specification when they are uploaded using the image field type.
It's pretty typical for a site to have one or two pieces of content that need to be easily edited, but also aren't nodes. For example: text in the footer. There are a number of ways to create this content. We'll use blocks to create this content as this is the easiest way to place content into a specific region without additional helper module. By the end of this lesson you will be able to create custom blocks, and place them into specific regions within your Drupal theme.
A base theme is someone's idea of a really great starting point. It might include the stub files for CSS overrides, template files which bring Drupal core's markup up-to-date with HTML5, useful theme overrides which create new template variables. In other words: a base theme can provide you with a lot of really great stuff! The first version of the Domicile Theme used the NineSixty base theme—just enough for a simple site, but not so much overhead that it was complicated to learn. This version of the theme doesn't use a base theme. That's because, thanks to Sass, we'll be able to get almost all of the power of the NineSixty base theme through a gem plug-in. In this lesson you will learn which folders are typically used to keep Drupal themes neat and tidy.
This week, we continue the journey from PSD to Drupal Theme as Emma Jane Westby shows us how to prepare a Drupal site for our theme by generating sample content, customizing image styles, creating and placing blocks, and creating a useful
If you’re anything like me, you’ve been meaning to get involved with Drupal 8 for quite some time now. But where to start? What’s left to be done? How do I find tasks that match my skills? Enter Core contribution mentoring.
Careful With That Debug Syntax
Blog postA funny thing happened last week. On Wednesday, we performed our weekly code deployment and released a handful of new features/bug fixes to the site. And then, about an hour later, someone on the team found this:
Contributing Time to Drupal 8
Blog postDrupal 8 is coming in 2014. There is a lot of work to do and a lot to learn. We've decided to dedicate a minimum of five hours per week towards Drupal 8 for each person on the Drupalize.Me team.
This week we're chugging along with our PSD to Drupal Theme series, with a look at getting our CSS system setup and figuring out our Drupal elements for theming.
Free PSD to Theme Webinar
Blog postIn 2008 I started on my big Drupal theming adventure by co-authoring Front End Drupal with Konstantin Käfer. Since that time thousands of people have learned Drupal theming through this book, and my presentations and workshops.
A Few Bug Fixes
Blog postWe're super excited to release a new series this week, which has been a highly requested one on our suggestion list: PSD to Drupal Theme. This series walks you through the process of converting a static design into a Drupal theme. We'll be covering strategies for breaking down your design into Drupal pieces, extracting your design assets, and working with those components in your CSS. Along the way you're going to also be introduced to grid frameworks, Sass, and other very helpful general web development tools. At the end you will have a theme that you can install and enable on your Drupal site. Having a little bit of Drupal site building experience, and a little bit of Web experience (HTML and CSS) will be helpful but it's not required, so if you find the world of Drupal themes mysterious, this is a great series to clear the fog.
This learning series covered just the tip of the theming iceberg. Hopefully you're now feeling motivated to learn even more about theming. In this lesson we will review some of the other topics you will want to explore next including: advanced theming techniques, using a base theme, such as Omega, layout modules. By the end of this lesson you will by able to identify which videos you should (or could) watch next to learn more about theming Drupal.
To go from design to theme we worked through three major steps: building a style guide; building out Drupal; and finally applying the style guide to Drupal. In this lesson we'll review each of the steps outlined in this learning series:
- creating a style guide with base rules, layout rules, and component rules
- extracting design assets
- configuring Drupal
- creating theme files
- debugging components from within Drupal
By the end of this lesson you will be able to outline the process needed to transform a static design file into a functional Drupal theme.