Drupal Theme: How to Create a Responsive Drupal Theme

This article will let you enable to create responsive Drupal theme including Drupal templates. Also, you can create mobile Drupal theme, Drupal responsive themes in very easy and affable way. This is an exquisite article that not only makes you familiar with Drupal designs and responsive theme but also include a Drupal tutorial that will make you learn how to design Drupal theme, implement custom Drupal themes and enrich your site with the best Drupal themes.

Perhaps you all would be familiar with Drupal, even though let me put some light over Drupal before proceeding further towards creating a responsive Drupal theme. Actually, Drupal is a free open-source CMS (Content Management System) and CMF (Content Management Framework) that has been drafted in PHP. Moreover, it is employed as a back-end system for all kinds of websites worldwide for at least 1.5% from individual blogs to corporate sites. Also, it is quite useful for business collaboration and knowledge management.

In the community of Drupal a ton of contents exists that say about how to integrate other technologies like CSS3, HTML5 and media queries to get a best responsive Drupal theme. However, in order to build a website that should be compatible with mobile devices, Media queries are not seems to be efficient but offer an excellent way to render your website which work with distinct viewports. Also, they used to sport very nicely with external caching like Varnish. A ton of solution are available that nuzzle the device and then make appear the right version of the website or another distinct theme, finished through getting cached and don’t display the correct version to users.

However, in context of getting started with Drupal theme development, Drupal templates or mobile Drupal them, all you require is an info file where you can define or outline your theme and the CSS. Rest will be take care by Drupal itself. Thus, you have complete liberty to edit any of the HTML or any content. If you are worrying how? Then nothing to worry any more this post Drupal Theme: How to Create a Responsive Drupal Theme has answer and will make you learn.

Info Files

First of all you are required to draft an info file which incorporates all information that is required by Drupal to know what your theme is and how to employ it. There are some required components as well as various optional elements.

Now, the above snippet of code can be included to responsive.info file. Next, this file is to comprised in a folder called responsive, that can be forwarded into sites/all/themes of your Drupal 7 installation.

Here, the first few lines of above code can be comprehended easily: name is your theme name; description is your theme’s description; and core is referred as Drupal version that your theme is written for – if we are using Drupal version 7 then core is 7.x. Both name and description will appear on the Themes page within the entire Drupal interface.

Next, the few lines are concerned with style sheets which you might want to appear as part of your theme. The declaration of such style-sheets is in a psudo-PHP array. In this array, the first key is media elements of the style tag created by Drupal. This key comprises any HTML style tag media  or media query element which you desire to employ for your theme, such as print or screen. Left empty is the second key array that offer multiple style-sheets that can be implemented to a single media type. For such kind of style-sheet Andy Clarke’s “320 and up” approach towards initiating with mobile devices and swing upto complete size of desktop.

Responsive Drupal Theme

Caption: Responsive theme display all contents in one column at the smallest available width. This employed a fixed width of 320 px that is considered as ideal for almost all smartphones.

Thinking in this same line lets you to focus on including features and functionality in the case when the size of screen becomes bigger instead of taking them away. The first two style sheets are compatible for all kinds of media. Reset.css constitute a CSS reset. Main.css is the beginning point of ‘real’ CSS. It has comprised all default CSS that will be employed throughout each and every size of viewport including the formatting for the website in the case when appear in a viewport of less than 480 px width. Thus, it is referred as the perfect place to include portrait smartphone styles.

The last four lines of snippet of info file demonstrate four CSS files employing media queries. However, these media queries are very useful to render the CSS at 480px, a size of landscape iPhone:

Best Drupal Theme

Caption: It is the second size of theme that employed a fixed 480 px width. It is perfect for almost all smartphones for landscape appearance. It offer more text to appear on the screen.

The size of a portrait iPad: 768px

Responsive Drupal Theme

Caption: This size is ideal for landscape view for most of the mobile devices inluding iPad, iPhone, smartphones etc. as well as for various laptop and desktop users. However, now the content has been distributed in two columns.

and 1,280px, the size of a well-sized desktop browser:

Drupal Template

Caption: Eventually you got the final version of responsive Drupal theme, employed by many sites of 1280px size.

Now, you can proceed further to build the info file demonstrated in the CSS files. In the example, the file path uses a CSS folder for OCD’s sake. Therefore, you are required to create a folder defining name as CSS within sites/all/themes/responsive. Next, build the CSS files there through employing the set of filenames into the info file.

Further you are supposed to collect a copy of your desired favorite CSS reset and implant this into reset.css. Next, in main.css you can initiate incorporating your CSS towards designing your website. However, Drupal has already built HTML for your site, even though you can make ‘Responsive’ theme enable in order to see what has been created by Drupal as well as how your site looks in bare form.

Template Files

Several diversified categories of Drupal templates are also available over internet. These are truss with core Drupal installation and with regularly contributed modules. This is the place where most of the HTML are demonstrated and can be easily spotted because these are end with tpl.php extension. Moreover, these all Drupal templates files can be dominated in your theme just in account of including a file having the identical name. As for example, it you want to dominate the HTML for nodes into your website, you are supposed to copy node.tpl.php for node module and include it to sites/all/themes/responsive.

However, in context of building a page it required multiple templates. The first one is the html.tpl.php. It features everything from outside of the HTML body. Then, consider page.tpl.php, which is referred as everything inside the HTML body. For all pages, these two are being loaded. Rest other Drupal template files depends on the construction of your site. In the case if it has block, it used to call block.tpl.php concerning those. In the case you are showing up the nodes either in teaser or full format, it will invoke node.tpl.php. Later, if you constitute contributed modules like panels or views, then these modules result in building a set of distinct template files for every element.

Template file are well acquainted regarding content that what and where to display on PHP variable incorporated within them. Likewise templates files, theme functions can be also overrule easily. However, the first step you are required to perform is to create a file coining the name as template.php within sites/all/themes/responsive. In account of this template PHP file you are free to enclose any theme function, but you will have to transform the first word in function name to the name of theme, in this case ‘responsive’.

Let’s take a look over this example where we will look toward dominating the theme function that is useful to create the pager. The pager can be designated on multiple pages and views throughout your entire Drupal site in the case it is accompanied by tons of content. However, let’s assume that you wish the pager in very simple manner with only ‘next’ and ‘previous’ links without incorporating page numbers. We would use this snippet of code:

However, these things can be included to template.php file of the concerned theme. Next, it will overrule the theme_pager function within pager.incof Drupal core. This function is known as responsive_pager. It used to expose the Drupal pattern in context of transforming the word ‘theme’ into a function of theme name while overriding it in template.php. Eventually, the original functions or theme can be copied and then can modified accordingly as per requirement. In this example, you can notice that the default page has been transformed from ‘first, previous, 1, 2, 3, 4, 5, next, last’ to a basic  ‘previous, next’. Moreover, it utilizes almost all Drupal code available as default in context to create the buttons for these pager, but eliminates all other logic employed earlier. Furthermore, it can be transformed to optimize the pager functionality in the way that might be required.

JavaScript and jQuery

In standpoint of many web-developers, often a website requires a sparkle from JavaScript and more significantly from jQuery. However, Drupal sports with jQuery, therefore, it can be employed throughout your entire theme. You can also incorporate JavaScript files to your desired theme in account of info file likewise CSS.

This above snippet can be included to responsive.info in order to incorporate sparkle.js file while you attempt to load the theme. For JavaScript, Drupal utilizes a ‘Behaviours’ system, that is useful to build a single mechanism in context of attaching JavaScript and hence being implemented consistently while new content is added or a page is loaded. In order to know how it work, lets consider this example of including a small quantity of jQuery animation to the title of the website.

Here, the above listed snippet of code can be included to the sparkle.js file comprised in the responsive theme and etch an animation effect to the name of website when it is supposed to hovered over this. One thing should be notice here that when you attempt to make any alteration to the info file of theme, it won’t put any impact until the theme has been re-enabled. However, you would required to go to the appearance page and accomplish this prior of sparkle.js will begin to work. Now, the code initiate via mapping jQuery to $: In order to check conflicts, it is not accomplished by default. However, the function is stored as Drupal.behaviors property and defines a name relevant to the theme and its functionality. The rest you can designate in standard jQuery.

In the case when h1#site-name is hovered over, you can include a slow animation through defining a 10-pixel margin at the left of the name of website. On the Drupal website, some great documentation are there achieved in account of jQuery and JavaScript, drupal.org/node/171213. It will deliver an insight regarding its functionality as well as how it can be implemented.

Clyde Ray

Clyde Ray is a passionate writer and a web developer at PSDtoDrupalDeveloper. Through comprehensive research, he has unearthed the relevant solutions for PSD to Drupal conversion, Drupal web development and many more. His various articles associated with Drupal technology have become a knowledge-base for many beginners and professionals.
Clyde Ray