Tell me more ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 6 down vote favorite
3

I googled, but failed to find automated solutions. So, I've started it manually. Mapping CSS files are easy, but I'm looking for a way to map blocks/templates. Please, help.

share|improve this question

2 Answers

up vote 13 down vote accepted

There is no direct way to do it nor any programmatic way. This is because the template structures differ so much. But here are the steps you should take for the fastest conversions...

  1. Load theme in Wordpress then view site in a browser. (the purpose of this is to extract the basic HTML structure of the template).
  2. View source on the page, copy all the HTML and drop into a text editor. Save into a new project folder.
  3. Copy over CSS and JS files to this new project folder. I recommend using a "css" folder and a "js" folder for organization.
  4. Copy over all images to this project folder. I recommend using "images" folder.
  5. Now you have the base template you need to turn it into a theme for Drupal. Time to get busy!
  6. I recommend copying the "garland" theme to a new project folder and renaming it to your new theme name. This will speed things up.
  7. Copy over the css, js, and images folders to the new theme project.
  8. Edit the .info file to load css and js files.
  9. Modify the css and js files to load any images and other file paths to be relative to them.
  10. Using a side-by-side comparison between the page.tpl.php and your template html file you will need to transform the structure of the tpl file to be close to that of the html file. Be careful not to remove dynamic references.
  11. Test, troubleshoot as needed.

Its a lot of steps, but it works. You can also use a theme framework that provides a skeleton theme to build upon. The only problem with this is that sometimes these frameworks are very heavy handed and do far more than is needed. Zen is a common one, but it is very heavy handed. You can find more on the Drupal website at drupal.org (search for themes). Below are some links to a few base themes.

  • Zen Framework
  • NineSixty (960 Grid System, very flexible concept, I have never used it though)
  • Fluid Grid (another great concept, I have seen this in action and its pretty nice)

Finally, here is a link to Drupal's theming guide.

Sorry I don't have any magic bullets to offer you on this. I wish there were some.

-Patrick

share|improve this answer
I want to add that since writing this last year I have use a 960gs base theme and it is just beautiful how well it works. I even used it to turn a basic template I bought online into a Drupal theme VERY quickly. I'm in love with the system and highly recommend it. I'm generally not a front-end guy, but can still do the work if needed. – pthurmond Aug 1 '12 at 14:35
I would like to add, you mention copying the garland theme and using this as the starting point. I would suggest using one of the starter themes you mention such as Zen (I'd recommend someone use Zen if this is their first time doing this). It's designed for just this purpose and will lead to a lot less hacking and a more flexible theme at the end. – cjm2671 Dec 25 '12 at 22:10
Zen has a lot of overhead involved and can actually cause more confusion when compared to some of the lighter weight themes. Plus a lot of the extras it had in D6 are available in some form in core in D7. – pthurmond Dec 27 '12 at 19:47
up vote 3 down vote

I agree with pthurmond's answer. But I would suggest not to copy the whole html and css but to do it step by step. Copy the html first for, say, the menu. Then copy the css for it. Use firebug for the process. This way you will end up with only the really required things. Also I recommend a grid system line 960.gs as it is very flexible and you won't have any layout problems.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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