• 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

    • The Start menu is a defining UI element that made Windows, well, Windows. naturally people will be worked up to any changes it receives.
    • I believe voice assistants have reached a dead end in terms of usability. You can only do so much with voice. Even Google is sidelining Google Assistant for Gemini. Once you can no longer shoehorn "AI" everywhere, the industry will move on to the next fancy trend try to push voice assistants to use that tech.
    • Gemini in Google Sheets can now generate fully editable charts by David Uzondu Back in January, Google introduced a feature in Google Sheets powered by Gemini that lets you ask the AI to create charts from your data. The problem was, these charts were just static pictures, slapped on top of your cells. You could not edit them, and they would not update if your data changed. Now, the company has upgraded the feature so you can edit the charts however you want, plus they stay synced with your data as it changes. The process is quite straightforward. You use the Gemini side panel and just type what you want, like "create a bar chart showing campaign performance by market." Gemini then builds the chart, and when you insert it, the chart appears in a completely new tab within your spreadsheet. From that new home, you have total control. You can change the title, tweak the colors, and adjust all the little details just like any normal chart you would build yourself. It is not a completely perfect system, however. The biggest catch is that the editable chart is linked to the data in that new tab, not your original data source. So if you want the chart to reflect new numbers, you have to update the data in the chart’s dedicated tab. This is a bit of a weird detour from how standard Sheets charts have always worked, where they update directly from the source cells. For certain, more complex chart types, Google also notes that Gemini might still fall back to spitting out a static image, so your mileage may vary. The full rollout began recently, with Google expecting it to reach everyone within one to three days. This update is available for a bunch of Google Workspace accounts, including Business Standard, Business Plus, Enterprise Standard, and Enterprise Plus. It is also included for anyone with a Google One AI Premium plan, which the company has since renamed to Google AI Pro and Ultra. If you are on one of the old Gemini Business or Enterprise add-ons that Google stopped selling back on January 15, 2025, you get this feature too. Just make sure your admin has the "Smart features and personalization" setting turned on, or none of this will work.
    • iOS feature updates are lacklustre. I know it’s difficult with a mature OS, but imagine the announcements without Liquid Glass. Pretty thin.
  • Recent Achievements

    • Week One Done
      IAMFLUXX earned a badge
      Week One Done
    • One Month Later
      Æhund earned a badge
      One Month Later
    • One Month Later
      CoolRaoul earned a badge
      One Month Later
    • First Post
      Kurotama earned a badge
      First Post
    • Collaborator
      Carltonbar earned a badge
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      506
    2. 2
      ATLien_0
      268
    3. 3
      +FloatingFatMan
      237
    4. 4
      +Edouard
      201
    5. 5
      snowy owl
      162
  • Tell a friend

    Love Neowin? Tell a friend!