subject: How To Carry out Making a custom Drupal theme: Drupal Theming [print this page] How To Carry out Making a custom Drupal theme: Drupal Theming
After working with Drupal for over a year today I have learned plenty of different ways to carry out making a custom Drupal theme. I have tried taking existing Drupal themes such as Garland and Blue Marine and hacking them to pieces while inserting my personal DIVs and classes trying to get things to work and look right. That just creates a huge mess of code and often contains unneeded elements (code bloat = not a good thing).
I have found that the most practical method for me to create custom Drupal theming is actually to first code up the site using static HTML/CSS, as in create an index.html file and go to town. I always code my personal sites using Notepad2 and then view/test them in FireFox. I should say also use the WebDev Toolbar so I can see how everything looks on-the-fly as I code my own CSS. This certainly helps as I can code a LOT faster and see my CSS changes immediately.
Once I get everything looking decent (doesn't have to be perfect yet) in FireFox I then open the index.html file in IE7 and begin making IE7 specific changes to my CSS so everything looks decent there as well. I then load the index.html file in IE6 and do the same. Once things look the same across FireFox and IE7/IE6 I load it in Safari to see how it looks there. For this site I kinda ignored some issues with IE6 as it's a pain to work with and I'll get around to fixing them eventually.
So once the site looks a similar in FireFox, IE6/IE7 and Safari it's time to add Drupal code to our static HTML file. This is easier than it used to seem to me so if you follow these code snippets you should be all set...
Doctype to
Once these snippets of code have been added place of your existing HTML code in the index.html file, save the newly edited file as "page.tpl.php". Here is the Drupal theme page every page on your site will have a similar layout as this one.
Different Home Page Layout
Say you want to have a custom site that looks different than the many other pages. To create a custom Drupal Theming homepage you need to copy the code from your "page.tpl.php" file and prepare a fresh file named "page-front.tpl.php" and paste that code in the administration area.
Now you can edit the code to the "page-front.tpl.php" file making it look however you are looking. Drupal will routinely recognize and load the "page-front.tpl.php" file whether it is specific to your theme directory.
What that may is inform Drupal that when the person is on the webpage to go ahead and load the file named "page-front.tpl.php" rather than the "page.tpl.php" file. Now you can go back to the "page-front.tpl.php" file and edit it as the simple truth is fit. Within the future . you the method to have a different layout for that webpage and sub pages.
Now that you've got a "page-front.tpl.php" and page.tpl.php" file it's time to copy above the images and CSS through the static HTML site towards newly made Drupal themeing list. So essentially your directory structure should today look similar to:
Drupal Theme Dir:
page-front.tpl.php
page.tpl.php
images/
css/
Today you need to copy the other files where Drupal theming tactic relies on to your theme directory. Make sure you copy these files over from the Blue Marine theme (that's just the thing theme I get them from).
Blue Marine Theme:
block.tpl.php
comment.tpl.php
node.tpl.php
template.tpl.php
screenshot.png
So now you ought to have a fully working Drupal theming program. It is possible to copy the files over to the server and place them in the "/themes/newtheme" and then log in to your Drupal site through your browser and select your newly created theme. As we discussed immediately there is certainly a substantial amount of editing must be implemented to get a theme to work flawlessly in Drupal theming.. And here , the net Dev Toolbar is useful again.
So now you have to edit/tweak your "*.tpl.php" files along with your CSS. This is a quick and dirty way to get a custom theme all set but preferably you get the idea.
Others have an ideas about what I am able to improve on here or what I didn't really cover high of? I've made around 10 custom Drupal themesing so I'm certain I overlooked something here. Leave a thoughts or question and I'll do my far better help you out.
