• 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

    • These are the Apple Watch models that support watchOS 26 by Aditya Tiwari Apple has announced the latest operating system upgrade for its smartwatch lineup, called watchOS 26, not watchOS 12, as many expected a while ago. The Cupertino giant has unified the software experience across its platforms by introducing the "Liquid Glass" software design and renaming all the operating systems to version 26. That said, the next question is which Apple Watch models will support watchOS 26. Apple has shared the official list of devices: Apple Watch Ultra 2 Apple Watch Ultra Apple Watch Series 10 Apple Watch Series 9 Apple Watch Series 8 Apple Watch Series 7 Apple Watch Series 6 Apple Watch SE (2nd Generation) The upcoming Apple Watch update brings several new features to your wrist. Liquid Glass design gives a fresh look to the UI with updated Control Center and translucent buttons within apps. It's new Workout Buddy feature can use an Apple Intelligence-enabled iPhone nearby to provide personalized, spoken motivation during workouts. Building on the Double Tap feature, you can now flick your wrist to perform actions like muting incoming calls, silencing timers, and dismissing notifications when your hands are full. It is available on Apple Watch Ultra 2 and Apple Watch Series 9 (or later). watchOS 26 is currently available for testing through the Apple Developer Program. It will roll out to general users during the fall season, when Apple is expected to refresh the Ultra and SE models. Note that your Apple Watch must be paired with an iPhone 11 (or later) or iPhone SE (2nd generation or later) running iOS 26. While the list of Apple Watch models that support watchOS 26 remains the same, it won't work with iPhone Xs/Xs Max and iPhone Xr, which were previously supported on watchOS 11. You can check out the respective lists of supported devices for iOS 26, iPadOS 26, and macOS 26 Tahoe.
    • Galaxy Z Fold7 to be the thinnest and lightest foldable from Samsung by Sagar Naresh Bhavsar A few days ago, Samsung shared an official teaser of their upcoming premium foldable, the Galaxy Z Fold7. Interestingly, the company titled the official post, "Meet the Next Chapter of Ultra," giving birth to a new rumor about a new "Ultra" foldable. The teaser highlighted Galaxy Z Fold7's tall and wide design, which previous rumors have suggested. The Galaxy Z Fold7 is also expected to come with a bigger display compared to the Galaxy Z Fold6. There were also rumors that Samsung could use a titanium backplate for improved durability and also make the device slim. Now, Samsung has shared a new teaser of the Galaxy Z Fold7 that adds a bit a weight to this rumor. Samsung has called the Galaxy Z Fold7 the "thinnest, lightest, and most advanced foldable yet." While the company didn't share any measurements or metrics that would define how thin or light the upcoming foldable is, the GIF shows the Galaxy Z Fold7 from the side (and it appears quite thin). Take a look for yourself: It would be safe to say that Samsung has been lacking in terms of making its foldable devices slim, even reducing the display crease. Though the company launched the Galaxy Z Fold6 Special Edition in China and Korea last year, which was their slimmest phone, it was nowhere near the likes of the OPPO Find N5. In terms of innovation as well, the company is far behind, and Chinese makers such as Huawei have already released the world's first triple-folding phone, the Mate XT. On the positive side, Samsung claimed that their "engineers and designers are refining each generation of the Galaxy Z series to be thinner, lighter, and more durable than the last," suggesting that the company could bring improvements with this year's foldable. The Galaxy Z Fold7 is expected to launch next month, in New York, in the second Unpacked event of the year, alongside the Galaxy Z Flip7. There are also rumors that the affordable version of the flip phone, the Galaxy Z Flip7 FE, could also launch at the event.
    • I think Sequoia will be the last stop for my old 2012 Mac mini (with 16GB RAM & 512MB SSD). It runs Sonoma OK, so perhaps Sequoia will work well too. I don't have high hopes for Tahoe, however - that looks to be a GPU-intense OS.
  • Recent Achievements

    • Explorer
      MusicLover2112 went up a rank
      Explorer
    • Dedicated
      MadMung0 earned a badge
      Dedicated
    • Rookie
      CHUNWEI went up a rank
      Rookie
    • Enthusiast
      the420kid went up a rank
      Enthusiast
    • Conversation Starter
      NeoToad777 earned a badge
      Conversation Starter
  • Popular Contributors

    1. 1
      +primortal
      505
    2. 2
      ATLien_0
      268
    3. 3
      +FloatingFatMan
      257
    4. 4
      Edouard
      202
    5. 5
      snowy owl
      177
  • Tell a friend

    Love Neowin? Tell a friend!