By Eyerev on

Good evening folks!

I've come a long way in the past week, Drupal 6 is installed, everything is running perfectly and I'm very familiar with what it has to offer and how it works. One area of interest I'm about to jump into is theming. I have a Photoshop mock up i created and would like to use, how would i go about implementing it into a theme? I'm very familiar with CSS and HTML, however I've never worked with a Drupal theme.

Any help is greatly appreciated.

⋅ Categories: Drupal 6.x

Comments

DirtyBirdNJ’s picture

DirtyBirdNJ commented

Hello, the first thing you need to do is cut up your Photoshop template into an HTML or XHTML document.

http://nettuts.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/

Next, I would suggest downloading a simple theme (I used one called "clean") and place the directory containing the theme .zip that you download in your /drupal/sites/all/themes/ directory.

Open up page.tpl.php - this is the main file that controls the layout of your new theme.

1. From this file, you can pick out all the important things and put them in the new template you created.
2. Open up the .info file, this is how you tell drupal all the key information about *YOUR* template.

Now, make a new directory with the name of your new theme like this: /drupal/sites/all/themes/yournewtemplate

There are 2 files that are absolutely required:

1. page.tpl.php
2. yournewtemplate.info

I'm no drupal pro, but this is what I know about the theme process. I feel explaining things helps you understand them better, so just writing this out was personally constructive for me :) Please if there are any inaccuracies in my post point them out!

Eyerev’s picture

Eyerev commented

Thank you for your reply, it's much appreciated. I sliced up my layout, however i got reading elsewhere about creating the appropriate CSS divs tags, so I've actually sliced it up, created the HTML document and created the divs through style.css. I've opened up page.tpl.php (from the Garland theme) and checked out the PHP code, will this need to be implemented into my HTML document? If so, which code?

WorldFallz’s picture

WorldFallz commented

Also see:

===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz

j0rd’s picture

j0rd commented

I would strongly suggest you look at the Zen Theme project. I use Zen theme (starterkit) as the base for all my new themes. Since switching it has saved me countless hours of development and debugging. It also assists as additional CSS classes and IDs are added to things like menu items, blocks and pages.

The Drupal theming layer is large and complex, but once you get the handle of it, it's a thrill to work work.
--
Freelance Drupal Developers