Website theme/skinning tutorial

December 8, 2007

I've written a tutorial for neowinians on how to create a theme-supported website in PHP:

? This guide will teach you how to quickly develop a theme supported website.

? This guide will teach you how to quickly create hundreds of themes within minutes.

? Itnot t teach you how to make a complex template based website such as drupal.

You need:

? PHP with Apache

? Adobe Photoshop

? Text editor, I prefer InType (freeware,for now anyway)

The idea is that there will a file called ?gui.php? which will contain two functions:

Makeheader($title) //This function will create the top part of the web page, and adding a title

Makefooter () //This will create the bottom part of the web page

Then include the gui.php in any php file you would like to ?theme? e.g.

? Index.php file content:

&lt;?
include( 'gui.php' );
makeheader("Home");

echo "Welcome";

makefooter();

?&gt;

Pretty simple isn?t it?

Now let?s create the basic elements of the header and footer.

Start new photoshop file, as shown.

Select the rounded rectangle tool

Select a style

Draw the header

Draw the footer

You now have a header and footer, try aligning them and make sure they have the same width for consistency.

Select the slice tool

Slice the left corner and a small part of the center (the center part will repeat itself in the browser)

Slice the right corner

Do the same for the footer part.

We will now export the 6 images into a folder called images, inside the theme folder (fresh_orange)

Rename the images for simplicity

Now back to gui.php, the file simply contains two functions, one to make a header and another to make the footer:

&lt;?php


function makeheader ($title)
{
$theme_name = "fresh_orange";  //name of default theme

print &lt;&lt;&lt;end
	&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">t;html xmlns="http://www.w3.org/1999/xhtml">lt;head&gt;

	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

	&lt;title&gt;Example.com / $title&lt;/title&gt;

	&lt;link rel="stylesheet" type="text/css" href="themes/$theme_name/style.css" /&gt;

	&lt;/head&gt;

	&lt;body&gt;
&lt;div align="center"&gt;
&lt;table cellpadding="0" cellspacing="0" style="width: 850px; height: 90px"&gt;
	&lt;tr&gt;
		&lt;td valign="top" style="width: 19px; background-image: url('themes/$theme_name/images/1.gif')"&gt;
		 &lt;/td&gt;
		&lt;td valign="middle" style="width: 814px; background-image: url('themes/$theme_name/images/2.gif')"&gt;
		My Logo&lt;/td&gt;
		&lt;td valign="top" style="height: 90px; width: 17px; background-image: url('themes/$theme_name/images/3.gif')"&gt;
		 &lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
end;
}





function makefooter ()
{
$theme_name = "fresh_orange";  //name of default theme
	print &lt;&lt;&lt;end
&lt;div align="center"&gt;
&lt;table cellpadding="0" cellspacing="0" style="width: 850px; height: 32px"&gt;
	&lt;tr&gt;
		&lt;td valign="top" style="width: 13px; background-image: url('themes/$theme_name/images/4.gif')"&gt;
		 &lt;/td&gt;
		&lt;td valign="middle" style="width: 814px; background-image: url('themes/$theme_name/images/5.gif')"&gt;
		My Copyright Message&lt;/td&gt;
		&lt;td valign="top" style="height: 32px; width: 12px; background-image: url('themes/$theme_name/images/6.gif')"&gt;
		 &lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
	&lt;br /&gt;
	&lt;/body&gt;
	&lt;/html&gt;

end;
}




?&gt;

Now to make any file themed, simply include gui.php and call the two functions e.g.:

Our index.php file will look like:

&lt;?
include( 'gui.php' );
makeheader("Home");

print &lt;&lt;&lt;end
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
&lt;div align="center"&gt;Welcome to my website&lt;/div&gt;
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
end;

makefooter();

?&gt;

Your website will look like this: