Adapting a Site Template


After reading Brent Bice’s great post about cheap themes,  I think it is important to see the other side and talk about how, in some cases, they can be useful for your business as a small web design firm. It's clear that if you are a business owner and try to create your own page using one of those cheap themes, and you don't have experience with theming Drupal, you are setting yourself up for a big surprise. Check level ten's post about this.
On the other hand, if you are one man shop and/or you are working for a customer whit a really short budget, this themes can be a savior. Specially if you are artistically challenged like some of us. One thing is for sure, finding $45-$55 dollars Drupal themes is not so easy, there are not that many; sometimes is better to find a responsive site template and do the conversion. Here is my little grain of sand on what to keep in mind when doing so. Don't expect a detailed guide, your process will depend of your knowledge and your skills, work on your strengths when you try to accomplish this.
First, make sure you are using a responsive site template, this will make your life so much easier from the get go. On selecting your responsive template, you will be better off if this is based on either Twitter Bootstrap or Zurb Foundation.
Once you have selected your template, identify the theme that you are going to use in Drupal. Depending on your template you have some options:
  • If your template uses Bootstrap, clearly Drupal Bootstrap is your choice.
  • If Zurb Foundation, you have to options: Drupal Zurb Foundation and Zoundation. I prefer the latter, I like that Foundation 4 is pretty much ready on this one and I feel it is a little more minimalistic, letting you change the things you need in an easier way.
  • Any other case, you can use Aurora, Zen with Zen grids or Omega. I have used Omega 3 and the UI to declare zones and regions is awesome, but the responsiveness is not as good. On the others two you will have the power of SASS, which I really like. My next theme to try out will be Aurora, seems to be really interesting. Don't forget to check Omega 4, though.
Now it is time for the conversion, start by identifying the main zones in your template. Use devtools for  this, Firebug or Chrome will do a good job, I like firebug better. Templates and themes come with 3 basic regions, normally, a Header, Content and Footer Area. Identify the main divs in your template, know the framework they are using and use your knowledge and criteria. Make sure you check the home page and all the inner pages to make sure you identify zones and regions correctly.
You don't need to create a perfect copy of the template, you are using it just to take advantage of the artwork, the colors, the overall design. With that said, change the TPLs files as needed and your info files. Avoid coding too much of the template detailed layout into the TPLs, plan on taking advantage of Drupal Modules that will make your life easier.
Once you are satisfied with the layout, it is time to transfer your CSSs. The advantage of using a bootstrap or a Zurb foundation template is that you can create your new grids using the same classes from the template. Take advantage of LESS(Bootstrap) and SASS on the others, that will make your live so much easier.
Again, by using tools like Firebug you can easily copy the styles from your template to your theme, I prefer going systematically, start with the general classes and IDs and then going region by region. Try to keep the classes and IDs the same on your theme so this work can be faster. There are on-line and off-line conversion tools to convert CSS to SASS or LESS, depending on what you need. I strongly suggest you use a pre-processor for your theme.
To help you doing all of this there are some modules that will be your friends and will help you recreating your template in Drupal.
  • Context Module: Cause the Home Page and the inner pages are not always the same, this module will help you hide regions when needed.
  • Blockify : This one can create blocks from the typical logo, slogan, site name, etc. Reducing your need to code these into your TPLs.
  • Panels and Display Suite: Depending on the Base Theme you chose, these will help you recreate the Grid from the UI and from each node and Views.
  • Fences: This is one of my favorites, get rid of all the classes that clutter Drupal and just concentrate on those you need, really important to recreate your template.
  • Block Class: Of course, Since most likely every part of your new website will be a block in most cases, you need to give them the necessary class to match your template.
  • Views Responsive Grids: Name says it all.
  • Nivo Slider, Flexslider, Views Slideshow: Pick your poison, most templates use a slider, but is coded into the HTML, these modules allows you to replace that slider, just make sure you theme it well.
Well, a little long I know, that is what we do around here in general terms. Hope is of help for anyone that wants to take this way.
Remember nothing beats investing a couple of hundred dollars for a custom design.