freshJet Posted October 8, 2013 Report Share Posted October 8, 2013 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! 2 Quote Link to comment Share on other sites More sharing options...
Administrators simpilot Posted October 9, 2013 Administrators Report Share Posted October 9, 2013 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. Quote Link to comment Share on other sites More sharing options...
freshJet Posted October 10, 2013 Author Report Share Posted October 10, 2013 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. Quote Link to comment Share on other sites More sharing options...
cam3r0ngt Posted December 10, 2013 Report Share Posted December 10, 2013 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 Quote Link to comment Share on other sites More sharing options...
freshJet Posted December 10, 2013 Author Report Share Posted December 10, 2013 Screenshot? Quote Link to comment Share on other sites More sharing options...
cam3r0ngt Posted December 11, 2013 Report Share Posted December 11, 2013 https://www.dropbox.com/s/0pgvrtw10jj0805/Capture.PNG Quote Link to comment Share on other sites More sharing options...
Sava Posted December 12, 2013 Report Share Posted December 12, 2013 Check the links to your css files. 1 Quote Link to comment Share on other sites More sharing options...
cam3r0ngt Posted December 13, 2013 Report Share Posted December 13, 2013 Check the links to your css files. i think I get what you are saying but what links am i supposed to be looking for? Quote Link to comment Share on other sites More sharing options...
rpalmer800 Posted December 14, 2013 Report Share Posted December 14, 2013 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!!!^^^^^^^^ 1 Quote Link to comment Share on other sites More sharing options...
cam3r0ngt Posted December 15, 2013 Report Share Posted December 15, 2013 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 Quote Link to comment Share on other sites More sharing options...
freshJet Posted December 15, 2013 Author Report Share Posted December 15, 2013 You must consider where your images are linked to too in the CSS file. Quote Link to comment Share on other sites More sharing options...
cam3r0ngt Posted December 15, 2013 Report Share Posted December 15, 2013 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. Quote Link to comment Share on other sites More sharing options...
freshJet Posted December 15, 2013 Author Report Share Posted December 15, 2013 Can we see something more detailed? The obvious solution would be file paths. Quote Link to comment Share on other sites More sharing options...
filipmkd Posted January 16, 2014 Report Share Posted January 16, 2014 What about when I would like to install plug-inn / addon for the skin? Quote Link to comment Share on other sites More sharing options...
MaciejO Posted January 17, 2014 Report Share Posted January 17, 2014 What about when I would like to install plug-inn / addon for the skin? What you mean? Quote Link to comment Share on other sites More sharing options...
filipmkd Posted January 17, 2014 Report Share Posted January 17, 2014 Well lets say I want to install something from http://www.simpilotgroup.com/home/modules , or just simple add module that will show latest news. Do i need to add this to the site like <?php required xxxxxxxx.exe ?> Quote Link to comment Share on other sites More sharing options...
freshJet Posted January 17, 2014 Author Report Share Posted January 17, 2014 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. Quote Link to comment Share on other sites More sharing options...
filipmkd Posted February 7, 2014 Report Share Posted February 7, 2014 ah... One more thing, lets say i would like to make own design on fleet page... Can i design it with html and then convert? Quote Link to comment Share on other sites More sharing options...
freshJet Posted February 7, 2014 Author Report Share Posted February 7, 2014 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. Quote Link to comment Share on other sites More sharing options...
PilotMohamed Posted September 27, 2014 Report Share Posted September 27, 2014 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. Quote Link to comment Share on other sites More sharing options...
freshJet Posted September 28, 2014 Author Report Share Posted September 28, 2014 In future, post in threads, don't PM I do not have time just now to do that. Quote Link to comment Share on other sites More sharing options...
PilotMohamed Posted September 28, 2014 Report Share Posted September 28, 2014 OK. When you have time? Quote Link to comment Share on other sites More sharing options...
PilotMohamed Posted September 28, 2014 Report Share Posted September 28, 2014 Can everyone else edit for me please, my Template for the VA, it take max. 10 Minutes. Quote Link to comment Share on other sites More sharing options...
freshJet Posted September 28, 2014 Author Report Share Posted September 28, 2014 Can't you work it out from the code? Quote Link to comment Share on other sites More sharing options...
CapitalConnectVirtualGroup Posted October 13, 2014 Report Share Posted October 13, 2014 @itrobb - Thank you for writing this great guide, really helping me, saves me having to use Dreamweaver CC trial to do the stuff, my mate's template should work fine. Thanks!! 1 Quote Link to comment Share on other sites More sharing options...
tkfeeny Posted February 22, 2015 Report Share Posted February 22, 2015 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? Quote Link to comment Share on other sites More sharing options...
tkfeeny Posted February 22, 2015 Report Share Posted February 22, 2015 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 Quote Link to comment Share on other sites More sharing options...
Angello Posted April 16, 2015 Report Share Posted April 16, 2015 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 Quote Link to comment Share on other sites More sharing options...
freshJet Posted April 16, 2015 Author Report Share Posted April 16, 2015 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. Quote Link to comment Share on other sites More sharing options...
Angello Posted April 16, 2015 Report Share Posted April 16, 2015 I have edited the skin , but failed to progress in the registration of users http://siteestudios.altervista.org/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.