• 0

Website theme/skinning tutorial

Asked by Linkin_cs,

 Share

Question

Apprentice

Linkin_cs

Posted
Posted (edited)

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

image001dr6.gif

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

? Index.php file content:

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

echo "Welcome";

makefooter();

?>

Pretty simple isn?t it?

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

image002pg3.th.png

Start new photoshop file, as shown.

image004uc1.th.png

Select the rounded rectangle tool

image006tj0.th.png

Select a style

image008ws0.th.png

Draw the header

image010vf5.th.png

Draw the footer

image012jn8.th.png

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

image014ro7.th.png

Select the slice tool

image016sf0.th.png

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

image018vv3.th.png

Slice the right corner

image020bc3.th.png

Do the same for the footer part.

image022fl7.th.png

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

image024iv9.th.png

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:

<?php


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

print <<<end
	<!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>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Example.com / $title</title>

	<link rel="stylesheet" type="text/css" href="themes/$theme_name/style.css" />

	</head>

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





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

end;
}




?>

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

Our index.php file will look like:

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

print <<<end
<br /><br /><br />
<div align="center">Welcome to my website</div>
<br /><br /><br />
end;

makefooter();

?>

Your website will look like this:

image032yd5.th.png

Now lets see how easy it is to create more themes:

Back to photoshop:

image026gu2.th.png

Highlight the header and footer layers, and simply choose a style from your list.

image028qc2.th.png

Another great looking style

image030la2.th.png

And more, easy to make as few clicks.

After selecting a style, simply do the process again, make a new folder and add the images in the correct path..etc

Tutorial php and photoshop files

Things you can do:

  • allow the user to choose and save their favourite theme
  • add your own CSS Files along with themes

Web 2.0 styles, free,huge and great collection.

http://www.dezinerfolio.com/2007/05/06/ult...0-layer-styles/

Edited by Linkin_cs
Link to comment
https://www.neowin.net/forum/topic/605621-website-themeskinning-tutorial/
Share on other sites

2 answers to this question

Recommended Posts

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.