Drupal theming

Drupal theme structure

A Drupal theme is a set of files that change site appearance.

The Drupal theme includes a variety of files. Their number depends on theme complexity. A theme can consist of only 3 files or of dozens of flies including graphic elements and different scenarios.

Every theme should be in a separate folder, which contains all files of the theme. The developed themes should be in the folder ./sites/all/themes.

Name of the theme folder can include only lowercase Latin letters and underscore sign.

The Drupal theme must contain the .info file, where the name of theme should be included. Also a theme can include styles files (*.css), scripts files (*.js), template files (*.tpl.php), images, etc.

Description of theme file - .info

.info – is a mandatory file, it must be included in Drupal theme to make theme visible. .info file determines the inner theme name. Stylesheets, JavaScript, metadata, and regions should also be specified in the .info file.

; $Id:
name = Theme name
description = Simple theme
version = 1.1
core = 7.x
stylesheets[all][] = css/style.css
regions[header] = Header
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[footer] = Footer

Let's take a look the contents of file .info:

  • ";" – indicates the comment line. However, the first line is a comment and system line at the same time. This line must be in the theme folder if you are going to copy your theme to the drupal.org.
  • name – is a name of the theme. There is a difference between theme name in the name of .info-file and name which is indicated in the “name” parameter. The name, which is pointed in the “name” parameter will be used in the admin panel in the list of themes; and the name of info-file will be used as a system name in the name of functions
  • description – is a description of the theme
  • version – is a version of the theme
  • core – is a version of Drupal for which the theme can be used (the 7th version in our case)
  • stylesheets – is an array, which contains a list of styles CSS. "All" key means that this style will be used for all devices.
  • regions - an array which includes all regions of the theme

Templates files (*.tpl.php)

There are several template files in the theme folder. These files contain Extensible HTML (XHTML) and PHP variables of the theme. Every template file manages specific output data in common case. Template files can overlap each other by means of system options of displaying data. Template files should not contain complex logics, because it makes them difficult to support. It’s desirable that these files consist of XHTML tags and PHP variables only. For example, html.tpl.php includes the layout of full HTML page (Doctype, , ), page.tpl.php is responsible for outputting content inside tags.

Not every template file should be presented in the theme folder. If any template file is absent in theme folder, its prototype will be used from the Drupal core.

If template file should be used from the theme folder rather than Drupal core, it's necessary to copy it to the theme and clear cache. Drush or Admin menu can help here.

File template.php

File template.php contains whole logics of conditional conversions and processing output data of the theme. Template.php file can be used for simplification of the template files of the theme. This file must begin with the opening tag PHP <?php (as it is a php-file), but the closing tag can be skipped.

A cache must be cleared in the following cases:

  • when new drupal functions are added to template.php
  • when the .info file is changed
  • when template files are added/deleted

Other files

Many Drupal themes can include other optional elements. For example, screenshot, logo, file theme-settings.php. Logo and screenshot are desirable, but not required. However, a screenshot is needed if you’d like to introduce your theme in the Drupal community.

File theme-settings.php contains parameters of user interface management or additional opportunities. Besides it contains such general things as search settings and logo.

Subthemes

Subtheme – is a theme which inherits the functionality of another theme. Functionality means templates (*.tpl.php files), stylesheets (*.css) and scripts (*.js) files, settings, functions, which are defined in template.php. To create subtheme it's necessary to indicate relative theme in the .info file. Files of the relative theme will also be connected to the site.

name = My Theme
description = Modified theme
core = 7.x
engine = phptemplate
base theme = Themename
  • Create a new directory in sites/all/themes folder, which will include files of the subtheme.
  • Create .info file in this directory. Indicate information about subtheme and relative theme in this file.
  • Drupal allows to create a subtheme on the base of another subtheme, i.e. create the hierarchy of themes. There is an opportunity to use the functionality of the basic theme and to make something new of your own. In this case, you can update the basic theme (upload new releases from drupal.org) without loss of site performance.

A region is a space in the html-document where blocks can be placed.

So now the theme can be installed, i.e. the theme can be switched on in "Appearance" menu.

To use regions it's necessary to make two things:

  • to define the region in the theme (in its info-file)
  • to indicate the place of the region in its page.tpl.php file

The defining of region in the theme

Section "regions" is used to define regions in the info-file.
If you want to make some changes in the list of regions (to add or delete region), consider the following:

  • Region "content" must be included. The main content of the page in Drupal 7 is considered as a block (a block with name "Content"). Block Content is installed to the region “content” by default. Region Content is made as a mandatory to avoid disappearing of content.
  • It is recommended to add a “Help” region, but its exclusion will not lead to breaking the site. Region “Help” provides the outputting help as a block element. It also means that content of the tips and helps can be described in block.tpl.php. The theme will output help text in this region by default, but this can be changed in the administration block section.
  • It is recommended to add a “Highlight” region, but its exclusion will not lead to breaking the site. "Highlight" region is a replacement of outdated parameter – site mission ($mission) in the previous Drupal versions. If it is necessary to add an analog of the text “site mission” you can just create a new block.

Hidden regions

Hidden regions are used for specific purposes of core or modules in Drupal 7 and are not shown in the admin panel. To use a hidden region you should specify it as usual:

regions[secret] = Secret region

Then this new region should be placed in the hidden regions section:

Regions_hidden[] = secret

There are two new predefined hidden regions: page_top and page_bottom. If you’d like to override these regions you shouldn’t define them in regions_hidden[] section as they are already predestined.

Region “page_top” is used for outputting some non-configurable blocks of Drupal Core in the beginning of html-document and should be placed after opening tag, before any other layout elements.

</html>;
<body class="<?php print $classes; ?>">
  <?php print $page_top; ?>

Region "page_bottom" is used for outputting some non-configurable blocks of Drupal Core at the end of html-document and should be placed before closing tag, after any other layout elements. Variable $closure in Drupal 6 is the analogue of this action.

 <?php print $page_bottom; ?>
  </body>
</html>

In Drupal 7, some variables are excluded: $taxonomy, $mission, $footer_message.

Sidebar variables now have more clear names: $sidebar_first and $sidebar_second instead of $right and $left. Also primary and secondary links are $main_menu and $secondary_menu now.

Mobile version of a site

There are two approaches when creating a mobile theme:

  1. Realization of different site appearance for various devices
  2. Orientation to different screens resolutions

Mobile version is generally a simplified version of a full site. If the full site version contains a lot of content or it is an interactive or a complex site which uses different ways of accessing content (for example, Facebook), it is better to create separate versions for desktop and mobile devices. For example, such sites as NYTimes.com and CNN.com have a separate mobile version, which displays a limited number of articles and links.

To create a mobile version of a Drupal site you can use module Mobile Theme or Mobile Tools, for example.

Mobile Theme module
Mobile Theme module

In admin panel choose the theme which will use for mobile devices and specify an URL, on which mobile theme will be available. Then the process of theme creating will not differ from creating a usual theme.

Adaptive theme means an absence of separate versions of the site for mobile devices and desktops: site adjusts to the screen size, on which it is displayed.

The process of creating adaptive themes

Creation of adaptive theme is based on media-queries.

The first step is writing the info-file.

name = Responsive
description = An example of using Media Queries in Drupal7
core = 7.x
stylesheets[all][] = css/main.css
stylesheets[(min-width: 480px)][] = css/480.css
stylesheets[(min-width: 768px)][] = css/768.css
stylesheets[(min-width: 1024px)][] = css/1024.css
stylesheets[(min-width: 1280px)][] = css/1280.css

At the least width (320px) the dynamic theme shows content in one column. This width is ideal for the majority of smartphones.

The first stylesheet is for all media types. This file contains all default CSS which is used for every resolution and layout styles for screen resolution less than 480px. This is an ideal place for adding portrait styles for smartphones. The last four lines in info file determine CSS files with media-queries.
Let’s take a look at the adaptive theme of the site "Smashing magazine".

The adaptive theme of the site "Smashing magazine"
The adaptive theme of the site "Smashing magazine"

The first resolution is less than 480px.

The second size of the theme uses a fixed width – 480px. This width is an ideal width for the majority of smartphones in a horizontal sweep. It allows you to view a large amount of text.

The adaptive theme of the site "Smashing magazine"
The adaptive theme of the site "Smashing magazine"

The third size of the dynamic theme is a fixed width of 768px which is used by tablets with portrait sweep (for example, iPad).

The adaptive theme of the site "Smashing magazine"
The adaptive theme of the site "Smashing magazine"

1024px – is a horizontal sweep of iPad:

The adaptive theme of the site "Smashing magazine"
The adaptive theme of the site "Smashing magazine"

This size is used when viewing the site on the notebooks and full-length PC, not only tablets.

The adaptive theme of the site "Smashing magazine"
The adaptive theme of the site "Smashing magazine"

Full-length site

The method by Andy Clark “320 and more" is used here. It means that the design is developed for mobile devices at the beginning. Then it finishes for the full-size version. Such approach helps to focus on what elements can be added to when increasing the screen rather than what things should be removed when decreasing the screen.

Adaptive web-design is a good idea which gives a number of opportunities. Every site can be optimized for mobile devices with some imagination.

A technique of fluid layout can be used when creating an adaptive theme.

The main idea is a calculation of proportions in percentage: "target / context = result".

For example, there is a 1000px width mock-up. There are two blocks here: on the left with 270px width and on the right width 730px width. The code will be the following:

.leftcolumn {
  width: 27%; /* 270px / 1000px = 0,27 */
  float: left;
}
.rightcolumn {
  width: 73%; /* 730px / 1000px = 0,73 */
  float: right;
}

If left column has one block inside with 170px width, the target and context will change for it. And the code will be following:

.leftcolumn .some-div {
  width: 62,962963%; /* 170px / 270px = 0.62962963 */
  float: left;
}

Fluid images

Fluid images adjust to the parent block. The main idea is using a property max-width: 100% and height: auto. The image with {max-width: 100%} never gets out of a parent block. If the parent block is less than the image size, the image will decrease proportionally.

This works not only for images, but embed, object and iframe tags also.

.video embed,
.video object,
.video iframe {
  width: 100%;
  height: auto;
}

In the first example .css files were included into .info file depending on resolution.

But different styles depending on resolution can be defined into one file:

/* css began */
@media only screen and (min-width: 480px) {
  /* Styles for mobile devices (Android, iPhone, etc.) */
}
@media only screen and (min-width: 768px) {
  /* Tablet in portrait sweep */
}
@media only screen and (min-width: 992px) {
  /* Tablet in landscape sweep, netbook, notebook, desktop */
}
@media only screen and (min-width: 1382px) {
  /* Desktop with more resolution, TV */
}
/* css ended */

IE8 and older versions do not support media-queries. Respond.js solves this problem

Responsive design is a clever idea that, with the right set up, will cut down on web maintenance and content creation. It also helps in SEO.

Usability

Google wants to send visitors to the sites that they want to see. When searchers navigate to your site and immediately return to search engine results pages, Google makes a note that your site might not be the best choice for that search term.

If you have a mobile site that has less content or looks significantly different than your regular site, you’ll return visitors who are looking for something they found on the desktop version. If you don’t have a mobile site at all, 61% of visitors will return to Google to find a site that is easy to read. This way, your bounce rate will rise and your rankings will drop. With a responsive web design, visitors will get all the content they want in a format they can read.

Duplicate content

A responsively-designed website means that content is only in one place on the Internet.

Ranking for mobile searches

Google has said that it ranks sites optimized for mobile higher in mobile searches. Google recommends a responsive web design, meaning your responsive designed site will rank as well on mobile search as a site designed specifically for mobile. That’s especially useful for...

Link building

With a responsive web design, a link to your main site is a link to your mobile site as well. Mobile sites are still new, so your competition in mobile search is going to have significantly fewer backlinks. A responsively-designed website will have the backlinks of your original site, even while competing for mobile visitors. It’ll give you an instant edge over there. And, as mobile usage rises and webmasters start linking to mobile sites, your backlinks from both mobile and desktop sites will combine for a stronger backlink profile.

Be aware that the technical implementation is fairly advanced, and there is a number of small mistakes you should watch out to avoid:

1. Use compressed images

You might have some gorgeous photos that are loaded fine on the desktop version of your site, but those are going to have to be loaded on mobile versions as well. 74% of mobile users will leave after 5 seconds waiting for a page to load, so make sure that you compress your images as much as possible, and use them somewhat sparingly. Smush.it is a great tool for compressing images.

2. Design for all screen sizes

A lot of designers will want to design for one mobile size, one tablet size, and one desktop size, and just make a "responsive" design that snaps the site into a different layout for those standard sizes. But we have large and small cell phones, tablets the size of Kindle Fires to 10” Samsung Galaxy Tabs, and desktop monitors as big as 30”. A responsive design is more about resizing the elements on a page as you have more pixels than it is about snapping one design into another. As designer Stephen Hay says, “Start with the screen small first, then expand until it looks ugly. Time to insert a breakpoint!”

3. Always show all content

It might feel overwhelming to find a way to fit all of the content from the desktop version of a page onto a mobile version of a page, but that’s the point of responsive website designs. In the examples described above, the only content that goes away is ads (which users probably didn’t want in the first place) and some navigation (which is replaced by a simpler version of navigation). No actual content is hidden. Mobile visitors want just as much information and just as many options as desktop users do, so don't deprive them.

4. Optimize for touch

You probably won’t accidentally include an onmouseover JavaScript event on the mobile size of your site, but be aware that tablets can’t hover with their mouse either, and someone on a desktop might be using Windows 8 and want to use touch. Best practice is to make your site completely accessible with touch-only, regardless of the screen size.

5. Test on all browsers

Remember the good old days, when you complained about having to test your website on IE and Firefox? Now you’ve got:

Desktop

  • IE9 for Windows 7
  • IE10 for Windows 8 (which doesn’t run Flash)
  • Firefox
  • Chrome
  • Safari

Tablet/Mobile

  • Safari
  • Default Android browser
  • Chrome beta
  • Dolphin
  • Opera
  • Firefox

And those are only the most popular ones. You’ll have to test on all of those, at different screen resolutions, too.

Required elements for styling in a Drupal theme:

  • Layout (sidebar width and width of main content);
  • Blocks (standard drupal blocks);
  • Headings (h1, h2, h3, etc.);
  • Paragraph;
  • Comments;
  • Profiles;
  • Form elements

Anyway, the theme cannot cover all of the styles; a user can install such module, styles for which are not provided. However, you can use module Style Guide for more quality testing.

Useful links

Themes

https://www.drupal.org/project/omega
https://www.drupal.org/project/zen
https://www.drupal.org/project/adaptivetheme
https://www.drupal.org/project/responsive
https://www.drupal.org/project/arti
https://www.drupal.org/project/fbg
https://www.drupal.org/project/mothership
https://www.drupal.org/project/professional_theme
https://www.drupal.org/project/fontfolio
https://www.drupal.org/project/tb_sirate
https://www.drupal.org/project/best_responsive
https://www.drupal.org/project/responsive_blog
https://www.drupal.org/project/responsive_business

Modules

https://www.drupal.org/project/mobile_theme
https://www.drupal.org/project/mobile_tools
https://www.drupal.org/project/views_fluid_grid
https://www.drupal.org/project/views_fluidgrid (https://masonry.desandro.com/)
https://www.drupal.org/project/ais (https://adaptive-images.com)
https://www.drupal.org/project/resp_img
https://www.drupal.org/project/adaptive_image
https://www.drupal.org/project/cs_adaptive_image
https://www.drupal.org/project/media_responsive
https://www.drupal.org/project/flexslider
https://www.drupal.org/project/fit_text
https://www.drupal.org/sandbox/iaminawe/1635888
https://www.drupal.org/project/ideal_comments
https://www.drupal.org/project/views_slideshow_liquidcarousel
https://www.drupal.org/project/Bendy
https://www.drupal.org/project/responsive_background
https://www.drupal.org/project/breakpoints

Articles

https://habrahabr.ru/post/125247/
https://habrahabr.ru/post/142120/
https://mediaqueri.es/
https://www.w3.org/TR/css3-mediaqueries/
https://drupal.org/node/1388492
https://alistapart.com/article/fluid-images
https://modulesunraveled.com/responsive-images/part-1-installation
https://drupal.org/node/1386252
https://code.google.com/p/css3-mediaqueries-js/
https://www.quirksmode.org/m/css.html
https://alistapart.com/article/creating-intrinsic-ratios-for-video

Testing

About adaptive layout testing
https://www.responsinator.com
https://quirktools.com/screenfly/

You might also like

preview

What React is and how it can cut the cost of website development

For years React.js has been one of the most popular and efficient tools used for complex web interfaces development. In this post, we are going to tell you – briefly and almost without using any intricate concepts – about React, the way it appeared and the benefits it offers for a business and contractor’s team.
Stylus CSS Preprocessor

Stylus CSS Preprocessor

Stylus is a quite new but a dynamically developing CSS preprocessor. It is far more interesting to see what Stylus can show against the "old-timers".