• 0

Website theme/skinning tutorial


Question

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Is there anyone who did not see Microsoft extending updates for Windows 10? There are still ALOT of people who wont switch and it will become a security nightmare when they don't get security updates.
    • You need an MSA for the other two options as well (pay 1000 rewards points or $30). To me this reeks of desperation and defeat that they're not seeing W11 being adopted as quickly as they would like.
    • Where was this article in the Windows 8 era? Microsoft was thinking almost the same back then. Just look at the response they received with such thought process...
    • Hahaha! I've been arguing with my dad for 10 years (he's pro-Tesla, I'm impartial as I don't trust a lot of the people and their tech in these robotaxis) about this whole charade. His continued argument is the cost factor (economies of scale principle) and the associated technology (different dependencies of which reduced production cost is a potential outcome thus feeding into the reduced cost argument). And my rebuttal is the broad-market trust factor -- it's often not the most innovative or first-mover that wins (Uber and Tesla have been arguing/investing in autonomous vehicles forever) but rather the option that builds the most trust amongst the commonwealth. VW and Toyota are not the first or best or cheapest cars on the road, but they've built a long of continued trust to the scales of being the largest automakers by volume worldwide. Supercar makers have the highest profit margins, Tesla has the highest stock price, but VW and Toyota have the sales volumes. As it stands, the writing is on the wall... No matter what advantages Tesla had in their ambitions, they have an even-longer road to repair public trust than any other robotaxi provider (foreign or domestic). If the trend continues, everyone will realise that their market valuation is based on their non-automotive efforts (including not robotaxis or consumer humanoids).
    • Or just use Linux and live free. For the anti-Linux brigadiers reading this, this is the part where you go: Nooo! I love being digitally abused by Microsoft 😡😡 /s
  • Recent Achievements

    • Week One Done
      DrRonSr earned a badge
      Week One Done
    • Week One Done
      Sharon dixon earned a badge
      Week One Done
    • Dedicated
      Parallax Abstraction earned a badge
      Dedicated
    • First Post
      956400 earned a badge
      First Post
    • Week One Done
      davidfegan earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      601
    2. 2
      ATLien_0
      225
    3. 3
      Michael Scrip
      168
    4. 4
      +FloatingFatMan
      153
    5. 5
      Xenon
      137
  • Tell a friend

    Love Neowin? Tell a friend!