First Time Skinning - I've missed something...

October 5, 2010

OK, I have a template downloaded and I've got all the appropriate files in the skin's folder. But when I view my site, all I get is the CSS. I've missed something, and it's going to be stupidly funny to all of those who've done this hundreds of times , but this is my first try. Is it in layout.tpl?

How do I edit the navigation bar?

Tom · October 5, 2010

The code from your template needs to go into layout.tpl correct, with:

<? echo $page_content; ?>

where you want the content to go.

You edit the navigation links in core_navigation.tpl.

October 5, 2010

The code from your template needs to go into layout.tpl correct, with:
<? echo $page_content; ?>
where you want the content to go.

You edit the navigation links in core_navigation.tpl.

OK, thanks!

October 5, 2010

The code from your template needs to go into layout.tpl correct, with:
<? echo $page_content; ?>
where you want the content to go.

You edit the navigation links in core_navigation.tpl.

I did that, nothing happened.

Tom · October 5, 2010

You still have the html for the crystal skin in your layout.tpl.

You need to take the html code from the template you're using and put it into layout.tpl, and upload that new layout.tpl to your own skin folder along with the css.

Here's a quick example, I want my site to look like this:

<div id="header">Header</div>
<div id="main">Main Content</div>
<div id="footer">Footer</div>

So in my layout.tpl I have the following:

<html>
<head>
<title><? echo $page_title; ?></title>
<link rel="stylesheet" media="all" type="text/css" href="<? echo SITE_URL; ?>/lib/skins/myskin/style.css" />
<? echo $page_htmlhead; ?>
</head>
<body>
<? echo $page_htmlreq; ?>
<div id="header">Header</div>
<? Template::Show('core_navigation.tpl'); //For my nav links ?>
<div id="main"><? echo $page_content; ?></div>
<div id="footer">Footer <a href="http://www.phpvms.net" target="_blank">powered by phpVMS</a></div>
</body>
</html>

October 5, 2010

OK, this is my layout.tpl:

<?php

/**

* 

* STOP!!!!!!!!

* 

* Are you editing the crystal skin directly?

* DON'T

* 

* Copy and rename the crystal folder. Otherwise it'll get 

* overwritten in an update.

* 

* Also, READ THE DOCS

* 

*   http://www.phpvms.net/docs/skinning

* 

*/

?><!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="http://www.freshjetvirtual.com/lib/skins/premiumseries/styles.css" />



<?php 

/* This is required, so phpVMS can output the necessary libraries it needs */

echo $page_htmlhead; 

?>



<?php /*Any custom Javascript should be placed below this line, after the above call */ ?>







</head>

<body>

<?php

/* This should be the first thing you place after a <body> tag

   This is also required by phpVMS */

echo $page_htmlreq;

?>

<div id="body">

<div id="innerwrapper">

   <div id="topBanner">



   </div>

   <div class="menu">

     <ul>

       <li><a href="<?php echo url('/'); ?>" >Home</a></li>

       <?php

if(!Auth::LoggedIn())

{

   // Show these if they haven't logged in yet

?>

       <li><a href="<?php echo url('/login'); ?>" >Login</a></li>

       <li><a href="<?php echo url('/registration'); ?>" >Pilot Application</a></li>



       <?php

}

else

{

   // Show these items only if they are logged in

?>        

       <li><a href="<?php echo url('/profile'); ?>" >Pilot Center</a>

         <ul>

           <li><a href="<?php echo url('/downloads'); ?>">Downloads</a></li>

           <?php
   if(PilotGroups::group_has_perm(Auth::$usergroups, ACCESS_ADMIN))
   {
       echo '<li><a href="'.fileurl('/admin').'">Admin Panel</a></li>';
   }
?>
           <li><a href="<?php echo url('/logout'); ?>">Log Out</a></li>


         </ul>

       </li>



       <li><a href="<?php echo url('/profile'); ?>/">Your Profile</a>

         <ul>

           <li><a href="<?php echo url('/profile/editprofile'); ?>">Edit Profile</a></li>

           <li><a href="<?php echo url('/profile/changepassword'); ?>">Change Password</a></li>

         </ul>
       </li>

         <li><a href="<?php echo url('/profile'); ?>/">Flight Operations</a>

         <ul>




           <li><a href="<?php echo url('/schedules/bids');?>">View Your Flight Bids</a></li>

           <li><a href="<?php echo url('/pireps/filepirep');?>">File A PIREP</a></li>

         </ul>

           <?php

}

?>
       <li><a href="http://www.freshjetvirtual.com/index.php/operations">Operations</a>

         <ul>

           <li><a href="http://www.freshjetvirtual.com/index.php/staff">Staff</a></li>

           <li><a href="<?php echo url('/pilots'); ?>">Pilots</a></li>

           <li><a href="http://www.freshjetvirtual.com/index.php/fleet">Our Fleet</a></li>


         </ul>

       </li>

       <li><a href="<?php echo url('/acars') ?>">Flight Status</a></li>
       <li><a href="<?php echo url('/contact') ?>">Contact Us</a></li>

     </ul>

   </div>

   <div id="bodytext">


   </div>


     <?php 

   </div>

   ?>

   </div>

 </div>

   <div id="footer">

   <p>Copyright Â© 2010 | freshJet Virtual | CMS by  <a href="http://www.phpvms.net/" target="_blank">phpVMS</a></p>

   </div>    

</div>

</body>

</html>

Where have I gone wrong? And Tom, do I insert any of your code and, if so, where?

Tom · October 5, 2010

No my code was just as an example.

What are you trying to achieve? The HTML you have in layout.tpl is the default crystal skin, however the css I saw earlier appeared to be from a downloaded template.

If you want to use that template you need to take the HTML from the files they provide and put it between the <body> tags in layout.tpl (replacing what's in there at the moment, we can add the rest from there).

October 7, 2010

Now my phpVMS content won't show. It's just the default from the template...

Tom · October 7, 2010

Now you need to add the following:

<title><?php echo $page_title; ?></title>

(for the title)

<? echo $page_htmlhead; ?>

(before </head>)

<? echo $page_htmlreq; ?>

(after <body>)

<? Template::Show('core_navigation.tpl'); ?>

(To show your navigation, the HTML for your links will go in core_navigation.tpl - there's already some in there)

and finally:

<? echo $page_content; ?>

Put that wherever you want the page content to appear.

Also, you've put a second <head> section within the body. This needs to be removed and the content moved up into the first <head> section.

October 7, 2010

I've messed everything up now. I've got the phpVMS content, but there are links at the top and the sidebars aren't there. This is what I have now:

<?php
/**
* 
* STOP!!!!!!!!
* 
* Are you editing the crystal skin directly?
* DON'T
* 
* Copy and rename the crystal folder. Otherwise it'll get 
* overwritten in an update.
* 
* Also, READ THE DOCS
* 
*   http://www.phpvms.net/docs/skinning
* 
*/
?><!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">
echo $page_htmlhead;
<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/premiumseries/styles.css" />

<?php 
/* This is required, so phpVMS can output the necessary libraries it needs */ ?>
<body>
<?php echo $page_htmlreq; ?>
<? Template::Show('core_navigation.tpl'); ?>
<?php
/* This should be the first thing you place after a <body> tag
This is also required by phpVMS */
echo $page_htmlreq; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="Premium Series" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
</body>
<!-- start header -->
<div id="header">
<div id="logo">

</div>
<div id="menu">
	<ul id="main">
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/">Home</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/aboutus">About Us</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/profile">Pilot Centre</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/operations">Operations</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/ourfleet">Our Fleet</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/acars">Live Flights</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/contactus">Contact Us</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/login">Crew Login</a></li>
</div>

</div>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
	<!-- start content -->
       <div id="content">
       <? echo $page_content; ?>
       </div>
       <!-- end content -->
	<!-- start sidebars -->
	<div id="sidebar1" class="sidebar">
	<div id="sidebar1" class="sidebar">
           <ul>
               <li>
                   <h1>Latest Flights</h1>
                   <ul>

                   </ul>
               </li>
               <li>
                   <h1>Newest Pilots</h1>
                   <ul>

                   </ul>
               </li>
               <li>

                   </ul>
               </li>
               <li>
                   <h1>Latest Deals</h1>
                   <ul>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                   </ul>
               </li>
           </ul>
       </div>

	<!-- end sidebars -->
	<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p class="copyright">©  2010 freshJet Virtual | www.freshjetvirtual.com | freshJet is not a real airline</p>
</div>
</body>
</html>

What have I done now?

Tom · October 7, 2010

<!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/premiumseries/styles.css" />
<?php echo $page_htmlhead; ?>
<body>
<?php echo $page_htmlreq; ?>
<div id="header">
<div id="logo">

</div>
<div id="menu">
	<ul id="main">
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/">Home</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/aboutus">About Us</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/profile">Pilot Centre</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/operations">Operations</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/ourfleet">Our Fleet</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/acars">Live Flights</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/contactus">Contact Us</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/login">Crew Login</a></li>
</div>

</div>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
	<!-- start content -->
       <div id="content">
       <? echo $page_content; ?>
       </div>
       <!-- end content -->
	<!-- start sidebars -->
	<div id="sidebar1" class="sidebar">
	<div id="sidebar1" class="sidebar">
           <ul>
               <li>
                   <h1>Latest Flights</h1>
                   <ul>

                   </ul>
               </li>
               <li>
                   <h1>Newest Pilots</h1>
                   <ul>

                   </ul>
               </li>
               <li>

                   </ul>
               </li>
               <li>
                   <h1>Latest Deals</h1>
                   <ul>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                   </ul>
               </li>
           </ul>
       </div>

	<!-- end sidebars -->
	<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p class="copyright">©  2010 freshJet Virtual | www.freshjetvirtual.com | freshJet is not a real airline<br /><a href="http://www.phpvms.net" target="_blank">powered by phpVMS</a></p>
</div>
</body>
</html>

Here is a (hopefully) fixed version. Also, unless you've bought a no attribution license you have to keep the link back to phpVMS.

October 8, 2010

<!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/premiumseries/styles.css" />
<?php echo $page_htmlhead; ?>
<body>
<?php echo $page_htmlreq; ?>
<div id="header">
<div id="logo">

</div>
<div id="menu">
	<ul id="main">
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/">Home</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/aboutus">About Us</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/profile">Pilot Centre</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/operations">Operations</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/ourfleet">Our Fleet</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/acars">Live Flights</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/contactus">Contact Us</a></li>
		<li class="current_page_item"><a href="http://www.freshjetvirtual.com/index.php/login">Crew Login</a></li>
</div>

</div>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
	<!-- start content -->
       <div id="content">
       <? echo $page_content; ?>
       </div>
       <!-- end content -->
	<!-- start sidebars -->
	<div id="sidebar1" class="sidebar">
	<div id="sidebar1" class="sidebar">
           <ul>
               <li>
                   <h1>Latest Flights</h1>
                   <ul>

                   </ul>
               </li>
               <li>
                   <h1>Newest Pilots</h1>
                   <ul>

                   </ul>
               </li>
               <li>

                   </ul>
               </li>
               <li>
                   <h1>Latest Deals</h1>
                   <ul>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                       <li>Â£9.99 Glasgow - Belfast</li>
                   </ul>
               </li>
           </ul>
       </div>

	<!-- end sidebars -->
	<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p class="copyright">©  2010 freshJet Virtual | www.freshjetvirtual.com | freshJet is not a real airline<br /><a href="http://www.phpvms.net" target="_blank">powered by phpVMS</a></p>
</div>
</body>
</html>

Here is a (hopefully) fixed version. Also, unless you've bought a no attribution license you have to keep the link back to phpVMS.

Thanks! I don't have a no attribution license, but I already had a link back to phpVMS.

October 8, 2010

I can't thank you enough Tom!!! Everything is working well. Now I can actually get my final layout. Two things:

1. How do I get my login form in a single line at the top right just above my actual page?

2. How do I make my sidebars?

Thanks...

Tom · October 8, 2010

For the login you can use the example from the default skin:

<div id="topLogin">
	<?php 
	/* 
	Quick example of how to see if they're logged in or not
	Only show this login form if they're logged in */
	if(Auth::LoggedIn() == false)
	{ ?>
		<form name="loginform" action="<?php echo url('/login'); ?>" method="post">
			Sign-in with your pilot id or email, or <a href="<?php echo url('/registration'); ?>">register</a><br />
		<input type="text" name="email" value="" onClick="this.value=''" />
		<input type="password" name="password" value="" />
		<input type="hidden" name="remember" value="on" />
		<input type="hidden" name="redir" value="index.php/profile" />
		<input type="hidden" name="action" value="login" />
		<input type="submit" name="submit" value="Log In" />
		</form>
		<?php
	}	
	/* End the Auth::LoggedIn() if */
	else /* else - they're logged in, so show some info about the pilot, and a few links */
	{

	/*	Auth::$userinfo has the information about the user currently logged in
		We will use this next line - this gets their full pilot id, formatted properly */
	$pilotid = PilotData::GetPilotCode(Auth::$userinfo->code, Auth::$userinfo->pilotid);
	?>

	<img align="left" height="50px" width="50px" style="margin-right: 10px;"
		src="<?php echo PilotData::getPilotAvatar($pilotid);?>" />

	<strong>Pilot ID: </strong> <?php echo $pilotid ; ?>
	<strong>Rank: </strong><?php echo Auth::$userinfo->rank;?><br />
	<strong>Total Flights: </strong><?php echo Auth::$userinfo->totalflights?>, <strong>Total Hours: </strong><?php echo Auth::$userinfo->totalhours;?>
	<br />
	<a href="<?php echo url('/pireps/new');?>">File a New PIREP</a> | 
	<a href="<?php echo url('/schedules/bids');?>">View My Bids</a> | 
	<a href="<?php echo url('/profile/');?>">View Pilot Center</a>
	<?php
	} /* End the else */
	?>
	</div>

And for your sidebars, you'll need to do that with div's, for example, your HTML:

<div id="content">
<div id="left">Left sidebar</div>
<div id="mid">Middle content</div>
<div id="right">Right sidebar</div>
</div>

And then in the CSS:

#content{width:960px;}
#left{width:200px;float:left;}
#mid{width:560px;float:left;}
#right{width:200px;float:left;}

Obviously that's a very basic example, but you can develop it from that.

October 9, 2010

Oh thanks. Just checked my site and I received this:

Warning: Invalid argument supplied for foreach() in /home/freshje1/public_html/core/common/FinanceData.class.php on line 166

October 9, 2010

I'm looking for drop down menus too. I looked at the thread about all the links but got no help. Is there a way to add a drop down to the navbar I have currently?

October 18, 2010

Hey again,

How can I split my content up into columns? For example, if you look at a real airline website, it has content split up. For example, look at easyjet.com. It has news and general stuff down the left, a flight search in the middle and adverts on the right.

Jon · October 19, 2010

Just create three diferent css rules. or example on my site I have two collums so i have:

<div id="banner"></div>


 <div id="body">

   <div id="left"></div>


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

And then for my css file

#wrapper #body #left {
width: 200px;
height: 500px;
float: left;
background-color: #888686;
background-image: url(http://websiteupgradges.leavirtual.com/lib/skins/LEAV/images/img_240.jpg);
background-repeat: no-repeat;
}
#wrapper #body #right {
height: 500px;
width: 600px;
float: right;
}

Then put the info you want inside the div tags so on my right i wanted the page content:

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

Then, say I wanted to have popupnews by simpilot on the left:

<div id="left">
<?php

// Show the News module, call the function ShowNewsFront
//	This is in the modules/Frontpage folder

PopUpNews::PopUpNewsList(5);



?>

</div>

Hope This Helps

Jon

Sign In

First Time Skinning - I've missed something...

Recommended Posts

Guest itrobb

Tom

Guest itrobb

Guest itrobb

Tom

Guest itrobb

Tom

Guest itrobb

Tom

Guest itrobb

Tom

Guest itrobb

Guest itrobb

Tom

Guest itrobb

Guest itrobb

Guest itrobb

Jon

Join the conversation