[Tutorial] Using HTML/CSS templates with phpVMS

Sava · April 16, 2015

You haven't ported the template correctly. Re read the tutorial and see how the default crystal theme is structured.

RodrigoMoreira9 · June 8, 2015

Sorry I am not good at English.

I download the template and does not have the styles file, only default.css and fonts.css what I do?

freshJet · June 8, 2015

Sorry I am not good at English.

I download the template and does not have the styles file, only default.css and fonts.css what I do?

That is them, they will not always be named styles.css.

RodrigoMoreira9 · June 8, 2015

Well, I managed to convert php, now I can not link the menus.

example:

I put the code inside the menu (<li> <a href="<?php echo url('/acars') ?> "> Live Map </a> </ li>) but when I click this menu, it is not directed to the page, what I do?

hurkulez · June 10, 2015

Try this

<li><a href="<?php echo url('/acars') ?>" Live Map</a></li>

polirom · February 10, 2016

You could put a sample layout.tpl edited, because I do not hear anything

This is what I have to change

<!DOCTYPE HTML>

<!--

Ex Machina by TEMPLATED

templated.co @templatedco

Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)

-->

<html>

<head>

<title>Ex Machina by TEMPLATED</title>

</noscript>

</head>

<h1><a href="#">Ex Machina</a></h1>

</div>

<ul>

<li class="active"><a href="index.html">Homepage</a></li>

<li><a href="left-sidebar.html">Left Sidebar</a></li>

<li><a href="right-sidebar.html">Right Sidebar</a></li>

<li><a href="no-sidebar.html">No Sidebar</a></li>

</ul>

</nav>

</div>

</div>

<h2>Feugiat Tempus</h2>

</header>

<p class="subtitle">In posuere eleifend odio. Quisque semper augue mattis maecenas ligula.</p>

</section>

</div>

<h2>Maecenas lectus</h2>

</header>

<p class="subtitle">In posuere eleifend odio. Quisque semper augue mattis maecenas ligula.</p>

</section>

</div>

<h2>Luctus lectus</h2>

</header>

<p class="subtitle">In posuere eleifend odio. Quisque semper augue mattis maecenas ligula.</p>

</section>

</div>

<h2>Posuere eleifend</h2>

</header>

<p class="subtitle">In posuere eleifend odio. Quisque semper augue mattis maecenas ligula.</p>

</section>

</div>

<h2>Integer gravida nibh quis urna</h2>

<span class="byline">Augue praesent a lacus at urna congue rutrum</span>

</header>

<p>This is <strong>Ex Machina</strong>, a responsive HTML5 site template freebie by <a href="http://templated.co">TEMPLATED</a>.'>http://templated.co">TEMPLATED</a>. Released for free under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so use it for whatever (personal or commercial) – just give us credit! Check out more of our stuff at <a href="http://templated.co">our site</a> or follow us on <a href="http://twitter.com/templatedco">Twitter</a>.</p>

<p>Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat. Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>

<a href="#" class="button">More Details</a>

</section>

</div>

<h2>Feugiat Tempus</h2>

</header>

<li>

<p>Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.</p>

</li>

<li>

<p>Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.</p>

</li>

<li>

<p>Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.</p>

</li>

<li>

<p>Donec leo, vivamus fermentum augue praesent a lacus at urna rutrum.</p>

</li>

</ul>

</section>

</div>

<h2>Feugiat Tempus</h2>

</header>

<li><a href="#">Maecenas luctus lectus at sapien</a></li>

<li><a href="#">Etiam rhoncus volutpat erat</a></li>

<li><a href="#">Donec dictum metus in sapien</a></li>

<li><a href="#">Nulla luctus eleifend purus</a></li>

<li><a href="#">Maecenas luctus lectus at sapien</a></li>

</ul>

</section>

<h2>Nulla luctus eleifend</h2>

</header>

<li><a href="#">Maecenas luctus lectus at sapien</a></li>

<li><a href="#">Donec dictum metus in sapien</a></li>

<li><a href="#">Integer gravida nibh quis urna</a></li>

<li><a href="#">Etiam posuere augue sit amet nisl</a></li>

<li><a href="#">Mauris vulputate dolor sit amet nibh</a></li>

</ul>

</section>

</div>

</div>

<h3>Etiam posuere augue</h3>

<p>Donec nonummy magna quis risus eleifend. </p>

</div>

</section>

<h3>Etiam posuere augue</h3>

<p>Donec nonummy magna quis risus eleifend. </p>

</div>

</section>

<h3>Etiam posuere augue</h3>

<p>Donec nonummy magna quis risus eleifend. </p>

</div>

</section>

</div>

</div>

<h2>Maecenas lectus</h2>

<blockquote>“ Donec leo, vivamus ullamcorper fermentum nibh in augue pulvinar ullamcorper metus praesent a lacus at urna congue ullamcorper rutrum. ”<br>

<br>

<strong>– John Smith</strong></blockquote>

</div>

</section>

</div>

<h2>Donec dictum</h2>

<li>

<h3>Mauris vulputate dolor sit amet</h3>

<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</a></p>

</li>

<li>

<h3>Fusce ultrices fringilla metus</h3>

<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</a></p>

</li>

<li>

<h3>Donec dictum metus in sapien</h3>

<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</a></p>

</li>

</ul>

</section>

</div>

<h2>Nulla leifend</h2>

<p>Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat.</p>

</ul>

<a href="#" class="button">More Collections</a>

</section>

</div>

<h2>Luctus eleifend</h2>

<p><strong>Aliquam erat volutpat. Pellentesque tristique ante ut risus. </strong></p>

<p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit.</p>

<p>Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat.</p>

<a href="#" class="button">More Collections</a>

</section>

</div>

Design: <a href="http://templated.co">TEMPLATED</a> Images: <a href="http://unsplash.com">Unsplash</a> (<a href="http://unsplash.com/cc0">CC0</a>)

</div>

</body>

</html>

polirom · February 13, 2016

This tutorial applies to the php version 5.5.x phpvms

treygeboy · February 29, 2016

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!

Where do I "Select the name that you named the folder you uploaded and renamed earlier."?

RafaelLetras · May 18, 2016

Hello I followed your tutoria , I'am using PHPVMS 5.5simspilots , and I get this error :

Notice: The template file "/home/u731954971/public_html//lib/skins/Bootstrap_Metro_Dashboard-master/header.php" doesn't exist in /home/u731954971/public_html/core/classes/TemplateSet.class.php on line 231
VERSION BETA

mattsmith · June 23, 2016

I have followed the tutorial and can get the skin to show up but when i add <?php echo $page_content;?> the page just ends up messed up.

OWA001 · July 13, 2016

I have followed the tutorial and can get the skin to show up but when i add <?php echo $page_content;?> the page just ends up messed up.

Friend, check, copy an paste to file ( [yoursite]/core/templates/pages_content.php ) and copy this file, edit and upload to skin, this files show your content.

i hope letter good, the english no are my force

TAV1702 · December 1, 2016

Hey when you all create skins, how do you stop the sytem from adding pages created in the admin panel to your core_navigation file? I want the pages view-able public, but do not want the system to add them to my navigation file automatically.

web541 · December 2, 2016

In core_navigation.php

Remove this line

<?php echo $MODULE_NAV_INC;?>

You could also remove the navbar function out of the pages module but that's up to you and not necessary.

That should fix it.

TAV1702 · December 2, 2016

Thanks man I'll give that a shot. I was banging my head on the wall trying to figure out why it kept adding page links to my nav.

mattsmith · December 9, 2016

On my skin i'm editing wen you click on Register, Login, Live flights etc how do you make it go to a new page rather than just opening at the bottom of the page?

Edited December 11, 2016 by mattsmith

mattsmith · February 22, 2017

On 09/12/2016 at 6:48 PM, mattsmith said:

On my skin i'm editing wen you click on Register, Login, Live flights etc how do you make it go to a new page rather than just opening at the bottom of the page?

Bump

Sava · February 23, 2017

Do you have a link?

Most probably, you're having the content for your frontpage in your layout, rather than in frontpage_main.php

That is the first thing that comes to mind.

mattsmith · February 23, 2017

http://libertyairva.esy.es/

Sava · February 24, 2017

Like I thought, you're including the $page_content in the wrong place. It is placed inside the col-md-4 div, and the rest is part of your layout.

What you need to do is move the parts you don't want to be shown on each page, and only on the frontpage, to frontpage_main.php

Then, include the $page_content in a proper place. Finally, you have an error in your layout.php with the page title missing, and being filled in with javascript code. You'll need to fix that as well for other things to work, such as live map, booking and so on.

I can provide those services to you. If you're interested, send me a message.

Regards

pilot0674 · November 21, 2018

where do i download that zip file?

[Tutorial] Using HTML/CSS templates with phpVMS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation