Last modified 10/10/13
1. Choosing a template
First, you need to choose the template you want to use for your site. There are hundreds of thousands of free CSS templates on the internet available for download, so choosing the right one can be difficult. I recommend this site for templates. Many sites also offer premium templates too, but these often cost you.
When looking for a suitable template, you have to look at it and think to yourself; can I see this being my site? Does it suit? Don't worry about the colours, they can all be changed. It's the layout that matters. Even if there's something that you don't quite like, remember that they are fully customisable, so you can change it later.
When you find the one you like, download it. Remember to check the Terms of Use and the licence.
2. Uploading the template
Once you have downloaded your template, open it. Template packages typically contain two main files; an HTML file (usually index.html) and a CSS file. For this tutorial we will call the HTML file index.html and the CSS file styles.css. Often there will also be an images folder containing the images used in the template.
Now, you'll need to access your File Manager on your site, such as cPanel. Go to the 'lib/skins' directory and upload the .zip file that you downloaded. Once done, extract it. This will create a new folder (in cPanel you'll need to click the refresh button). Rename the folder to either your VA name or the template name.
3. Modifying the template for phpVMS
Once you have your folder created, open it. Inside you should find all the files, including the HTML and CSS files. Find the index.html file and rename it 'layout.tpl'.
Once you have your layout.tpl, open it up.
Find the line similar to this:
<link href="styles.css" rel="stylesheet" media="all" />
This will not work with the skin. You need to change it to this:
<link href="<?php echo SITE_URL?>/lib/skins/[YOUR SKIN NAME HERE]/styles.css" rel="stylesheet" media="all" />
Remember that styles.css must be changed to the name of the CSS file in your template. You may also need to enter this full path when linking to images, etc.
Between the <title></title> tags, remove the existing text and replace it with this:
<?php echo $page_title; ?>
Then, on the next line:
<?php echo $page_htmlhead; ?>
Then skip to the <body> tag. On the line after it, enter this:
<?php echo $page_htmlreq; ?>
Now, find the <div> section where the page content is. Delete the page content, making sure the </div> remains where it is. Now, between the opening and closing div tags, enter the code:
<?php echo $page_content;?>
You should now edit the links provided in the template's navigation bar. The links (identified by finding <a></a> tags) will most likely have the href attribute set to '#' (<a href="#">Link text</a>). Change this to the links you want to show. The links to the default phpVMS pages can be found in the core_navigation.tpl file in core/templates.
As per the phpVMS licence, you must display this in your footer:
<a href="http://www.phpvms.net" target="_blank">powered by phpVMS</a>
4. Activating the new skin
Now that you are finished with the coding part, you must now go to your phpVMS Admin Panel. You can access it at www.yoursite.com/admin.
In the sidebar, select 'Site & Settings' and then 'General Options'. Select the name that you named the folder you uploaded and renamed earlier.
5. Final steps
You're good to go, go check out your new skin by accessing your site. Now you can edit your site by changing the styles in the CSS file and changing the page layout in the layout.tpl. You can edit page content using the files in core/templates.
If you don't see your new skin, try clearing the cache in the Maintenance Options.
NOTE: Before you begin editing content files, copy the ones you wish to edit from core/templates to your skin folder, that way you have a backup of the original and they won't get overwritten in updates.
Hope this helps someone!