Jump to content
freshJet

[Tutorial] Using HTML/CSS templates with phpVMS

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700' rel='stylesheet' type='text/css'>

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/skel.min.js"></script>

<script src="js/skel-panels.min.js"></script>

<script src="js/init.js"></script>

<noscript>

<link rel="stylesheet" href="css/skel-noscript.css" />

<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="css/style-desktop.css" />

</noscript>

<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->

<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

</head>

<body class="homepage">

<!-- Header -->

<div id="header">

<div class="container">

<!-- Logo -->

<div id="logo">

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

</div>

<!-- Nav -->

<nav id="nav">

<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>

<!-- Header -->

<!-- Banner -->

<div id="banner">

<div class="container">

</div>

</div>

<!-- /Banner -->

<!-- Main -->

<div id="page">

<!-- Extra -->

<div id="marketing" class="container">

<div class="row">

<div class="3u">

<section>

<header>

<h2>Feugiat Tempus</h2>

</header>

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

<p><a href="#"><img src="images/pics13.jpg" alt=""></a></p>

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

</section>

</div>

<div class="3u">

<section>

<header>

<h2>Maecenas lectus</h2>

</header>

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

<p><a href="#"><img src="images/pics14.jpg" alt=""></a></p>

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

</section>

</div>

<div class="3u">

<section>

<header>

<h2>Luctus lectus</h2>

</header>

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

<p><a href="#"><img src="images/pics15.jpg" alt=""></a></p>

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

</section>

</div>

<div class="3u">

<section>

<header>

<h2>Posuere eleifend</h2>

</header>

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

<p><a href="#"><img src="images/pics16.jpg" alt=""></a></p>

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

</section>

</div>

</div>

</div>

<!-- /Extra -->

<!-- Main -->

<div id="main" class="container">

<div class="row">

<div class="6u">

<section>

<header>

<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>

<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>

<div class="3u">

<section class="sidebar">

<header>

<h2>Feugiat Tempus</h2>

</header>

<ul class="style2">

<li>

<a href="#"><img src="images/pics07.jpg" alt=""></a>

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

</li>

<li>

<a href="#"><img src="images/pics08.jpg" alt=""></a>

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

</li>

<li>

<a href="#"><img src="images/pics09.jpg" alt=""></a>

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

</li>

<li>

<a href="#"><img src="images/pics10.jpg" alt=""></a>

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

</li>

</ul>

</section>

</div>

<div class="3u">

<section class="sidebar">

<header>

<h2>Feugiat Tempus</h2>

</header>

<ul class="style1">

<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>

<section class="sidebar">

<header>

<h2>Nulla luctus eleifend</h2>

</header>

<ul class="style1">

<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>

</div>

<!-- Main -->

</div>

<!-- /Main -->

<!-- Featured -->

<div id="featured">

<div class="container">

<div class="row">

<section class="4u">

<div class="box">

<a href="#" class="image left"><img src="images/pics04.jpg" alt=""></a>

<h3>Etiam posuere augue</h3>

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

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

</div>

</section>

<section class="4u">

<div class="box">

<a href="#" class="image left"><img src="images/pics05.jpg" alt=""></a>

<h3>Etiam posuere augue</h3>

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

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

</div>

</section>

<section class="4u">

<div class="box">

<a href="#" class="image left"><img src="images/pics06.jpg" alt=""></a>

<h3>Etiam posuere augue</h3>

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

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

</div>

</section>

</div>

<div class="divider"></div>

</div>

</div>

<!-- /Featured -->

<!-- Footer -->

<div id="footer">

<div class="container">

<div class="row">

<div class="3u">

<section>

<h2>Maecenas lectus</h2>

<div class="balloon">

<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>

<div class="ballon-bgbtm"> </div>

</section>

</div>

<div class="3u">

<section>

<h2>Donec dictum</h2>

<ul class="default">

<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>

<div class="3u">

<section>

<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 class="style5">

<li><a href="#"><img src="images/pics07.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics08.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics09.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics10.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics11.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics12.jpg" alt=""></a></li>

</ul>

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

</section>

</div>

<div class="3u">

<section>

<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>

</div>

</div>

</div>

<!-- /Footer -->

<!-- Copyright -->

<div id="copyright" class="container">

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>

Share this post


Link to post
Share on other sites

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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<link href='http://fonts.googlea...lic,400,300,700' rel='stylesheet' type='text/css'>

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->

<script src="http://ajax.googleap...n.js"></script>

<script src="js/skel.min.js"></script>

<script src="js/skel-panels.min.js"></script>

<script src="js/init.js"></script>

<noscript>

<link rel="stylesheet" href="css/skel-noscript.css" />

<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="css/style-desktop.css" />

</noscript>

<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->

<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

</head>

<body class="homepage">

<!-- Header -->

<div id="header">

<div class="container">

<!-- Logo -->

<div id="logo">

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

</div>

<!-- Nav -->

<nav id="nav">

<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>

<!-- Header -->

<!-- Banner -->

<div id="banner">

<div class="container">

</div>

</div>

<!-- /Banner -->

<!-- Main -->

<div id="page">

<!-- Extra -->

<div id="marketing" class="container">

<div class="row">

<div class="3u">

<section>

<header>

<h2>Feugiat Tempus</h2>

</header>

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

<p><a href="#"><img src="images/pics13.jpg" alt=""></a></p>

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

</section>

</div>

<div class="3u">

<section>

<header>

<h2>Maecenas lectus</h2>

</header>

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

<p><a href="#"><img src="images/pics14.jpg" alt=""></a></p>

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

</section>

</div>

<div class="3u">

<section>

<header>

<h2>Luctus lectus</h2>

</header>

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

<p><a href="#"><img src="images/pics15.jpg" alt=""></a></p>

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

</section>

</div>

<div class="3u">

<section>

<header>

<h2>Posuere eleifend</h2>

</header>

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

<p><a href="#"><img src="images/pics16.jpg" alt=""></a></p>

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

</section>

</div>

</div>

</div>

<!-- /Extra -->

<!-- Main -->

<div id="main" class="container">

<div class="row">

<div class="6u">

<section>

<header>

<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>. Released for free under the <a href="http://templated.co/...cense">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/t...witter</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>

<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>

<div class="3u">

<section class="sidebar">

<header>

<h2>Feugiat Tempus</h2>

</header>

<ul class="style2">

<li>

<a href="#"><img src="images/pics07.jpg" alt=""></a>

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

</li>

<li>

<a href="#"><img src="images/pics08.jpg" alt=""></a>

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

</li>

<li>

<a href="#"><img src="images/pics09.jpg" alt=""></a>

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

</li>

<li>

<a href="#"><img src="images/pics10.jpg" alt=""></a>

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

</li>

</ul>

</section>

</div>

<div class="3u">

<section class="sidebar">

<header>

<h2>Feugiat Tempus</h2>

</header>

<ul class="style1">

<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>

<section class="sidebar">

<header>

<h2>Nulla luctus eleifend</h2>

</header>

<ul class="style1">

<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>

</div>

<!-- Main -->

</div>

<!-- /Main -->

<!-- Featured -->

<div id="featured">

<div class="container">

<div class="row">

<section class="4u">

<div class="box">

<a href="#" class="image left"><img src="images/pics04.jpg" alt=""></a>

<h3>Etiam posuere augue</h3>

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

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

</div>

</section>

<section class="4u">

<div class="box">

<a href="#" class="image left"><img src="images/pics05.jpg" alt=""></a>

<h3>Etiam posuere augue</h3>

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

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

</div>

</section>

<section class="4u">

<div class="box">

<a href="#" class="image left"><img src="images/pics06.jpg" alt=""></a>

<h3>Etiam posuere augue</h3>

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

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

</div>

</section>

</div>

<div class="divider"></div>

</div>

</div>

<!-- /Featured -->

<!-- Footer -->

<div id="footer">

<div class="container">

<div class="row">

<div class="3u">

<section>

<h2>Maecenas lectus</h2>

<div class="balloon">

<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>

<div class="ballon-bgbtm"> </div>

</section>

</div>

<div class="3u">

<section>

<h2>Donec dictum</h2>

<ul class="default">

<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>

<div class="3u">

<section>

<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 class="style5">

<li><a href="#"><img src="images/pics07.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics08.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics09.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics10.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics11.jpg" alt=""></a></li>

<li><a href="#"><img src="images/pics12.jpg" alt=""></a></li>

</ul>

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

</section>

</div>

<div class="3u">

<section>

<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>

</div>

</div>

</div>

<!-- /Footer -->

<!-- Copyright -->

<div id="copyright" class="container">

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

</div>

</body>

</html>

Во первых, Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾ что вам помочь, вы должны подключить правильно ÑÑылки на Ñтили Ñайта (CSS) потом только Ñ Ñмогу вам помочь

Share this post


Link to post
Share on other sites

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."?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

scrren_zpsmtprdr91.png

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :D

Share this post


Link to post
Share on other sites

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 by mattsmith

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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. :)

 

Share this post


Link to post
Share on other sites

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

 

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...