Critizin
04-25-2007, 12:06 AM
Step By Step Tutorial For Making Subdreamer Skins
Step 1 [Creating your design]
The first thing you need to do is create your design for ur subdreamer skin you can create it in photoshop or any other graphics program you use like Fireworks or GIMP photoshop is probally the easyest to use though. the design i am going to use is a remake of the effect skin this is what it looks like.
http://www.deathlordsguild.com/effectpre.JPG
It is also a good idea to have 2 or more designs so u can have different page styles for every page of your website so if you want create another design you dont have to if u dont want to. Here is what mine looks like.
http://www.deathlordsguild.com/effect2.JPG
Now before you begin creating your designs with html, you first need to understand the directory structure of your work space.
Your skin will be installed under the Subdreamer folder 'Skins',
even though your skins will be installed under the skins directory, the design files will be called from Subdreamer's main directory. You must keep this in mind while creating images for your design files. So for example lets say we wanted to add the image 'header.gif' in the design1.php file, we would do it like this: <img src="skins/deep_space/images/header.gif" />
Once you have all ur designs done its time to slice im not going to explain this part because well this isnt a slicing and coding a template tutorial its a making a subdreamer skin tutorial. But slice it all up like you would to make a regular html website and then code it in dreamweaver like you would a normal html website.. make sure that when ur coding it u make sure that the boxes that are gonna have plugins that increase in size when content is added that they can stretch or it will disort you page and we dont want that do we.... once u got all ur slicing and coding done its time to implement the subdreamer varables..
The very top of your design file must contain:
<?php
if(!defined('IN_SUBDREAMER'))
{
die('Hacking attempt!');
}
?>
Step 2 [Inserting the Subdreamer Varables]
ok now we need to insert subdreamer varables into are website template. its pretty much just stuff that needs to go on every subdreamer skin you make. This first one is this and it must go into your <head> part of your template.
<head>
<title><?php echo $mainsettings['websitetitle']; ?></title>
<meta name="description" content="<?php echo $mainsettings['metadescription']; ?>" />
<meta name="keywords" content="<?php echo $mainsettings['metakeywords']; ?>" />
<?php echo $mainsettings['skinheader']; ?>
</head>
This needs to go in your head and it needs to be there with out this the skin will not work. Now this is something u can leave out if you want but its good to have in there it is the logo that u can put in with your WYSIWYG Editor in the subdreamer control panel the code is.
<div class="logo"><?php echo $logo; ?></div>
You can insert this where ever you want your logo to go but it is recommended to put it near the top of your page. Now for the copyright this is where your copyright shows up and the "Powered by Subdreamer" shows up if you havent bought branding rights then this has to be there its usually best to put it near the bottom of the page here is the code.
<div class="copyright"><?php echo $copyright; ?></div>
We are done with varables now and it is time to move on to inserting plugins.
Step 3 [Inserting Plugins]
ok now we need to insert plugins to your website template with out this its not a subdreamer skin its just a website template. this is where u want a certain plugin to show up.. to make this easyer you should create preview images to know what plugins you want where this is what mine looks like for design 1 and design 2.
http://www.deathlordsguild.com/design1.jpg
http://www.deathlordsguild.com/design2.jpg
The numbers on the design preview images show where u want ur plugins to go. you will need these later on so dont delete them. anyway back to inserting varables open up your coded website template for design 1 and put this php code where ever u want a plugin to go.
<?php
$inputsize = 15;
include($pluginpath[X]);
?>
The first things you will notice about this code is inputsize = 15 and plugin path[X]. The input size is how much space ur gonna allow for the plugins width the smaller the width of where ur putting it the smaller the number. The plugin path is what plugin you want to go where so if u have in ur preview image in one box to have plugin 2-3 there u need to do insert this code.
<?php
$inputsize = 15;
include($pluginpath[2]);
?>
</br>
<?php
$inputsize = 15;
include($pluginpath[3]);
?>
put all this in the space where ur box is in ur html template. There is one more thing u can do if u want to display the plugins name u need to add this code to the following code!
echo $pluginname[X];
So it would like this.
<?php
echo $pluginname[2];
$inputsize = 15;
include($pluginpath[2]);
?>
Step 4 [Inserting Catagory Menu] - This part is copyed off the manual because i feel it is explained really well i will change some stuff in it though
It's now time to add the category menu to your designs a category menu is where your links appear to go to different pages. The category menu will display all the categories of the website. In order to successfully do this you must create a new file for your categories. Lets name the file categories.php
Categories.php :
<?php
for($i = 0; $i < $categoryrows; $i++)
{
echo '<a href="'.$categorylink[$i].'">'.$categoryname[$i].'</a> <br />';
}
?>
The code is a 'for loop', which will loop until all the categories have been displayed.
The word echo simply means print.
As you can see a <br /> has been added to the end of the link. This means each category will be printed on a new line. Now lets say we wanted to create an html table and have each category in a column. Something like this would work perfectly:
<table>
<tr>
<?php
for($i = 0; $i < $categoryrows; $i++)
{
echo '<td><a href="'.$categorylink[$i].'">'.$categoryname[$i].'</a></td>';
}
?>
</tr>
</table>
Now you need to open up your design files and include the path to the categories file like this:
<?php
include('skins/skinname/categories.php');
?>
The above is to make your links show up vertically like in a column if u want them horizontally dont add the </br>
Step 5 [Creating the install file]
Congradulations you have made it to the last step! This step is fairly easy i want you to make a new file and name it install.php all u need to do is put this code in there.
<?php
if(!defined('IN_SUBDREAMER'))
die("Hacking attempt!");
$skinname = 'Skin Name Here';
$numdesigns = 1;
$previewimage = 'skinname/images/image.jpg';
$authorname = 'Authors Name Here';
$authorlink = 1;
$designpath[] = 'skinname/design1.php';
$maxplugins[] = 1;
$imagepath[] = 'skinname/images/preview.jpg';
?>
You will need to change some stuff in there like the skin name, Number of designs, Preview image, Author name, Author link, Design path, Max plugins, Image path. here is a legend of what each one means.
$skinname: The name of your skin
$numdesigns: The number of designs your skin has
$previewimage: The path from the skins directory to your skins' preview image. It needs to be 225 x 225 and should be less than 10k. (example)
$authorname: Your name
$authorlink: Your user id on the Subdreamer website. To find your user id you need to visit this link: http://www.subdreamer.com/forum/memberlist.php and click on your username. Then check the last numbers of the url. For example: http://www.subdreamer.com/forum/member.php?action=getinfo&userid=1
$designpath[]: The path from the skins directory to your design file.
$maxplugins[]: The amount of plugins that the design file can hold.
$imagepath[]: The path from the skins directory to your design's image. The image needs to be 225 x 225 and should be under 10k. The image must also display where the plugins will go.
put all of your files in a folder with ur skins name you need your design.php in there your install.php in there and ur images folder in there and anything else that might need to be in there like cssstyle sheets etc put in there.. upload them to your ftp in the Skins Directory and then go to your subdreamer control panel and install the skin and enjoy.
Tutorial Created By: Peter [Aka: Critizin] - If there is anything wrong with this tutorial or anything you like me to add please tell me.. Im new to this im only writting down what i know and would greatly apperciate it if you guys helped me add on to this.
Step 1 [Creating your design]
The first thing you need to do is create your design for ur subdreamer skin you can create it in photoshop or any other graphics program you use like Fireworks or GIMP photoshop is probally the easyest to use though. the design i am going to use is a remake of the effect skin this is what it looks like.
http://www.deathlordsguild.com/effectpre.JPG
It is also a good idea to have 2 or more designs so u can have different page styles for every page of your website so if you want create another design you dont have to if u dont want to. Here is what mine looks like.
http://www.deathlordsguild.com/effect2.JPG
Now before you begin creating your designs with html, you first need to understand the directory structure of your work space.
Your skin will be installed under the Subdreamer folder 'Skins',
even though your skins will be installed under the skins directory, the design files will be called from Subdreamer's main directory. You must keep this in mind while creating images for your design files. So for example lets say we wanted to add the image 'header.gif' in the design1.php file, we would do it like this: <img src="skins/deep_space/images/header.gif" />
Once you have all ur designs done its time to slice im not going to explain this part because well this isnt a slicing and coding a template tutorial its a making a subdreamer skin tutorial. But slice it all up like you would to make a regular html website and then code it in dreamweaver like you would a normal html website.. make sure that when ur coding it u make sure that the boxes that are gonna have plugins that increase in size when content is added that they can stretch or it will disort you page and we dont want that do we.... once u got all ur slicing and coding done its time to implement the subdreamer varables..
The very top of your design file must contain:
<?php
if(!defined('IN_SUBDREAMER'))
{
die('Hacking attempt!');
}
?>
Step 2 [Inserting the Subdreamer Varables]
ok now we need to insert subdreamer varables into are website template. its pretty much just stuff that needs to go on every subdreamer skin you make. This first one is this and it must go into your <head> part of your template.
<head>
<title><?php echo $mainsettings['websitetitle']; ?></title>
<meta name="description" content="<?php echo $mainsettings['metadescription']; ?>" />
<meta name="keywords" content="<?php echo $mainsettings['metakeywords']; ?>" />
<?php echo $mainsettings['skinheader']; ?>
</head>
This needs to go in your head and it needs to be there with out this the skin will not work. Now this is something u can leave out if you want but its good to have in there it is the logo that u can put in with your WYSIWYG Editor in the subdreamer control panel the code is.
<div class="logo"><?php echo $logo; ?></div>
You can insert this where ever you want your logo to go but it is recommended to put it near the top of your page. Now for the copyright this is where your copyright shows up and the "Powered by Subdreamer" shows up if you havent bought branding rights then this has to be there its usually best to put it near the bottom of the page here is the code.
<div class="copyright"><?php echo $copyright; ?></div>
We are done with varables now and it is time to move on to inserting plugins.
Step 3 [Inserting Plugins]
ok now we need to insert plugins to your website template with out this its not a subdreamer skin its just a website template. this is where u want a certain plugin to show up.. to make this easyer you should create preview images to know what plugins you want where this is what mine looks like for design 1 and design 2.
http://www.deathlordsguild.com/design1.jpg
http://www.deathlordsguild.com/design2.jpg
The numbers on the design preview images show where u want ur plugins to go. you will need these later on so dont delete them. anyway back to inserting varables open up your coded website template for design 1 and put this php code where ever u want a plugin to go.
<?php
$inputsize = 15;
include($pluginpath[X]);
?>
The first things you will notice about this code is inputsize = 15 and plugin path[X]. The input size is how much space ur gonna allow for the plugins width the smaller the width of where ur putting it the smaller the number. The plugin path is what plugin you want to go where so if u have in ur preview image in one box to have plugin 2-3 there u need to do insert this code.
<?php
$inputsize = 15;
include($pluginpath[2]);
?>
</br>
<?php
$inputsize = 15;
include($pluginpath[3]);
?>
put all this in the space where ur box is in ur html template. There is one more thing u can do if u want to display the plugins name u need to add this code to the following code!
echo $pluginname[X];
So it would like this.
<?php
echo $pluginname[2];
$inputsize = 15;
include($pluginpath[2]);
?>
Step 4 [Inserting Catagory Menu] - This part is copyed off the manual because i feel it is explained really well i will change some stuff in it though
It's now time to add the category menu to your designs a category menu is where your links appear to go to different pages. The category menu will display all the categories of the website. In order to successfully do this you must create a new file for your categories. Lets name the file categories.php
Categories.php :
<?php
for($i = 0; $i < $categoryrows; $i++)
{
echo '<a href="'.$categorylink[$i].'">'.$categoryname[$i].'</a> <br />';
}
?>
The code is a 'for loop', which will loop until all the categories have been displayed.
The word echo simply means print.
As you can see a <br /> has been added to the end of the link. This means each category will be printed on a new line. Now lets say we wanted to create an html table and have each category in a column. Something like this would work perfectly:
<table>
<tr>
<?php
for($i = 0; $i < $categoryrows; $i++)
{
echo '<td><a href="'.$categorylink[$i].'">'.$categoryname[$i].'</a></td>';
}
?>
</tr>
</table>
Now you need to open up your design files and include the path to the categories file like this:
<?php
include('skins/skinname/categories.php');
?>
The above is to make your links show up vertically like in a column if u want them horizontally dont add the </br>
Step 5 [Creating the install file]
Congradulations you have made it to the last step! This step is fairly easy i want you to make a new file and name it install.php all u need to do is put this code in there.
<?php
if(!defined('IN_SUBDREAMER'))
die("Hacking attempt!");
$skinname = 'Skin Name Here';
$numdesigns = 1;
$previewimage = 'skinname/images/image.jpg';
$authorname = 'Authors Name Here';
$authorlink = 1;
$designpath[] = 'skinname/design1.php';
$maxplugins[] = 1;
$imagepath[] = 'skinname/images/preview.jpg';
?>
You will need to change some stuff in there like the skin name, Number of designs, Preview image, Author name, Author link, Design path, Max plugins, Image path. here is a legend of what each one means.
$skinname: The name of your skin
$numdesigns: The number of designs your skin has
$previewimage: The path from the skins directory to your skins' preview image. It needs to be 225 x 225 and should be less than 10k. (example)
$authorname: Your name
$authorlink: Your user id on the Subdreamer website. To find your user id you need to visit this link: http://www.subdreamer.com/forum/memberlist.php and click on your username. Then check the last numbers of the url. For example: http://www.subdreamer.com/forum/member.php?action=getinfo&userid=1
$designpath[]: The path from the skins directory to your design file.
$maxplugins[]: The amount of plugins that the design file can hold.
$imagepath[]: The path from the skins directory to your design's image. The image needs to be 225 x 225 and should be under 10k. The image must also display where the plugins will go.
put all of your files in a folder with ur skins name you need your design.php in there your install.php in there and ur images folder in there and anything else that might need to be in there like cssstyle sheets etc put in there.. upload them to your ftp in the Skins Directory and then go to your subdreamer control panel and install the skin and enjoy.
Tutorial Created By: Peter [Aka: Critizin] - If there is anything wrong with this tutorial or anything you like me to add please tell me.. Im new to this im only writting down what i know and would greatly apperciate it if you guys helped me add on to this.