0

How do i make a custom drupal theme i already have responsive. I mean the easiest way to do this?

What about integrating my current custom theme on top of a drupal base theme like omega?

  • you'll have a hard time with this approach. A motto typically for responsive design is "mobile first". There is no easy way to take your current theme and bolt a responsive base theme, or subtheme to it ... you either capable with the CSS rules and HTML usage or not. – tenken Jul 17 '13 at 22:10
2

You can retrofit your custom theme to make it responsive. Emma Jane Hogbin has written a great tutorial for this (available for purchase at http://www.responsivewebdesignguild.com/). I have used it to retrofit a couple of drupal sites that use the zen base-theme, the principles should work for any theme.

The basic principles/steps are:

Add a new style sheet to your css directory (and .info file) Determine break points in your theme depending on the content - what do you want to display wide - medium - narrow views, how do you want to reorganize the page Add media queries to the stylesheet reflecting the break points, like this:

@media screen and (max-width: 960px) {
  #main {width: 100%;}
}
@media screen and (max-width: 750px) {

}
@media screen and (max-width: 500px) {

}

Basically, adjust the width/etc. for the elements and width determined earlier. The navigation menu is a special case. At the max-width that makes it most likely that the user is using a table or a phone, the menu should be "fat-finger" enabled, by changing the ul and li styles so that each link has a larger width and height. For me, links changing from horizontal to "one link per line with padding" works best.

Then, copy the core html.tpl.php file into your theme/templates directory, and add the following to end of the header section:

<meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />

Emma Jane demonstrated this approach for the Domicile theme, the result is available at: https://drupal.org/project/domicile_responsive

Not the answer you're looking for? Browse other questions tagged or ask your own question.