pureHTML5 Free/Premium skin!

MaciejO · October 24, 2013

Hello guys,

I am very happy to announce the release of my first free skin for the phpVMS community. You can find it in downloads section of my website named as pureHTML5 template.

Features:

CSS3 Drop-Down Menu
OpenSans Google Font
Sleek & Modern Design
Custom Table Styling
Upgrade to Premium option in the future!
Tom's Simple News integration (Module required unless you will delete it callback function from frontpage_main.tpl)

Terms & Conditions:

You have to leave 'Designed by MaciejO' along with the link to my site in the footer at the bottom of each page.
Rest of the conditions come under the http://creativecommo...s/by-nc-sa/3.0/ license.

Installation:

Extract the pureHTML5_blue.rar archive.
Upload pureHTML5_blue folder to ROOT/lib/skin
In admin panel -> general settings change the skin to pureHTML5_blue
That's it!

Premium

This template will be available in premium version too within few weeks time. The premium features will likely be to:

Multi-level animated drop down menu
Diffrent colour variants
Animated picture slider
Custom skinning for some of the modules and default phpvms templates
Pilot Center
Accordion or/and Tabs integration to be used around the website.

I am planning on releasing premium version of this template for price of 10GBP.

I am hoping that this skin will be a great starter to many new VA's out there.

Use PM, contact form on my website or this topic to gain support if you need it!

Regards,

Mac...

miniarma · October 25, 2013

Was thinking a demo of the skin would be nice

MaciejO · October 26, 2013

Was thinking a demo of the skin would be nice

Sure thing! I will be also marking premium pages and linking them to the menu one by one when they will be ready on host1 site at my hosting.

Here you are: http://maciejolborski.net/hosts/1/index.php/

Regds,

Mac...

Tom · October 26, 2013

Looks like you've gone for the flat, windows metro type look... but then the shadows, gradients and borders ruin it IMO...

Like it but would like it much more if it was properly flat

Also btw, you put "@" for copyright - the html entity is "©" if you want to fix it

MaciejO · October 26, 2013

Looks like you've gone for the flat, windows metro type look... but then the shadows, gradients and borders ruin it IMO...

Like it but would like it much more if it was properly flat

Also btw, you put "@" for copyright - the html entity is "©" if you want to fix it

Cheers for good word, I'll play around and see what I can get but I already used ModernUI quite a lot and I thought it needs a little bit of graphical expansion. I've putten @ for copyright just as a first thing when I started doing the template and then completly forgot about it!

~Thanks!

Mac...

freshJet · October 26, 2013

Agree with Tom, the shadows and gradients are a bit overkill, try going for a flatter design to make it more like Metro UI.

And damn you for using Open Sans

MaciejO · October 27, 2013

I would but I dont want to make it in the exactly same pattern as Metro -> Modern UI. It was designed other way round because the only workable way that goes well with Full Modern UI Schemat are tiles which are not something I want to do for this exact skin.

Open Sans is good! Hehe

Mac...

Tom · October 27, 2013

I would but I dont want to make it in the exactly same pattern as Metro -> Modern UI. It was designed other way round because the only workable way that goes well with Full Modern UI Schemat are tiles which are not something I want to do for this exact skin.

What?

Nobody's saying do tiles. Just commit to flat. For example: https://www.dropbox....27 10.35.55.png

benboy123 · October 27, 2013

Hi!

Great skin, I love it. But, I have two problems:

The "Careers" tab is still visible when you are logged in, how can I make that aviable for guests?

The map is to large, I need to resize it, so I can get it smaller.

Thanks,

Bendik

nordicva.cu.cc

simonecatalano · October 27, 2013

very nice

MaciejO · October 27, 2013

Hi!

Great skin, I love it. But, I have two problems:

The "Careers" tab is still visible when you are logged in, how can I make that aviable for guests?

The map is to large, I need to resize it, so I can get it smaller.

Thanks,

Bendik

nordicva.cu.cc

Hi there Bendik!

I will update template files shortly to make sure that careers is not shown in menu when you are logged in but for now you can change it by yourself in core_navigation.tpl

Replace line 11 in core_navigation.tpl with:

<?php if(!Auth::LoggedIn()) { ?>
<li class="level-1"><a href="<?php echo url('registration'); ?>">Careers</a></li>
<?php } ?>

To make sure that ACARS map shows up correctly on the screen you have to change its height and width in local.config.php on line 63/64 like that:

Config::Set('MAP_WIDTH', '640px');
Config::Set('MAP_HEIGHT', '480px');

Glad you like it!

Mac...

benboy123 · October 28, 2013

Thanks!

simonecatalano · November 9, 2013

How insert the table in this skins ?

â–¬

Thanks

CollinShea · November 13, 2013

When I install it this error come up? Fatal error: Class 'SimpleNews' not found in /home/exp99reg/public_html/lib/skins/pureHTML5_blue/frontpage_main.tpl on line 4

MaciejO · November 14, 2013

How insert the table in this skins ?

â–¬

Thanks

Follow standard HTML pattern for tables:

<table> //table start
 <thead> //header
   <tr> //row
     <th></th> //header column
     <th></th> //header column
   </tr> //row end
 </thead> //header end
 <tbody> //body start
   <tr> //row
     <td></td> //body column
     <td></td> //body column
   </tr> //row end
 </tbody> //body end
</table> //table end

Mac...

yorgosGK · November 18, 2013

Great work! Love this thing. I cant seem to edit the public profile page?....I find the pilot center one but cant seem to locate the public one lol....

pedroportugal · November 26, 2013

the same error

News

Fatal error: Class 'SimpleNews' not found in /home/jetstarp/public_html/lib/skins/pureHTML5_blue/frontpage_main.tpl on line 4

freshJet · November 26, 2013

the same error

News

Fatal error: Class 'SimpleNews' not found in /home/jetstarp/public_html/lib/skins/pureHTML5_blue/frontpage_main.tpl on line 4

[*]Tom's Simple News integration (Module required unless you will delete it callback function from frontpage_main.tpl)

Angel Air · December 15, 2013

hey,

great skin but i am having some trouble linking .css files within my script any hel would be great.

Taran · December 24, 2013

Is there a way to add a sidebar on the right side of the page as well? so to have 2 sidebars

freshJet · December 24, 2013

Copy what Maciej has done with the frontpage_main.tpl on the layout.tpl

Taran · December 24, 2013

Take the <aside>...</aside> and put that where?

Taran · December 24, 2013

Here's my layout.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/pureHTML5_blue/styles/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
<?php echo $page_htmlhead; ?>
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/pureHTML5_blue/styles/html5.css" />
<!-- JS BELOW -->
<? Template::Show('forum_style.tpl'); ?>
<!-- JS ABOVE -->
<!--Simply copy and paste into <BODY>
			 Just above the </BODY> tag. -->
<script type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
 for this script and many more
*/
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35
// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")
// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6
// Set the maximum-size of your snowflakes
var snowmaxsize=30
// Set the minimal-size of your snowflakes
var snowminsize=8
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
						    rand=Math.floor(range*Math.random())
		    return rand
}
function initsnow() {
						    if (ie5 || opera) {
														    marginbottom = document.body.scrollHeight
														    marginright = document.body.clientWidth-15
						    }
						    else if (ns6) {
														    marginbottom = document.body.scrollHeight
														    marginright = window.innerWidth-15
						    }
						    var snowsizerange=snowmaxsize-snowminsize
						    for (i=0;i<=snowmax;i++) {
														    crds[i] = 0;
										    lftrght[i] = Math.random()*15;
										    x_mv[i] = 0.03 + Math.random()/10;
														    snow[i]=document.getElementById("s"+i)
														    snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
														    snow[i].size=randommaker(snowsizerange)+snowminsize
														    snow[i].style.fontSize=snow[i].size+'px';
														    snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
														    snow[i].style.zIndex=1000
														    snow[i].sink=sinkspeed*snow[i].size/5
														    if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
														    if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
														    if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
														    if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
														    snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
														    snow[i].style.left=snow[i].posx+'px';
														    snow[i].style.top=snow[i].posy+'px';
						    }
						    movesnow()
}
function movesnow() {
						    for (i=0;i<=snowmax;i++) {
														    crds[i] += x_mv[i];
														    snow[i].posy+=snow[i].sink
														    snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
														    snow[i].style.top=snow[i].posy+'px';
														    if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
																						    if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
																						    if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
																						    if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
																						    if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
																						    snow[i].posy=0
														    }
						    }
						    var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
						    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
						    window.onload=initsnow
}
</SCRIPT>
</head>
<body>
<?php echo $page_htmlreq ?>
<section id="background-gradient"></section>
<section id="pageWrap">
<nav>
<?php Template::Show('core_navigation.tpl'); ?> 
</nav>
<header>
<?php Template::Show('core_header.tpl'); ?> 
</header>
<section class="clearfix" id="contentWrap">
<?php echo $page_content; ?>
</section>
<footer>
<?php Template::Show('core_footer.tpl'); ?>
</footer>
</section>
</body>
</html>

here's my frontpage_main.tpl

<aside>
<iframe src="http://free.timeanddate.com/clock/i3ww8qil/n1/fn14/fc009/tct/pct/ahl/tt0/tw1/tm1/td1/th1/ta1" frameborder="0" width="233" height="19" allowTransparency="true"></iframe>
<section class="box">
<h1>News</h1>
<?php PopUpNews::PopUpNewsList(5); ?>
</section>
<section class="box">
 <h1>HUB Wars (Hours)</h1>
 EGLL: <? echo HubStats::TotalHours(EGLL); ?><br />CYYZ: <? echo HubStats::TotalHours(CYYZ); ?><br />KATL: <? echo HubStats::TotalHours(KATL); ?><br />KSEA: <? echo HubStats::TotalHours(KSEA); ?><br />VHHH: <? echo HubStats::TotalHours(VHHH); ?>
</section>
<section class="box">
 <h1>In The Air</h1>
 <?php Screenshots::show_random_screenshot(); ?>
</section>
<section class="box">
 <h1>Statistics</h1>
 Pilots: <?php echo StatsData::PilotCount(); ?><br />Pilots Pending: <?php echo count(PilotData::GetPendingPilots())?><br />Hours: <?php echo StatsData::TotalHours(); ?><br />Flights: <?php echo StatsData::TotalFlights(); ?><br />Distance Flown: <?php echo StatsData::TotalMilesFlown(); ?><br />Passangers Carried: <?php echo StatsData::TotalPaxCarried (); ?><br /> VACentral Rank: <?php
$cws = new CodonWebService();
$xml = $cws->get('http://vacentral.net/airline/xml/vva_victorvirtualairlines');
$xml = simplexml_load_string($xml);
echo "{$xml->rank}";
?>
</section>
<section class="box">
 <h1>Latest Pilots</h1>
 <?php MainController::Run('Pilots', 'RecentFrontPage', 5); ?>
</section>
<section class="box">
<?php
$usersonline = StatsData::UsersOnline();
$guestsonline = StatsData::GuestsOnline();
?>
<h1>Pilots Online</h1>
    <?php
$shown = array();
foreach($usersonline as $pilot)
{
if(in_array($pilot->pilotid, $shown))
continue;
else
$shown[] = $pilot->pilotid;
echo "<p>";
echo '<img src="'.Countries::getCountryImage($pilot->location).'" alt="'.Countries::getCountryName($pilot->location).'" />';
echo " {$pilot->firstname} {$pilot->lastname}<br />";
echo "</p>";
}
?>
    <p class="txt-red10">Currently
    <?php echo count($guestsonline);?>
    guest(s) visiting.
</section>
</aside>
<section id="contentFrontPage">
<h1>Welcome to Victor Virtual Airlines!</h1>
We operate all around the world giving you a no-limit virtual airline to fly with! At VVA, you're not a number, you're a member of the family. Welcome aboard!
We are also now hiring staff! To apply, please visit the Career Center.
<article>
 <h3>Why do we do it?</h3>
 <iframe width="560" height="315" src="//www.youtube.com/embed/I712YXdJ6_0" frameborder="0" allowfullscreen></iframe>
 <h3>Latest Flights</h3>
 <?php
$count = 5;
$pireps = PIREPData::getRecentReportsByCount($count);
?>
 <table widtd="100%">
  <thead>
   <tr>
   <th>Flight No</th>
   <th>Departure</th>
   <th>Arrival</th>
   <th>Duration</th>
   <th>Pilot</th>
   <th>Status</th>
   </tr>
   </thead>
   <tbody>

   <?php
  if(count($pireps) > 0)
  {
 foreach ($pireps as $pirep)
 {
 {
   $pilotinfo = Pilotdata::getPilotdata($pirep->pilotid);
   $pilotid = Pilotdata::getPilotCode($pilotinfo->code, $pilotinfo->pilotid);

   if($pirep->accepted == '0') $status = 'REJECTED';
   if($pirep->accepted == '1') $status = 'ACCEPTED';
   else $status = 'PENDING';
  }
  ?>
   <tr>
   <td><?php echo $pirep->code.$pirep->flightnum; ?></td>
   <td><?php echo $pirep->depicao; ?></td>
   <td><?php echo $pirep->arricao; ?></td>
   <td><?php echo $pirep->flighttime; ?></td>
   <td><?php echo $pilotinfo->firstname.' '.$pilotinfo->lastname; ?></td>
   <td><?php

 if($pirep->accepted == PIREP_ACCEPTED)
  echo 'Accepted';
 elseif($pirep->accepted == PIREP_REJECTED)
  echo 'Rejected';
 elseif($pirep->accepted == PIREP_PENDING)
  echo 'Approval Pending';
 elseif($pirep->accepted == PIREP_INPROGRESS)
  echo 'Flight in Progress';

 ?>
   </td>
   </tr>
   <?php
 }}
  else
  {
   echo '<tr><td colspan="6">No flights yet made, first cooming soon!</td></tr>';
  }
  ?>
  </tbody>
 </table>
</article>
<article>
 <h3>Live Flights</h3>
 <?php Template::Show('acarsmap.tpl'); ?>
</article>
</section>

Taran · December 24, 2013

So what exactly do i need to do to get a sidebar on the right side as well?

freshJet · December 25, 2013

<aside>, <section> and <article> are not HTML tags. Use <div> instead.

Your basic answer is to do this in your CSS:

#sidebar {
float:left;
width:20%;
}

#main {
float:left;
width:70%;
}

The percentages deliberately add up to 90% to allow for margins and padding.

Then, in your layout.tpl:

<div id="sidebar">
<!-- sidebar content goes here -->
</div>

<div id="main">
<?php echo $page_content;?>
</div>

Taran · December 25, 2013

Ok, i'm going to try it out here. Happy Holidays capt!

Taran · December 25, 2013

That didn't work, it just copied the frontpage onto it twice it's ok, i'll live without it.

freshJet · December 25, 2013

Yeah remove it from the frontpage though. There should be no layout divs on the frontpage_main.tpl. Your frontpage_main code should be the content that appears in the main bit, the sidebar will appear automatically.

MaciejO · December 25, 2013

Hi!

Sorry I've been away on christmas holiday and not been checking forum for a while but.

itrobb. <aside>, <section> and <article> are the propper HTML5 tags and are now supported by most modern browsers. http://www.w3schools...ew_elements.asp.

Taran. In theory you could create an aside with id right and place it in html like this:

<aside id="right">
<section class="box">
	 <h1>Title 1</h1>
</section>
<section class="box">
	 <h1>Title 2</h1>
</section>
</aside>

Then in your CSS you would have to add something like that:

#right {
position: relative!important;
width: 260px!important;
float: right!important;
}

And then take away 260px(aside container) + 25px(right margin) from #contentFrontPage width so it should be:

#contentFrontPage {
width: 360px;
margin-left: 25px;
margin-right: 25px;
}

I didn't test it but it should do the trick, if it doesn't contact me through pm and I'll be more than happy to help you out!

Maciej.

Taran · December 25, 2013

i'll try it now! Thanks!

Sign In

pureHTML5 Free/Premium skin!

Recommended Posts

MaciejO

miniarma

MaciejO

Tom

MaciejO

freshJet

MaciejO

Tom

benboy123

simonecatalano

MaciejO

benboy123

simonecatalano

CollinShea

MaciejO

yorgosGK

pedroportugal

freshJet

Angel Air

Taran

freshJet

Taran

Taran

Taran

freshJet

Taran

Taran

freshJet

MaciejO

Taran

Join the conversation