Jump to content

pureHTML5 Free/Premium skin!

MaciejO

By MaciejO
in Releases

 Share

Recommended Posts

MaciejO Newbie

MaciejO

Posted
Posted

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.

pureHTML5.jpg

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:

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

Installation:

  1. Extract the pureHTML5_blue.rar archive.
  2. Upload pureHTML5_blue folder to ROOT/lib/skin
  3. In admin panel -> general settings change the skin to pureHTML5_blue
  4. 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... :ph34r:

  • Like 1
Link to comment
Share on other sites
Tom Newbie

Tom

Posted
Posted

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

Link to comment
Share on other sites
MaciejO Newbie

MaciejO

Posted
  • Author
Posted

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

Link to comment
Share on other sites
MaciejO Newbie

MaciejO

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Tom Newbie

Tom

Posted
Posted

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

Link to comment
Share on other sites
MaciejO Newbie

MaciejO

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 2 weeks later...
MaciejO Newbie

MaciejO

Posted
  • Author
Posted

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

:ph34r:

Mac...

Link to comment
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
  • 2 weeks later...
Taran Newbie

Taran

Posted
Posted

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>

Link to comment
Share on other sites
freshJet Newbie

freshJet

Posted
Posted

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

Link to comment
Share on other sites
MaciejO Newbie

MaciejO

Posted
  • Author
Posted

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.

Link to comment
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...
×
 Share
Go to topic listing
×
×
  • Create New...