I have found that the best 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 own sites using Notepad2 and then view/test them in FireFox. Furthermore use the WebDev Toolbar so I can see how everything looks on-the-fly as I code my CSS. This seriously helps as I can code a LOT faster and see my CSS changes instantly.
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 the actual way 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
put in place of your existing HTML code in the index.html file, save the newly edited file as “page.tpl.php”. Now is your Drupal theme page and every page on your site will have exactly the same layout as this one.Different Home Page Layout
Say
you need to have a custom web page that looks unique of the many other pages. To create a custom Drupal Theming webpage you need to copy the code in the “page.tpl.php” file and create a new file named “page-front.tpl.php” and paste that code in the administration area. Now you can edit the code for that “page-front.tpl.php” file to restore look however you want. Drupal will on auto-pilot detect and load the “page-front.tpl.php” file whether it’s specific to your theme directory.What that
can is inform Drupal when the consumer is on the home page to go ahead and load the file named “page-front.tpl.php” rather than the “page.tpl.php” file. Today you can go back to the “page-front.tpl.php” file and edit it as you observe fit. This offers you the option to have a different layout for the internet site and sub pages. Today that you’ve a “page-front.tpl.php” and page.tpl.php” file it is time to copy on the images and CSS through the static HTML site to the newly made Drupal themeing list. So just about your directory structure should now look something such as:Drupal Theme Dir:
page-front.tpl.php
page.tpl.php
images/
css/
Blue Marine Theme:
block.tpl.php
comment.tpl.php
node.tpl.php
template.tpl.php
screenshot.png
So
now you should have a fully working Drupal theming method. 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 may be quite a bit of editing needed to be carried out get the theme to figure completely in Drupal theming.. This is when the net Dev Toolbar comes in handy again.So
now it’s time to edit/tweak your “*.tpl.php” files plus your CSS. This is a quick and dirty way to get a custom theme installed and operating but preferably you get the drift.Someone else have an ideas about what I can improve on here or a few things i did not really cover via a tunnel? I have produced about 10 custom Drupal themesing so I think I overlooked a thing here. Leave a brief review or question and I’ll do my personal better to help you out.