Jump to content
freshJet

[Tutorial] Using HTML/CSS templates with phpVMS

Recommended Posts

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!

  • Like 1

Share this post


Link to post
Share on other sites

What about the core navigation file - I think it would be good to point that out or make it clear that the navigation will have to be included within the layout in some fashion.

Also, the need to clear the cache is really not needed, it is automatically cleared when the new setting is saved.

Share this post


Link to post
Share on other sites

OK, edited.

I left out the bit about the core navigation because I find it much easier to have it all on the layout.tpl, but I suppose it's worth a mention for finding out the URLs for different pages.

Share this post


Link to post
Share on other sites

When I follow this and with get a template from that site, I edit all of the code like it says and then when I get it up on my website, it is just a whole bunch of scattered text. No images or anything. Just text

Share this post


Link to post
Share on other sites

i think I get what you are saying but what links am i supposed to be looking for?

You just have to ensure there the correct links, sometimes the CSS may be located at [YOURSKIN]/CSS/styles.css

Once you find the CSS file just make sure the link in the following line is correct, and with certain templates there could be more than one so be sure to include all.

<link href="<?php echo SITE_URL?>/lib/skins/[YOUR SKIN NAME HERE]/styles.css" rel="stylesheet" media="all" />

^^^^^^^^Make sure when you go to this link its your styles file!!!^^^^^^^^

  • Like 1

Share this post


Link to post
Share on other sites

You just have to ensure there the correct links, sometimes the CSS may be located at [YOURSKIN]/CSS/styles.css

Once you find the CSS file just make sure the link in the following line is correct, and with certain templates there could be more than one so be sure to include all.

<link href="<?php echo SITE_URL?>/lib/skins/[YOUR SKIN NAME HERE]/styles.css" rel="stylesheet" media="all" />

^^^^^^^^Make sure when you go to this link its your styles file!!!^^^^^^^^

Ok Thanks. The styles come up now but now the images won't. I looked and the images folder is linked in the layout.tpl file

Share this post


Link to post
Share on other sites

You must consider where your images are linked to too in the CSS file.

All of the file paths seem to be correct. I don't know why they won't show up.

Share this post


Link to post
Share on other sites

Those are unrelated to the skin, the skin is how the site looks.

Modules usually come with installation instructions. Simpilot always provides detailed installation guides.

Share this post


Link to post
Share on other sites

Pages are written in HTML. To create a custom page you can add one through the admin panel and edit it via core/pages or alternatively create a module and do it that way.

Share this post


Link to post
Share on other sites

Hello Sir,

I need your help, please!

I want to upload my Template, to my new VA but I don't now how I can do that. I already read you Tutorial text "[Tutorial] Using HTML/CSS templates with phpvms." but I must say I don't understand it, because my English is not good enough.

So I want your help, please.

Can I send you my template and can you edit it?

And than you send me, my template, that you edit it, per E-Mail.

Please answer me at these Email:

skyairwaysvainfo@gmail.com

I hope you can help me, please.

Share this post


Link to post
Share on other sites

I followed you all a full explanation and successful way,

but when separated pages for ( layout - frontpage_main ) error appears top of the page:

Warning: file_exists() [function.file-exists]: File name is longer than the maximum allowed path length on this platform (4096): /home/USER/public_html/sa//lib/skins/saudia/<style> #innerwrapper{ background:none; border:none; padding:0px; } </style> <!-- Start Content --> <div class="main" role="main"> <div id="content" class="content full"> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-6"> <!-- Events Listing --> <div class="listing events-listing"> <header class="listing-header"> <h3>WELCOME TO SAUDI ARABIAN AIRLINE VIRTUAL</h3> </header> <section class="listing-cont"> <p style="margin-top: 30px;"> in /home/USER/public_html/sa/core/classes/TemplateSet.class.php on line 96

this code in ( frontpage_maim.tpl )

..

Where's the problem?

Share this post


Link to post
Share on other sites

The problem has been resolved

I've added Last 5 flight with map, a new website did not register any flight in the database for this was showing me the error

Apologize to you

Share this post


Link to post
Share on other sites

I have prepared the template as explained in the tutorial but how do you add the page to start section and register ?

Thank you for your work , a greeting

Share this post


Link to post
Share on other sites

I have prepared the template as explained in the tutorial but how do you add the page to start section and register ?

Thank you for your work , a greeting

The link for this is yoursite.com/index.php/register.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...