integrating a joomla template into rezgo

Rezgo Tutorial Integrating a Joomla Template

Tutorial – Integrating a Joomla Template into Rezgo

Last Modified November 10, 2009

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 1 of 89

Rezgo Tutorial Integrating a Joomla Template

Copyright Notice........................................................................................................................2

.................................................................................................................................................. 2

Before You Start........................................................................................................................3

Introduction................................................................................................................................3

Step One: Open your base template in your HTML editor........................................................4

Step Two: Preparing your base template..................................................................................5

Step Three: Changing relative paths to absolute paths...........................................................13

Step Four: Embedding Styles..................................................................................................17

Step Five: Importing Your Images...........................................................................................36

Step Six: Updating Image Paths to Local Paths......................................................................39

Step Seven: Formatting the Content area...............................................................................63

Step Eight: Adding the Rezgo Tag...........................................................................................65

Step Nine: Removing the Absolute Paths................................................................................66

Step Ten: Moving your Template to Rezgo..............................................................................88

Copyright Notice

This document and the software to which it refers to is copyrighted by Sentias Software Corp. Use of this documentation and the software to which it refers is subject to the acceptance of the Terms of Use referenced in this documentation and available online at http://www.rezgo.com. All rights reserved. All other trademarks, and registered trademarks are the property of their respective owners.


Rezgo Tutorial Integration a Joomla Template

Before You Start

1. You will need an HTML editor or text editor to edit your HTML code. For this example, we use UltraEdit.

2. You will need to know how to edit HTML.

3. You will need to know the relative path to this base template on your webserver. In this example the base href is http://www.mysticwhalercruises.com/empty. (Thanks to Mystic Whaler Cruises for allowing us to use their template as a real-life example).

4. Allow yourself at least one hour to complete this tutorial.

Introduction

The template structure for Rezgo is very simple and flexible, however it requires that the person customizing the template understand that in order for Rezgo to work properly, the template that is added to Rezgo must meet certain criteria. These criteria are as follows:

1. The template should not use absolute positioning for elements below the Rezgo content area. This is because the Rezgo content area may stretch with more content and may overrun fixed objects on the page.

2. The template should not make reference to Rezgo styles. This is important in order to avoid conflict with the Rezgo stylesheet which control critical booking interface elements such as the availability calendar and booking content.

3. Stylesheets are embedded in the template OR links to stylesheets are via HTTPS.

4. Images are hosted locally on Rezgo OR images are hosted on a server that support HTTPS.

5. Javascript should be minimal or removed completely in order to avoid any conflicts with Rezgo functionality. Rezgo utilizes a large amount of AJAX & Javascript and requires the Scriptaculous Javascript library. Any references to the Scriptaculous library or to MooTools should be removed from the template.

6. The Rezgo booking interface is 780 pixels wide. The content area dedicated to Rezgo should be at least 800 pixels with a 10 pixel padding. This should provide enough space on around Rezgo to ensure that the interface does not touch other template elements.

Note: This tutorial uses a fairly sophisticated template which requires a moderate amount of customization. The time and complexity of integrating your own template may vary depending on the sophistication of your own template. If you have any doubts about your ability to complete the integration yourself, we recommend you contact a web developer or designer to help you.


http://www.mysticwhalercruises.com/empty


Step One: Open your base template in your HTML editor

First view your base template in a web browser (Firefox for example).

View the source of the page by right-clicking and choosing "View Page Source" from the menu. You should see something like this:

Select the entire source by pressing Ctrl+A (keyboard shortcut for select all). Copy the code by pressing Ctrl+C (keyboard shortcut for copy). Open your HTML editor and paste the code into a new document by pressing Ctrl+V (keyboard shortcut for paste). Before you begin editing, we recommend you save the template to your local machine for easy access.

Now you are ready to begin editing your template.


Step Two: Preparing your base template

Here is the base template code that we will be modifying in order to make it work with Rezgo.

<!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-gb" lang="en-gb" ><head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="verify-v1" content="7ubiYTyB1sGQtXNX8RovNcmRF45F3UAzA2Hg42P9itc=" /> <meta name="keywords" content="Mystic Day Trip, Lobster Dinner, Day Sail, Sailing Vacation, Charter, schooner, tall ship, Chesapeake Bay, Baltimore, New London, Mystic Country" /> <meta name="title" content="File Not Found" /> <meta name="author" content="Administrator" />

<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day Sails, Overnight Sailing Vacations and Charters" /> <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" /> <title>File Not Found</title> <script type="text/javascript" src="empty_files/mootools.js"></script> <script type="text/javascript" src="empty_files/caption.js"></script> <script type="text/javascript" charset="UTF-8">/* <![CDATA[ */try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };xajax.config.requestURI = "http://mysticwhalercruises.com/joomla/index.php";xajax.config.statusMessages = true;xajax.config.waitCursor = true;xajax.config.version = "xajax 0.5";xajax.config.legacy = false;xajax.config.defaultMode = "asynchronous";xajax.config.defaultMethod = "POST";/* ]]> */</script><script type="text/javascript" src="empty_files/xajax_core.js" charset="UTF-8"></script>

<script type="text/javascript" charset="UTF-8">/* <![CDATA[ */window.setTimeout( function() { var scriptExists = false; try { if (xajax.isLoaded) scriptExists = true; } catch (e) {} if (!scriptExists) { alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: http://mysticwhalercruises.com/joomla/plugins/system/blueflame/xajax/xajax_js/xajax_core.js"); } }, 2000);/* ]]> */</script>

<script type='text/javascript' charset='UTF-8'>/* <![CDATA[ */

xajax_bf_com_form_Handler = function() { return xajax.request( { xjxfun: 'bf_com_form_Handler' }, { parameters: arguments } ); };/* ]]> */</script>

<link rel="stylesheet" href="empty_files/system.css" type="text/css" /><link rel="stylesheet" href="empty_files/general.css" type="text/css" /><link rel="stylesheet" href="empty_files/1024.css" type="text/css" media="screen" /><link rel="stylesheet" href="empty_files/800.css" type="text/css" media="screen" /><link rel="stylesheet" href="empty_files/template_css.css" type="text/css" media="screen" /><link rel="stylesheet" href="empty_files/style.css" type="text/css" media="screen" /><link rel="stylesheet" href="empty_files/j15.css" type="text/css" media="screen" />

<style type="text/css" media="screen">.access {width: auto;height: 21px;position: absolute;right: -21px;top: .5em;}.widthbuttons {display: none;}</style>

<style type="text/css" media="screen">.access {width: auto;height: 21px;position: absolute;right: -51px;top: .5em;}.textbuttons {display: none;}</style>

<style type="text/css" media="screen">#main-body {width:100%;} #content{width:75.1%;margin-right:0.5%;} #sidebar{width:23.6%;}</style>

<script type="text/javascript" src="empty_files/stylechanger.js"></script>

<style type="text/css" media="screen">.topbar h1 a{display:block;text-indent:-5000px;text-decoration:none;width:250px;line-height:44px;}body.bodyfluid .topbar,.topbar {height:44px;}

</style>

<script type="text/javascript">var currentStyle = "Fluid";window.onload = setWidthFont;function setWidthFont(){

if(!prefsLoaded){

cookie = readCookie("fontSize");currentFontSize = cookie ? cookie : defaultFontSize;setFontSize(currentFontSize);

cookie = readCookie("pageWidth");currentStyle = cookie ? cookie : "Fluid";setWidth(currentStyle);prefsLoaded = true;

}

}</script>

</head><body><div id="wrap">


<div id="wrap-inner"><div class="topbar">

<div id="nav"><ul class="menu-nav"><li><a href="/joomla/index.php/2009-calendar/cat.listevents/2009/11/7/-"><span>2009 Calendar</span></a></li><li><a href="/joomla/index.php/cruise-and-cabin-rates"><span>Cabins and Rates</span></a></li><li><a href="/joomla/index.php/gift-certificates"><span>Gift Certificates</span></a></li><li><a href="/joomla/index.php/home"><span>Home</span></a></li></ul>

</div><h1> </h1></div><div id="headerleader"> <div class="module-gradient">

<div><div>

<div><div

align="center"><a href="http://www.mysticwhalercruises.com" target="_self">

<img src="empty_files/banner.jpg" alt="banner.jpg" width="775" height="162" /></a>

</div> </div></div>

</div></div>

</div>

<div id="path"><div class="pathleft"><div class="inside"></div>

<div class="access"><div id="access_buttons"><span class="textbuttons">

<a href="/joomla/index.php" title="Increase font sizes" onclick="changeFontSize(1);return false;">

<img src="empty_files/larger.png" alt="larger" width="20" height="20" border="0" /></a>

<a href="/joomla/index.php" title="Decrease font sizes" onclick="changeFontSize(-1);return false;">

<img src="empty_files/smaller.png" alt="smaller" width="20" height="20" border="0" /></a>

<a href="/joomla/index.php" title="Revert styles to default" onclick="revertStyles(); return false;">

<img src="empty_files/reset.png" alt="reset" width="20" height="20" border="0" /></a>

</span><span class="widthbuttons"><a href="/joomla/index.php" title="Switch to narrow

version" onclick="switchFixed();return false;"><img src="empty_files/fixed.png" alt="fixed-width" id="theme-fixed" height="20"

width="20" border="0" /></a >

<a href="/joomla/index.php" title="Switch to wider version" onclick="switchFluid();return false;" >

<img src="empty_files/fluid.png" alt="fluid-width" id="theme-fluid" height="20" width="20" border="0" /></a ></span>

</div></div>

</div><div class="pathright"></div></div>



<div id="main-body"><div id="content"><div class="inside">

<table class="contentpaneopen"><tr>

<td class="contentheading" width="100%">

File Not Found </td>

</tr></table>

<table class="contentpaneopen">

<tr><td valign="top"><h1>We are sorry, the page you requested cannot be found.</h1>

</td>

</tr>

</table><span class="article_separator"> </span>

</div></div><div id="sidebar"><div class="inside">

<div class="modulelight"><div>

<div><div>

<h3>Contact Us</h3><P style="LINE-

HEIGHT: 15px; FONT-SIZE: 10px">Mystic Whaler Cruises<BR>City Pier<BR>35 Water St<BR>New London, CT 06320</P><P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">PO Box 189<BR>Mystic, CT 06355<BR></P><P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">(800) 697-8420<BR><A href="mailto:[email protected]" mce_href="mailto:[email protected]">[email protected]</A> </P>

</div>

</div></div>

</div>

</div></div></div><script type="text/javascript">setWidthFont();</script>

<div id="footer"><div>Copyright © 2009 Mystic Whaler Cruises. All Rights Reserved.</div>

<div></div></div>


<div id="footereflect"><div class="designer"><a href="http://www.joomlashack.com" title="Joomla Templates

by JoomlaShack">Joomla Template by Joomlashack</a></div></div></div></div></body></html>

The first step is to eliminate all the code that isn't necessary for Rezgo. In this example, we want to remove any javascript or ajax code that may conflict with the Rezgo functionality.

<!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-gb" lang="en-gb" ><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="Mystic Day Trip, Lobster Dinner, Day Sail, Sailing Vacation, Charter, schooner, tall ship, Chesapeake Bay, Baltimore, New London, Mystic Country" /> <meta name="author" content="Administrator" />

<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day Sails, Overnight Sailing Vacations and Charters" />

<title>File Not Found</title>

<link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/system.css" type="text/css" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/general.css" type="text/css" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/1024.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/800.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/template_css.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/style.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/j15.css" type="text/css" media="screen" />


</div> </div> </div> </div> </div> </div>

<div id="path"><div><div></div>

<div> <div id="access_buttons"> <span>

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes" onclick="changeFontSize(1);return false;"> <img src="http://www.mysticwhalercruises.com/empty/empty_files/larger.png" alt="larger" width="20" height="20" border="0" /></a> <a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Decrease font sizes" onclick="changeFontSize(-1);return false;"> <img src="http://www.mysticwhalercruises.com/empty/empty_files/smaller.png" alt="smaller" width="20" height="20" border="0" /></a> <a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Revert styles to default" onclick="revertStyles(); return false;"> <img src="http://www.mysticwhalercruises.com/empty/empty_files/reset.png" alt="reset" width="20" height="20" border="0" /></a> </span> <span><a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to narrow version" onclick="switchFixed();return false;"> <img src="http://www.mysticwhalercruises.com/empty/empty_files/fixed.png" alt="fixed-width" id="theme-fixed" height="20" width="20" border="0" /></a >

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to wider version" onclick="switchFluid();return false;" > <img src="http://www.mysticwhalercruises.com/empty/empty_files/fluid.png" alt="fluid-width" id="theme-fluid" height="20" width="20" border="0" /></a ></span> </div></div>

</div><div></div></div>

<div id="main-body"><div id="content"><div>

<table><tr> <td width="100%">


</tr></table>

<table>


</td>

</tr>



</table><span> </span>

</div></div><div id="sidebar"><div> <div> <div> <div> <div>

<h3>Contact Us</h3> <P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">Mystic Whaler Cruises<BR>City Pier<BR>35 Water St<BR>New London, CT 06320</P><P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">PO Box 189<BR>Mystic, CT 06355<BR></P><P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">(800) 697-8420<BR><A href="mailto:[email protected]" mce_href="mailto:[email protected]">[email protected]</A> </P> </div>

</div> </div> </div>



<div></div></div><div id="footereflect"> <div><a href="http://www.joomlashack.com" title="Joomla Templates by JoomlaShack">Joomla Template by Joomlashack</a></div></div></div></div></body></html>

As you can see we have removed all the <script type="text/javascript"> elements from the template, excluding the one that controls font size. You will want to embed the contents of any remaining javascript directly into the page. This will eliminate any security issues with the javascript.



Step Three: Changing relative paths to absolute paths

Next we need to make all of the links and href references use absolute URLs. This will pull in all the elements directly from your website so we can see what the template looks like on your local machine. In this case, we use the search and replace feature in Ultraedit to replace all instances of href="/ with href="http://www.mysticwhalercruises.com/empty (which is the relative path for the original base template on the server).

Once you search and replace (or alternatively just add) the absolute path to all your href elements, you should be able to see the template locally in your browser. In this case, the template looks like this:

The source for the modified template now looks like this:


<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day Sails, Overnight Sailing Vacations and Charters" />

<title>File Not Found</title>


<style type="text/css" media="screen">.access {width: auto;height: 21px;position: absolute;right: -21px;top: .5em;}



.widthbuttons {display: none;}</style>



<script type="text/javascript" src="http://www.mysticwhalercruises.com/empty/empty_files/stylechanger.js"></script>


</style>

<script type="text/javascript">var currentStyle = "Fluid";window.onload = setWidthFont;function setWidthFont(){ if(!prefsLoaded){

cookie = readCookie("fontSize"); currentFontSize = cookie ? cookie : defaultFontSize; setFontSize(currentFontSize);

cookie = readCookie("pageWidth"); currentStyle = cookie ? cookie : "Fluid"; setWidth(currentStyle); prefsLoaded = true; }

}</script>

</head><body><div id="wrap"><div id="wrap-inner"><div> <div id="nav"><ul><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/2009-calendar/cat.listevents/2009/11/7/-"><span>2009 Calendar</span></a></li><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/cruise-and-cabin-rates"><span>Cabins and Rates</span></a></li><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/gift-certificates"><span>Gift Certificates</span></a></li><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/home"><span>Home</span></a></li></ul>

</div><h1> </h1></div><div id="headerleader"> <div> <div> <div>



<h1>We are sorry, the page you requested cannot be found.</h1>

</td>

</tr>

</table><span> </span>

</div></div><div id="sidebar"><div> <div> <div> <div> <div>

<h3>Contact Us</h3> <P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">Mystic Whaler Cruises<BR>City Pier<BR>35 Water St<BR>New London, CT 06320</P><P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">PO Box 189<BR>Mystic, CT 06355<BR></P><P style="LINE-HEIGHT: 15px; FONT-SIZE: 10px">(800) 697-8420<BR><A href="mailto:[email protected]" mce_href="mailto:[email protected]">[email protected]</A> </P> </div>

</div> </div> </div>



<div></div></div><div id="footereflect"> <div><a href="http://www.joomlashack.com" title="Joomla Templates by JoomlaShack">Joomla Template by Joomlashack</a></div></div></div></div></body></html>

All the paths to stylesheets and images have now been replaced with absolute paths. The resulting image paths will be, for example:

http://www.mysticwhalercruises.com/empty/empty_files/larger.png



Step Four: Embedding Styles

This step can be a bit tricky depending on how your template has been created. In this example, the template was created using Joomla (a popular content management system). The example template has a number of stylesheets that are linked to the base template. We recommend you comment out each one (one at a time) to determine which one (or ones) actually affect the template. Here are the stylesheet elements that we are referring to in this example:


In this case, we were able to determine that the following stylesheets are actually being used by this template.

<link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/1024.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/800.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/template_css.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/style.css" type="text/css" media="screen" />

We now need to embed the styles directly into the template so that we remove the references to the "http". This is because the secure pages on Rezgo require that ALL elements must be secure or from an “https” address, in order to avoid a security warning message from the browser. The best way to grab the style sheet code is to copy and paste the URL for the stylesheet into your browser and then copy and paste the code directly into your working template. Here is what the stylesheet content looks like after we copy and paste all the code



from the stylesheets.

/* http://www.mysticwhalercruises.com/empty/empty_files/1024.css */

#wrap{width: 967px;margin-right: auto;margin-left: auto;position:relative;}#footer{position:relative;clear:both;margin:0px;text-align:center;background:url(footerbg_wide.png) no-repeat center bottom; width:967px;height:46px;}#footereflect {background:url(footereflect_wide.png) no-repeat center top; width:967px;height:43px;}.topbar {background: url(topmenubg_wide.png) no-repeat center top; width:967px;}.pathleft {width:956px; margin-left:0px;height:33px;float:left;background: url(path_left_wide.png) no-repeat left top;}

/* http://www.mysticwhalercruises.com/empty/empty_files/800.css */

body.bodyfluid #wrap {width: 776px;margin-right: auto;margin-left: auto;position: relative;}body.bodyfluid #footer {position: relative;clear: both;margin: 0px;text-align: center;background: url(footerbg.png) no-repeat center bottom;width: 776px;height: 46px;}body.bodyfluid #footereflect {background: url(footereflect.png) no-repeat center top;width: 776px;height: 43px;}body.bodyfluid .topbar {background: url(topmenubg.png) no-repeat center top;width: 776px;}body.bodyfluid .pathleft {width: 765px;height: 33px;margin-left: 0px;float: left;background: url(path_left_short.png) no-repeat left top;}

/* http://www.mysticwhalercruises.com/empty/empty_files/template_css.css */

/* @group Global Reset */

div.ev_navigation { display:none;}

img.left { float: left;margin-right:5px;border:none;}

img.right { float: right;margin-left:5px;border:none;}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, hr,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}:focus {outline: 0;}table {border-collapse: collapse;border-spacing: 0;}html body * span.clear,



html body * div.clear,html body * li.clear,html body * dd.clear {background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content: '.';display: block;visibility: hidden;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}body.contentpane {background: #fff;}/* @end Reset */

/* @group Typography Helper Styles */

body { line-height: 145%; font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans-serif;}

/* Headings */

strong,em,b,i,abbr,.contentheading,.componentheading,.contentpagetitle,h1,h2,h3,h4,h5,h6 { font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

}.componentheading { margin: 0px 0px 10px 4px;}

table.blog table.contentpaneopen td.contentheading,td.contentheading { width: 99%;}

h1,h2,h3,h4,h5,h6 { margin: 1.2em 0;}ul.latestnews,ul.latestnewsdark,ul.latestnewslight,ul.latestnewsmid,ul.latestnewsbdr,ul.mostread,ul.mostreaddark,ul.mostreadlight,ul.mostreadmid,ul.mostreadbdr { list-style: none; padding: 0px; margin: 0px;}a.readon { padding: 0px 0px 0px 4px;}

/*Side Column Navigation*/

ul#mainlevel-sidenav { list-style: none; margin: 0; padding: 0;}



ul#mainlevel-sidenav a,a.mainlevel-sidenav { text-decoration: none; line-height: 135%; font-weight: bold;}

ul#mainlevel-sidenav a:hover { text-decoration: underline;}

/*If you want to use table based menus in vertical menu style*/

#sidebar a.mainlevel, #sidebar-2 a.mainlevel { text-decoration: none; line-height: 135%; font-weight: bold;}

#sidebar a.mainlevel:hover, #sidebar-2 a.mainlevel:hover { text-decoration: underline;}

/*Sublevel Support*/

#sidebar a.sublevel,#sidebar-2 a.sublevel { text-decoration: underline; padding-left: 4px; font-size: .9em;}

#sidebar a.sublevel:hover, #sidebar-2 a.sublevel:hover { text-decoration: none;}

/* Lists */#content ol, #content ul {margin-left:40px;margin-bottom: 5px;}#content li ul {margin-left:20px;margin-bottom: 0px;}#content ul li {list-style-type: disc;}#content ul li li {list-style-type: circle;}/* Ordered Lists */#content ol {list-style-type: decimal;}#content ol ol {list-style-type: lower-alpha;}

p { margin: 10px 0px;}

pre { display: block; font: 10px "Courier New", Courier, monospace; padding: 5px; white-space: normal;}

/* Lists */#content ol,#content ul {margin-left:40px;margin-bottom: 5px;}#sidebar ol,#sidebar ul {margin-left:10px;margin-bottom: 5px;}#sidebar-2 ol,#sidebar-2 ul {margin-left:10px;margin-bottom: 5px;}



#content li ul {margin-left:20px;margin-bottom: 0px;}#sidebar li ul {margin-left:10px;margin-bottom: 0px;}#sidebar-2 li ul {margin-left:10px;margin-bottom: 0px;}

#content ul li,#sidebar ul li,#sidebar-2 ul li{list-style-type: disc;}

#content ul li li,#sidebar ul li li,#sidebar-2 ul li li{list-style-type: circle;}

/* Ordered Lists */#content ol {list-style-type: decimal;}#content ol ol {list-style-type: lower-alpha;}

#content ol {list-style-type: decimal;}#content ol ol {list-style-type: lower-alpha;}

#sidebar ul.menu li,#sidebar-2 ul.menu li{list-style-type: none;}

#sidebar ul.menu,#sidebar-2 ul.menu{list-style-type: none;margin: 0;padding: 0;}

/* @end */

/* @group Structure */

.topbar h1 { position: relative; background: url(logo.png) no-repeat 20px 0; padding: 0px; margin: 0px;}

.topbar { position: relative; width: 100%;}

#wrap { margin-top: 8px;}

#main-body { clear: both; float: left; padding-bottom: 10px; position: relative; width: 75%; z-index: 100;}

#content { float: right;



width: 67%;}

#sidebar { float: left; margin-right: -3px; width: 32.5%;}

#sidebar-2 { float: right; margin-left: -3px; overflow: hidden; position: relative; width: 24.25%;}

#sidebar .inside { padding: 10px 4px 10px 10px;}

#sidebar-2 .inside { padding: 10px 10px 10px 4px;}

#content .inside { padding: 10px 7px;}

/* @end */

/* @group Navbar */

#nav { position: absolute; right: 1em; z-index: 500;}

#nav ul { margin-top: 12px; list-style: none;}

#nav a { float: none;}

#nav li { float: left; height: 20px; margin: 0px 4px; padding-left: 5px; background: url(tmenu_up_l.png) no-repeat bottom left;}

#nav li a { display: block; float: left; height: 20px; padding-right: 5px;



text-decoration: none; background: url(tmenu_up_r.png) no-repeat bottom right;}

div#nav li:hover, div#nav li.sfhover { background: url(tmenu_over_l.png) no-repeat bottom left;}

div#nav li:hover a, div#nav li.sfhover a { background: url(tmenu_over_r.png) no-repeat bottom right;}

div#nav li.active a { background: url(tmenu_active_r.png) no-repeat bottom right;}

div#nav li.active { background: url(tmenu_active_l.png) no-repeat bottom left;}/* @end Navbar */

/* @group Pathway */

#path { height: 33px; position: relative; width: 100%;}

span.pathway { display: block; margin: 0 10px; line-height: 32px; font-size: 11px;}

span.pathway a, span.pathway a:hover { line-height: 32px; font-size: 11px;}

#path .pathleft .inside { margin-left: 10px;}

.pathright { background: url(pathway_right.png) no-repeat left top; float: right; height: 33px; padding-right: 0px; width: 11px;}

/* Accessibility Buttons */

.access { height: 21px; position: absolute; right: 1.7em; top: .54em; width: auto;



}

#access_buttons { height: 21px; margin-left: 7px; white-space: nowrap; width: 103px;}

#access_buttons a { height: 21px; text-decoration: none; white-space: nowrap; width: 21px;}

/* @end */

/* @group Modules */

/* user3 Background Color */

#headerleader .module-gradient { width: 100%; margin: 0px; padding: 0px;}

#headerleader .module,#headerleader .modulelight,#headerleader .moduledark,#headerleader .modulemid,#headerleader .modulebdr { margin: 8px;}

.user4split2,.user6split2 { float: left; overflow: hidden; width: 49%;}

.user5split2,.user7split2 { float: right; overflow: hidden; width: 49%;}

.user6,.user7,.user6split2,.user7split2 { overflow: hidden; padding-top: 10px;}

#headerleader .module,#headerleader .module div { margin: 0; padding: 0;}

/* LIGHT */

div.modulelight



{ margin-bottom: 10px; background: url(topright_light.png) 100% 0 no-repeat; height: 1%;}

div.modulelight div { background: url(topleft_light.png) 0 0 no-repeat;}div.modulelight div div { background: url(botright_light.png) 100% 100% no-repeat;}div.modulelight div div div { background: url(botleft_light.png) 0 100% no-repeat; padding: 12px 15px 15px 15px;}div.modulelight div div div div { background: transparent none; padding: 0;}div.modulelight h3 { margin: 0px 0px 10px 0px; text-indent: 0px; border: none;}

/* MID */

div.modulemid{ margin-bottom: 10px; background: url(topright_mid.png) 100% 0 no-repeat; height: 1%;}

div.modulemid div { background: url(topleft_mid.png) 0 0 no-repeat;}div.modulemid div div { background: url(../images/botright_mid.png) 100% 100% no-r>peat;}div.modulemid div div div { background: url(botleft_mid.png) 0 100% no-repeat; padding: 12px 15px 15px 15px;}div.modulemid div div div div { background: transparent none; padding: 0;}div.modulemid h3 { margin: 0px 0px 10px 0px; text-indent: 0px; border: none;}

/* DARK */

div.moduledark{



margin-bottom: 10px; background: url(topright_dark.png) 100% 0 no-repeat; height: 1%;}

div.moduledark div { background: url(topleft_dark.png) 0 0 no-repeat;}div.moduledark div div { background: url(botright_dark.png) 100% 100% no-repeat;}div.moduledark div div div { background: url(botleft_dark.png) 0 100% no-repeat; padding: 12px 15px 15px 15px;}div.moduledark div div div div { background: transparent none; padding: 0;}div.moduledark h3 { margin: 0px 0px 10px 0px; text-indent: 0px; border: none;}

/* BDR */

div.module,div.modulebdr{ margin-bottom: 10px; background: url(topright_bdr.png) 100% 0 no-repeat; height: 1%;}

div.module div, div.modulebdr div { background: url(topleft_bdr.png) 0 0 no-repeat;}div.module div div, div.modulebdr div div { background: url(botright_bdr.png) 100% 100% no-repeat;}div.module div div div, div.modulebdr div div div { background: url(botleft_bdr.png) 0 100% no-repeat; padding: 12px 15px 15px 15px;}div.module div div div div, div.modulebdr div div div div { background: transparent none; padding: 0;}div.module h3, div.modulebdr h3 { margin: 0px 0px 10px 0px; text-indent: 0px; border: none;}

/* @end Modules */

/* @group Footer */

#footereflect {



height: 43px; text-align: center; color: #666;}#footereflect a,#footereflect a:hover { color: #666; font-size: 0.8em; text-decoration: none;}

#footer #mainlevel ul { cursor: default; display: inline; list-style-type: none; margin: 0; padding: 0;}

#footer #mainlevel li { cursor: default; display: inline; line-height: 12px; list-style-type: none; margin: 0; padding: 0 5px;}

#footer td { padding-top: 10px;}

/* @end */

/* @group Joomla Specific Styles */

table.contentpaneopen td.buttonheading,table.blog table.contentpaneopen td.buttonheading { padding: 0px; margin: 0;}

div.mosimage { margin: 5px;}

.pagenav { padding: 3px 5px 3px 3px;}

table.contenttoc { margin: 5px; padding: 1px; float: right;}table.contenttoc th { padding: 2px 10px;}table.contenttoc td { font-size: 0.9em; font-weight: normal; text-align: left;



padding: 2px 0px 2px 4px;}table.contenttoc a { text-decoration: none; line-height: 1em;}table.contentpaneopen { margin: 0; padding: 0; width: 100%;}

table.blog table.contentpaneopen td { padding: 0px 4px;}

/*Header for table content*/

td.sectiontableheader { font-weight: bold; padding: 4px;}

/*Alternating table rows*/

tr.sectiontableentry1 td,td.sectiontableentry1 { padding: 6px;}

tr.sectiontableentry2 td ,td.sectiontableentry2 { padding: 6px;

}/* Article Overflow */

div.blog_more { border-top: 1px solid #e6e6d4;}div.blog_more strong { position: relative;}div.blog_more ul li { list-style: none; background-image: none; padding: 0px;}div.blog_more ul li a { text-decoration: none; display: block; padding: 4px;}div.blog_more ul li a:hover { text-decoration: none;}

/* @end */

/* http://www.mysticwhalercruises.com/empty/empty_files/style.css */

/*----------------------------------------------------



MAIN FONT & BG COLOR----------------------------------------------------*/

body { color: #515151; background: #58a2ff url(pagebg.png) repeat-x fixed; font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans-serif;}

/*---------------------------------------------------- PRIMARY LINK COLORS----------------------------------------------------*/a { color: #2E69BF; text-decoration: underline;}a:hover { color: #2E69BF; text-decoration: none;}

/*---------------------------------------------------- READ MORE LINKS----------------------------------------------------*/

a.readon { font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-decoration: underline; float: right;}a.readon:hover { color: #333;}

/*---------------------------------------------------- HEADING STYLES----------------------------------------------------*/

.componentheading { color: #000; font-weight: bold; line-height: 1.35em; font-size: 1.75em; border-bottom: 1px solid #eee;}

/* CONTENT HEADINGS */td.contentheading { color: #2E69BF; text-decoration: none; font-weight: bold; font-size: 1.5em;}/* CONTENT HEADINGS (LINKED) */



a.contentpagetitle { text-decoration: none;}a.contentpagetitle:hover { color: #333;}

/* HEADINGS H1-H6 */

h1 { color: #333; font-style: normal; line-height: 1.9em; font-size: 1.6em;}

h2 { color: #2E69BF; font-weight: bold; line-height: 1.9em; font-size: 1.4em;}

h3 { color: #2E69BF; font-weight: bold; line-height: 1.7em; font-size: 1.1em;}

h4 { color: #666; font-weight: bold; line-height: 1.7em; font-size: 1.1em;}

h5 { color: #666; font-weight: bold; line-height: 1.4em; font-size: 1.1em;}

h6 { color: #666; font-weight: bold; line-height: 1.3em; font-size: 1em;}

/* CODE */pre { background: #F6F6F6; border: 1px dashed #999999; color: #000; display: block; font: 10px "Courier New", Courier, monospace; padding: 5px; white-space: normal;}



/*---------------------------------------------------- TOP NAV----------------------------------------------------*/

/* TOP NAV COLOR */#nav li a { color: #fff; font: bold 11px/20px Tahoma, Arial;}

/* TOP NAV HOVER COLOR */div#nav li:hover a,div#nav li.sfhover a /* IE */ { color: #3982FF;}

/* TOP NAV ACTIVE COLOR */div#nav li.active a { color: #FFF;}

/*---------------------------------------------------- PATHWAY----------------------------------------------------*/

/* PATHWAY TRAIL COLOR */span.pathway { color: #fff;}

/* PATHWAY LINK COLOR */span.pathway a,span.pathway a:hover { color: #6699CC;}

/*---------------------------------------------------- INNER CONTENT MAIN BG COLOR----------------------------------------------------*/

#wrap { background: #FFF;}

/*---------------------------------------------------- USER3 BG COLOR----------------------------------------------------*/

/* REQUIRES "-gradient" CLASS SUFFIX */#headerleader .module-gradient { background-color: #333;}



/*---------------------------------------------------- GLOBAL MODULE FONT SIZES----------------------------------------------------*/

#sidebar,#sidebar-2,.user4,.user4split2,.user5,.user5split2,.user6,.user6split2,.user7,.user7split2 { font-size: 1em;}

/*---------------------------------------------------- "light" MODULE SUFFIX----------------------------------------------------*/

/* "light" TEXT COLOR */div.modulelight { color: #333; }

/* "light" LINK COLOR */div.modulelight a,div.modulelight a:hover,div.modulelight a.latestnewslight,div.modulelight a.latestnewslight:hover,div.modulelight a.mostreadlight,div.modulelight a.mostreadlight:hover { color: #3a80f5;}/* "light" MODULE HEADING COLOR */div.modulelight h3 { color: #333; font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;}

/*---------------------------------------------------- "mid" MODULE SUFFIX----------------------------------------------------*/

/* "mid" TEXT COLOR */div.modulemid { color: #fff;}/* "mid" LINK COLOR */div.modulemid a,div.modulemid a:hover,div.modulemid a.latestnewsmid,div.modulemid a.latestnewsmid:hover,div.modulemid a.mostreadmid,div.modulemid a.mostreadmid:hover { color: #fff;}/* "mid" MODULE HEADING COLOR */div.modulemid h3 { color: #fff; font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;}

/*



---------------------------------------------------- "dark" MODULE SUFFIX----------------------------------------------------*/

/* "dark" TEXT COLOR */div.moduledark { color: #ccc;}

/* "dark" LINK COLOR */div.moduledark a,div.moduledark a:hover,div.moduledark a.latestnewsdark,div.moduledark a.latestnewsdark:hover,div.moduledark a.mostreaddark,div.moduledark a.mostreaddark:hover { color: #3a80f5;}

/* "dark" MODULE HEADING COLOR */div.moduledark h3 { color: #ccc; font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;}

/*---------------------------------------------------- "bdr" MODULE SUFFIX (default)----------------------------------------------------*/

/* "bdr" TEXT COLOR */div.module,div.modulebdr { color: #333;}

/* "bdr" LINK COLOR */div.module a,div.modulebdr a,div.module a:hover,div.modulebdr a:hover,div.module a.latestnews,div.modulebdr a.latestnewsbdr,div.module a.latestnews:hover,div.modulebdr a.latestnewsbdr:hover,div.module a.mostread,div.modulebdr a.mostreadbdr,div.module a.mostread:hover,div.modulebdr a.mostreadbdr:hover { color: #3a80f5;}

/* "bdr" MODULE HEADING COLOR */div.module h3, div.modulebdr h3 { color: #333; font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;}

/*---------------------------------------------------- FOOTER----------------------------------------------------*/

/*TEXT*/#footer p, #footer a { font: 11px Arial, Helvetica, sans-serif; color: #fff;



line-height: 43px;}

/*LINKS*/#footer a, #footer #mainlevel li a { font: 11px Arial, Helvetica, sans-serif; color: #fff;}#footer a:hover,#footer #mainlevel li a:hover,#footer #mainlevel li a#active_menu { color: #33CCFF; text-decoration: underline;}

/*---------------------------------------------------- JOOMLA! STYLES----------------------------------------------------*/

.createdate,.modifydate,.small { color: #BFBFBF; font-size: .75em;}


td.sectiontableheader { color: #FFF; background: #222;}/*Alternating table rows*/

tr.sectiontableentry1 td,td.sectiontableentry1 { background-color: #fdfdfd;}

tr.sectiontableentry2 td ,td.sectiontableentry2 { background-color: #f7f7f7;}

/* Article Overflow */

div.blog_more { border-top: 1px solid #e6e6d4;}

div.blog_more ul li a { border-bottom: 1px solid #eee;}

div.blog_more ul li a:hover { background-color: #f4f4f4;}

/* Article TOC Table */

table.contenttoc { color: #330; border: 1px solid #d6d6d6;



}table.contenttoc th { background-color: #ececec; color: #4f4f4f;}

div.mosimage_caption { font-size: 0.9em; color: #666;}

.pagenav { font-size: 1em; color: #73819C;}

As you can see there is a lot of stylesheet code in these stylesheets. The next thing we do is replace the linked stylesheets with embedded stylesheet code by wrapping the stylesheet code with the tags.

Once you do this, any links to images in the stylesheet code will be broken and your template may not show some or all of your images.



Step Five: Importing Your Images

In order for the images to show up again, we need to upload all images that are referenced in your template to Rezgo. This is because the images need to be linked via a relative link to your Rezgo images directory. This will ensure that during the secure checkout, that the reference to your images is secure and your customers won't receive a security warning during checkout.

I recommend you identify all the images in the stylesheets and create a list. Hint: to find images in your CSS, look for the url(...) element. Here is a list of all the images that we could find in the example template:

1. ../images/botright_mid.png

2. botleft_bdr.png

3. botleft_dark.png

4. botleft_light.png

5. botleft_mid.png

6. botright_bdr.png

7. botright_dark.png

8. botright_light.png

9. footerbg_wide.png

10. footerbg.png

11. footereflect_wide.png

12. footereflect.png

13. logo.png

14.pagebg.png

15.path_left_short.png

16.path_left_wide.png

17.pathway_right.png

18. tmenu_active_l.png

19. tmenu_active_r.png

20. tmenu_over_l.png

21. tmenu_over_r.png



22. tmenu_up_l.png

23. tmenu_up_r.png

24. topleft_bdr.png

25. topleft_dark.png

26. topleft_light.png

27. topleft_mid.png

28. topmenubg_wide.png

29. topmenubg.png

30. topright_bdr.png

31. topright_dark.png

32. topright_light.png

33. topright_mid.png

Now that you have identified the images that need to be uploaded, we need to download all the affected images from your website and store them locally on your machine. To download them from your website, you will need to append the base href to the file name, for example:

http://www.mysticwhalercruises.com/empty/empty_files/banner.jpg

Once you've downloaded them you can use the Advanced Editor in the "Settings > My Site Template" to upload the images to your Rezgo account. To upload images to your Rezgo account, use the “Open Advanced Editor”. In the Advanced Editor, look for the icon that looks like this:

When you click on this icon, you will open the Insert/Edit image dialog window. From here you can upload images by clicking on the “Upload” button.



Here is what your image list should look like once you've uploaded all the images:

Once uploaded, the image files will be located in a numbered image directory. For example, the local path to banner.jpg image will be /i/1924/banner.jpg.



Step Six: Updating Image Paths to Local Paths

Now that all the image have been updated, the paths to all images need to updated to point to the new folder on the Rezgo server. To verify that the path is correct and that the image exists, we recommend that you use the full path for now and then remove the domain portion after you have verified the images. The code for the template should look like this.


<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day Sails, Overnight Sailing Vacations and Charters" /> <title>File Not Found</title>

<style type="text/css" media="screen">

/* http://supplier.rezgo.com/i/1924/1024.css */

#wrap{width: 967px;margin-right: auto;margin-left: auto;position:relative;}#footer{position:relative;clear:both;margin:0px;text-align:center;background:url(http://supplier.rezgo.com/i/1924/footerbg_wide.png) no-repeat center bottom; width:967px;height:46px;}#footereflect {background:url(http://supplier.rezgo.com/i/1924/footereflect_wide.png) no-repeat center top; width:967px;height:43px;}.topbar {background: url(http://supplier.rezgo.com/i/1924/topmenubg_wide.png) no-repeat center top; width:967px;}.pathleft {width:956px; margin-left:0px;height:33px;float:left;background: url(http://supplier.rezgo.com/i/1924/path_left_wide.png) no-repeat left top;}

/* http://supplier.rezgo.com/i/1924/800.css */

body.bodyfluid #wrap {width: 776px;margin-right: auto;margin-left: auto;position: relative;}body.bodyfluid #footer {position: relative;clear: both;margin: 0px;text-align: center;background: url(http://supplier.rezgo.com/i/1924/footerbg.png) no-repeat center bottom;width: 776px;height: 46px;}body.bodyfluid #footereflect {background: url(http://supplier.rezgo.com/i/1924/footereflect.png) no-repeat center top;width: 776px;height: 43px;}body.bodyfluid .topbar {background: url(http://supplier.rezgo.com/i/1924/topmenubg.png) no-repeat center top;width: 776px;}body.bodyfluid .pathleft {width: 765px;height: 33px;margin-left: 0px;float: left;background: url(http://supplier.rezgo.com/i/1924/path_left_short.png) no-repeat left top;}

/* http://supplier.rezgo.com/i/1924/template_css.css */




div.ev_navigation { display:none;}

img.left {float: left;margin-right:5px;border:none;

}

img.right {float: right;margin-left:5px;border:none;

}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, hr,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}:focus {outline: 0;}table {border-collapse: collapse;border-spacing: 0;}html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear {background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content: '.';display: block;visibility: hidden;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}body.contentpane {background: #fff;}/* @end Reset */


body {line-height: 145%;font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans-serif;

}

/* Headings */

strong,em,b,i,abbr,.contentheading,.componentheading,.contentpagetitle,h1,h2,h3,h4,h5,h6 {



font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

}.componentheading {

margin: 0px 0px 10px 4px;}

table.blog table.contentpaneopen td.contentheading,td.contentheading {width: 99%;

}

h1,h2,h3,h4,h5,h6 {margin: 1.2em 0;

}ul.latestnews,ul.latestnewsdark,ul.latestnewslight,ul.latestnewsmid,ul.latestnewsbdr,ul.mostread,ul.mostreaddark,ul.mostreadlight,ul.mostreadmid,ul.mostreadbdr {

list-style: none;padding: 0px;margin: 0px;

}a.readon {

padding: 0px 0px 0px 4px;}


ul#mainlevel-sidenav {list-style: none;margin: 0;padding: 0;

}

ul#mainlevel-sidenav a,a.mainlevel-sidenav {text-decoration: none;line-height: 135%;font-weight: bold;

}

ul#mainlevel-sidenav a:hover {text-decoration: underline;

}


#sidebar a.mainlevel, #sidebar-2 a.mainlevel {text-decoration: none;line-height: 135%;font-weight: bold;

}

#sidebar a.mainlevel:hover, #sidebar-2 a.mainlevel:hover {text-decoration: underline;

}


#sidebar a.sublevel,#sidebar-2 a.sublevel {

text-decoration: underline;



padding-left: 4px;font-size: .9em;

}

#sidebar a.sublevel:hover, #sidebar-2 a.sublevel:hover {text-decoration: none;

}


p {margin: 10px 0px;

}

pre {display: block;font: 10px "Courier New", Courier, monospace;padding: 5px;white-space: normal;

}



#content ul li, #sidebar ul li,#sidebar-2 ul li{list-style-type: disc;}

#content ul li li,#sidebar ul li li,#sidebar-2 ul li li {list-style-type: circle;}




#sidebar ul.menu,#sidebar-2 ul.menu



{list-style-type: none;margin: 0;padding: 0;}

/* @end */


.topbar h1 {position: relative;background: url(http://supplier.rezgo.com/i/1924/logo.png) no-repeat 20px 0;padding: 0px;margin: 0px;

}

.topbar {position: relative;width: 100%;

}

#wrap {margin-top: 8px;

}

#main-body {clear: both;float: left;padding-bottom: 10px;position: relative;width: 75%;z-index: 100;

}

#content {float: right;width: 67%;

}

#sidebar {float: left;margin-right: -3px;width: 32.5%;

}

#sidebar-2 {float: right;margin-left: -3px;overflow: hidden;position: relative;width: 24.25%;

}

#sidebar .inside {padding: 10px 4px 10px 10px;

}

#sidebar-2 .inside {padding: 10px 10px 10px 4px;

}

#content .inside {padding: 10px 7px;



}

/* @end */

/* @group Navbar */

#nav {position: absolute;right: 1em;z-index: 500;

}

#nav ul {margin-top: 12px;list-style: none;

}

#nav a {float: none;

}

#nav li {float: left;height: 20px;margin: 0px 4px;padding-left: 5px;background: url(http://supplier.rezgo.com/i/1924/tmenu_up_l.png) no-repeat bottom

left;}

#nav li a {display: block;float: left;height: 20px;padding-right: 5px;text-decoration: none;background: url(http://supplier.rezgo.com/i/1924/tmenu_up_r.png) no-repeat bottom

right;}

div#nav li:hover, div#nav li.sfhover {background: url(http://supplier.rezgo.com/i/1924/tmenu_over_l.png) no-repeat bottom

left;}

div#nav li:hover a, div#nav li.sfhover a {background: url(http://supplier.rezgo.com/i/1924/tmenu_over_r.png) no-repeat bottom

right;}

div#nav li.active a {background: url(http://supplier.rezgo.com/i/1924/tmenu_active_r.png) no-repeat

bottom right;}

div#nav li.active {background: url(http://supplier.rezgo.com/i/1924/tmenu_active_l.png) no-repeat

bottom left;}/* @end Navbar */




#path {height: 33px;position: relative;width: 100%;

}

span.pathway {display: block;margin: 0 10px;line-height: 32px;font-size: 11px;

}

span.pathway a, span.pathway a:hover {line-height: 32px;font-size: 11px;

}

#path .pathleft .inside {margin-left: 10px;

}

.pathright {background: url(http://supplier.rezgo.com/i/1924/pathway_right.png) no-repeat left

top;float: right;height: 33px;padding-right: 0px;width: 11px;

}


.access {height: 21px;position: absolute;right: 1.7em;top: .54em;width: auto;

}

#access_buttons {height: 21px;margin-left: 7px;white-space: nowrap;width: 103px;

}

#access_buttons a {height: 21px;text-decoration: none;white-space: nowrap;width: 21px;

}



/* @end */



#headerleader .module-gradient {width: 100%;margin: 0px;padding: 0px;

}

#headerleader .module,#headerleader .modulelight,#headerleader .moduledark,#headerleader .modulemid,#headerleader .modulebdr {

margin: 8px;}

.user4split2,.user6split2 {float: left;overflow: hidden;width: 49%;

}

.user5split2,.user7split2 {float: right;overflow: hidden;width: 49%;

}

.user6,.user7,.user6split2,.user7split2 {overflow: hidden;padding-top: 10px;

}

#headerleader .module,#headerleader .module div {margin: 0;padding: 0;

}

/* LIGHT */

div.modulelight{

margin-bottom: 10px;background: url(http://supplier.rezgo.com/i/1924/topright_light.png) 100% 0 no-

repeat;height: 1%;

}

div.modulelight div {

background: url(http://supplier.rezgo.com/i/1924/topleft_light.png) 0 0 no-repeat;}



div.modulelight div div {background: url(http://supplier.rezgo.com/i/1924/botright_light.png) 100% 100% no-

repeat;}div.modulelight div div div {

background: url(http://supplier.rezgo.com/i/1924/botleft_light.png) 0 100% no-repeat;

padding: 12px 15px 15px 15px;}div.modulelight div div div div {

background: transparent none;padding: 0;

}div.modulelight h3 {

margin: 0px 0px 10px 0px;text-indent: 0px;border: none;

}

/* MID */

div.modulemid{

margin-bottom: 10px;background: url(http://supplier.rezgo.com/i/1924/topright_mid.png) 100% 0 no-repeat;height: 1%;

}

div.modulemid div {

background: url(http://supplier.rezgo.com/i/1924/topleft_mid.png) 0 0 no-repeat;}div.modulemid div div {

background: url(http://supplier.rezgo.com/i/1924/../images/botright_mid.png) 100% 100% no-r>peat;}div.modulemid div div div {

background: url(http://supplier.rezgo.com/i/1924/botleft_mid.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.modulemid div div div div {


}div.modulemid h3 {


}

/* DARK */

div.moduledark{

margin-bottom: 10px;background: url(http://supplier.rezgo.com/i/1924/topright_dark.png) 100% 0 no-

repeat;height: 1%;



}

div.moduledark div {

background: url(http://supplier.rezgo.com/i/1924/topleft_dark.png) 0 0 no-repeat;}div.moduledark div div {

background: url(http://supplier.rezgo.com/i/1924/botright_dark.png) 100% 100% no-repeat;}div.moduledark div div div {

background: url(http://supplier.rezgo.com/i/1924/botleft_dark.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.moduledark div div div div {


}div.moduledark h3 {


}

/* BDR */

div.module,div.modulebdr{

margin-bottom: 10px;background: url(http://supplier.rezgo.com/i/1924/topright_bdr.png) 100% 0 no-repeat;height: 1%;

}

div.module div, div.modulebdr div {

background: url(http://supplier.rezgo.com/i/1924/topleft_bdr.png) 0 0 no-repeat;}div.module div div, div.modulebdr div div {

background: url(http://supplier.rezgo.com/i/1924/botright_bdr.png) 100% 100% no-repeat;}div.module div div div, div.modulebdr div div div {

background: url(http://supplier.rezgo.com/i/1924/botleft_bdr.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.module div div div div, div.modulebdr div div div div {


}div.module h3, div.modulebdr h3 {


}

/* @end Modules */

/* @group Footer */

#footereflect {height: 43px;



text-align: center;color: #666;

}#footereflect a,#footereflect a:hover {

color: #666;font-size: 0.8em;text-decoration: none;

}

#footer #mainlevel ul {cursor: default;display: inline;list-style-type: none;margin: 0;padding: 0;

}

#footer #mainlevel li {cursor: default;display: inline;line-height: 12px;list-style-type: none;margin: 0;padding: 0 5px;

}

#footer td {padding-top: 10px;

}

/* @end */


table.contentpaneopen td.buttonheading,table.blog table.contentpaneopen td.buttonheading {

padding: 0px;margin: 0;

}

div.mosimage {margin: 5px;

}

.pagenav {padding: 3px 5px 3px 3px;

}

table.contenttoc {margin: 5px;padding: 1px;float: right;

}table.contenttoc th {

padding: 2px 10px;}table.contenttoc td {

font-size: 0.9em;font-weight: normal;



text-align: left;padding: 2px 0px 2px 4px;

}table.contenttoc a {

text-decoration: none;line-height: 1em;

}table.contentpaneopen {

margin: 0;padding: 0;width: 100%;

}

table.blog table.contentpaneopen td {padding: 0px 4px;

}


td.sectiontableheader {font-weight: bold;padding: 4px;

}


tr.sectiontableentry1 td,td.sectiontableentry1 {padding: 6px;

}

tr.sectiontableentry2 td ,td.sectiontableentry2 {padding: 6px;


div.blog_more {border-top: 1px solid #e6e6d4;

}div.blog_more strong {

position: relative;}div.blog_more ul li {

list-style: none;background-image: none;padding: 0px;

}div.blog_more ul li a {

text-decoration: none;display: block;padding: 4px;

}div.blog_more ul li a:hover {

text-decoration: none;}

/* @end */

/* http://supplier.rezgo.com/i/1924/style.css */

/*----------------------------------------------------



MAIN FONT & BG COLOR----------------------------------------------------*/

body {color: #515151;background: #58a2ff url(http://supplier.rezgo.com/i/1924/pagebg.png) repeat-x fixed;font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans-serif;

}

/*---------------------------------------------------- PRIMARY LINK COLORS----------------------------------------------------*/a {

color: #2E69BF;text-decoration: underline;

}a:hover {

color: #2E69BF;text-decoration: none;

}

/*---------------------------------------------------- READ MORE LINKS----------------------------------------------------*/

a.readon {font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;text-decoration: underline;float: right;

}a.readon:hover {

color: #333;}

/*---------------------------------------------------- HEADING STYLES----------------------------------------------------*/

.componentheading {color: #000;font-weight: bold;line-height: 1.35em;font-size: 1.75em;border-bottom: 1px solid #eee;

}

/* CONTENT HEADINGS */td.contentheading {

color: #2E69BF;text-decoration: none;font-weight: bold;font-size: 1.5em;

}/* CONTENT HEADINGS (LINKED) */



a.contentpagetitle {text-decoration: none;

}a.contentpagetitle:hover {

color: #333;}


h1 {color: #333;font-style: normal;line-height: 1.9em;font-size: 1.6em;

}

h2 {color: #2E69BF;font-weight: bold;line-height: 1.9em;font-size: 1.4em;

}


}

h4 {color: #666;font-weight: bold;line-height: 1.7em;font-size: 1.1em;

}


}

h6 {color: #666;font-weight: bold;line-height: 1.3em;font-size: 1em;

}

/* CODE */pre {

background: #F6F6F6;border: 1px dashed #999999;color: #000;display: block;font: 10px "Courier New", Courier, monospace;



padding: 5px;white-space: normal;

}

/*---------------------------------------------------- TOP NAV----------------------------------------------------*/

/* TOP NAV COLOR */#nav li a {

color: #fff;font: bold 11px/20px Tahoma, Arial;

}

/* TOP NAV HOVER COLOR */div#nav li:hover a,div#nav li.sfhover a /* IE */ {

color: #3982FF;}

/* TOP NAV ACTIVE COLOR */div#nav li.active a {

color: #FFF;}

/*---------------------------------------------------- PATHWAY----------------------------------------------------*/

/* PATHWAY TRAIL COLOR */span.pathway {

color: #fff;}

/* PATHWAY LINK COLOR */span.pathway a,span.pathway a:hover {

color: #6699CC;}


#wrap {



background: #FFF;}

/*---------------------------------------------------- USER3 BG COLOR----------------------------------------------------*/

/* REQUIRES "-gradient" CLASS SUFFIX */#headerleader .module-gradient {

background-color: #333;}


#sidebar,#sidebar-2,.user4,.user4split2,.user5,.user5split2,.user6,.user6split2,.user7,.user7split2 {

font-size: 1em;}


/* "light" TEXT COLOR */div.modulelight {

color: #333;}

/* "light" LINK COLOR */div.modulelight a,div.modulelight a:hover,div.modulelight a.latestnewslight,div.modulelight a.latestnewslight:hover,div.modulelight a.mostreadlight,div.modulelight a.mostreadlight:hover {

color: #3a80f5;}/* "light" MODULE HEADING COLOR */div.modulelight h3 {

color: #333;font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;

}

/*---------------------------------------------------- "mid" MODULE SUFFIX----------------------------------------------------



*/

/* "mid" TEXT COLOR */div.modulemid {

color: #fff;}/* "mid" LINK COLOR */div.modulemid a,div.modulemid a:hover,div.modulemid a.latestnewsmid,div.modulemid a.latestnewsmid:hover,div.modulemid a.mostreadmid,div.modulemid a.mostreadmid:hover {

color: #fff;}/* "mid" MODULE HEADING COLOR */div.modulemid h3 {

color: #fff;font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;

}

/*---------------------------------------------------- "dark" MODULE SUFFIX----------------------------------------------------*/

/* "dark" TEXT COLOR */div.moduledark {

color: #ccc;}

/* "dark" LINK COLOR */div.moduledark a,div.moduledark a:hover,div.moduledark a.latestnewsdark,div.moduledark a.latestnewsdark:hover,div.moduledark a.mostreaddark,div.moduledark a.mostreaddark:hover {

color: #3a80f5;}

/* "dark" MODULE HEADING COLOR */div.moduledark h3 {

color: #ccc;font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;

}


/* "bdr" TEXT COLOR */div.module,div.modulebdr {

color: #333;}

/* "bdr" LINK COLOR */div.module a,div.modulebdr a,div.module a:hover,div.modulebdr a:hover,div.module a.latestnews,div.modulebdr a.latestnewsbdr,



div.module a.latestnews:hover,div.modulebdr a.latestnewsbdr:hover,div.module a.mostread,div.modulebdr a.mostreadbdr,div.module a.mostread:hover,div.modulebdr a.mostreadbdr:hover {

color: #3a80f5;}

/* "bdr" MODULE HEADING COLOR */div.module h3, div.modulebdr h3 {


}

/*---------------------------------------------------- FOOTER----------------------------------------------------*/

/*TEXT*/#footer p, #footer a {

font: 11px Arial, Helvetica, sans-serif;color: #fff;line-height: 43px;

}

/*LINKS*/#footer a, #footer #mainlevel li a {

font: 11px Arial, Helvetica, sans-serif;color: #fff;

}#footer a:hover,#footer #mainlevel li a:hover,#footer #mainlevel li a#active_menu {

color: #33CCFF;text-decoration: underline;

}

/*---------------------------------------------------- JOOMLA! STYLES----------------------------------------------------*/

.createdate,.modifydate,.small {color: #BFBFBF;font-size: .75em;

}


td.sectiontableheader {color: #FFF;background: #222;

}/*Alternating table rows*/

tr.sectiontableentry1 td,td.sectiontableentry1 {background-color: #fdfdfd;

}



tr.sectiontableentry2 td ,td.sectiontableentry2 {background-color: #f7f7f7;

}



}

div.blog_more ul li a {border-bottom: 1px solid #eee;

}

div.blog_more ul li a:hover {background-color: #f4f4f4;

}


table.contenttoc {color: #330;border: 1px solid #d6d6d6;


background-color: #ececec;color: #4f4f4f;

}

div.mosimage_caption {font-size: 0.9em;color: #666;

}

.pagenav {font-size: 1em;color: #73819C;

}

</style>




<script type="text/javascript">

var prefsLoaded = false;



href="http://www.mysticwhalercruises.com/joomla/index.php/home"><span>Home</span></a></li></ul>


<div><div>

<div><div


<img src="http://supplier.rezgo.com/i/1924/banner.jpg" alt="banner.jpg" width="775" height="162" /></a>

</div> </div></div>

</div></div>

</div>



<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes" onclick="changeFontSize(1);return false;">

<img src="http://supplier.rezgo.com/i/1924/larger.png" alt="larger" width="20" height="20" border="0" /></a>

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Decrease font sizes" onclick="changeFontSize(-1);return false;">

<img src="http://supplier.rezgo.com/i/1924/smaller.png" alt="smaller" width="20" height="20" border="0" /></a>

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Revert styles to default" onclick="revertStyles(); return false;">

<img src="http://supplier.rezgo.com/i/1924/reset.png" alt="reset" width="20" height="20" border="0" /></a>

</span><span class="widthbuttons"><a

href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to narrow version" onclick="switchFixed();return false;">

<img src="http://supplier.rezgo.com/i/1924/fixed.png" alt="fixed-width" id="theme-fixed" height="20" width="20" border="0" /></a >

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to wider version" onclick="switchFluid();return false;" >

<img src="http://supplier.rezgo.com/i/1924/fluid.png" alt="fluid-width" id="theme-fluid" height="20" width="20" border="0" /></a ></span>

</div></div>


<div id="main-body"><div id="content"><div class="inside">

<table class="contentpaneopen"><tr>



<td class="contentheading" width="100%">


</tr></table>

<table class="contentpaneopen">


</td>

</tr>

</table><span class="article_separator"> </span>

</div></div><div id="sidebar"><div class="inside">


<div><div>



</div>

</div></div>

</div>



<div></div></div><div id="footereflect">

<div class="designer"><a href="http://www.joomlashack.com" title="Joomla Templates



by JoomlaShack">Joomla Template by Joomlashack</a></div></div></div></div></body></html>

As you can see, all the references to the images in the stylesheet portion of the code have been updated to reflect the absolute path to the images on Rezgo. The resulting template should look like this:



Step Seven: Formatting the Content area

Rezgo Needs at least 800 pixels of width to fit comfortably on the page. In this example, the content area, which is where the “File Not Found” message is located is not wide enough. We need to modify the template so that we remove the “Contact Us” portion on the side bar and widen the content area so that the Rezgo content can fit properly. In the case of this template, we will remove the following code for the side bar:

<div id="sidebar"><div class="inside">


<div><div>



</div>

</div></div>

</div></div></div>

We now need to expand the main content area to fill the full width of the template. To remove the content area, we need to delete the following code:

<div id=”content”><div class="inside"><table class="contentpaneopen"><tr>

<td class="contentheading" width="100%">File Not Found

</td></tr></table>

<table class="contentpaneopen"> <tr> <td valign="top"> <h1>We are sorry, the page you requested cannot be found.</h1> </td> </tr></table><span class="article_separator"> </span></div></div>



The resulting template should look like this:



Step Eight: Adding the Rezgo Tag

Now we are ready to add the Rezgo tag to the template and move it to the Rezgo account. In this case we need to add the [rezgo] to the following code:

<div id="main-body"><div style=”padding: 10px;”>[rezgo]</div></div>

In this case, we have added a div with some padding just keep the Rezgo content from spacing out nicely on the template. The resulting template looks like this:



Step Nine: Removing the Absolute Paths

In order for the security to work properly, all the images must reference a local image on image which means that we cannot have the absolute paths to the “http://” included the urls. Before we move the template to Rezgo, we have to remove any reference to “http://supplier.rezgo.com” from the stylesheet and local images. Once this is done, the template code will look like this:


<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day Sails, Overnight Sailing Vacations and Charters" /> <title>File Not Found</title>

<style type="text/css" media="screen">

/* /i/1924/1024.css */

#wrap{width: 967px;margin-right: auto;margin-left: auto;position:relative;}#footer{position:relative;clear:both;margin:0px;text-align:center;background:url(/i/1924/footerbg_wide.png) no-repeat center bottom; width:967px;height:46px;}#footereflect {background:url(/i/1924/footereflect_wide.png) no-repeat center top; width:967px;height:43px;}.topbar {background: url(/i/1924/topmenubg_wide.png) no-repeat center top; width:967px;}.pathleft {width:956px; margin-left:0px;height:33px;float:left;background: url(/i/1924/path_left_wide.png) no-repeat left top;}

/* /i/1924/800.css */

body.bodyfluid #wrap {width: 776px;margin-right: auto;margin-left: auto;position: relative;}body.bodyfluid #footer {position: relative;clear: both;margin: 0px;text-align: center;background: url(/i/1924/footerbg.png) no-repeat center bottom;width: 776px;height: 46px;}body.bodyfluid #footereflect {background: url(/i/1924/footereflect.png) no-repeat center top;width: 776px;height: 43px;}body.bodyfluid .topbar {background: url(/i/1924/topmenubg.png) no-repeat center top;width: 776px;}body.bodyfluid .pathleft {width: 765px;height: 33px;margin-left: 0px;float: left;background: url(/i/1924/path_left_short.png) no-repeat left top;}

/* /i/1924/template_css.css */


div.ev_navigation {


http://supplier.rezgo.com/


display:none;}

img.left {float: left;margin-right:5px;border:none;

}

img.right {float: right;margin-left:5px;border:none;

}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, hr,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}:focus {outline: 0;}table {border-collapse: collapse;border-spacing: 0;}html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear {background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content: '.';display: block;visibility: hidden;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}body.contentpane {background: #fff;}/* @end Reset */


body {line-height: 145%;font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans-serif;

}

/* Headings */

strong,em,b,i,abbr,.contentheading,.componentheading,.contentpagetitle,h1,h2,h3,h4,h5,h6 { font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;



}.componentheading {

margin: 0px 0px 10px 4px;}

table.blog table.contentpaneopen td.contentheading,td.contentheading {width: 99%;

}

h1,h2,h3,h4,h5,h6 {margin: 1.2em 0;

}ul.latestnews,ul.latestnewsdark,ul.latestnewslight,ul.latestnewsmid,ul.latestnewsbdr,ul.mostread,ul.mostreaddark,ul.mostreadlight,ul.mostreadmid,ul.mostreadbdr {

list-style: none;padding: 0px;margin: 0px;

}a.readon {

padding: 0px 0px 0px 4px;}


ul#mainlevel-sidenav {list-style: none;margin: 0;padding: 0;

}

ul#mainlevel-sidenav a,a.mainlevel-sidenav {text-decoration: none;line-height: 135%;font-weight: bold;

}

ul#mainlevel-sidenav a:hover {text-decoration: underline;

}


#sidebar a.mainlevel, #sidebar-2 a.mainlevel {text-decoration: none;line-height: 135%;font-weight: bold;

}

#sidebar a.mainlevel:hover, #sidebar-2 a.mainlevel:hover {text-decoration: underline;

}


#sidebar a.sublevel,#sidebar-2 a.sublevel {

text-decoration: underline;padding-left: 4px;font-size: .9em;

}



#sidebar a.sublevel:hover, #sidebar-2 a.sublevel:hover {text-decoration: none;

}


p {margin: 10px 0px;

}

pre {display: block;font: 10px "Courier New", Courier, monospace;padding: 5px;white-space: normal;

}



#content ul li, #sidebar ul li,#sidebar-2 ul li{list-style-type: disc;}

#content ul li li,#sidebar ul li li,#sidebar-2 ul li li {list-style-type: circle;}




#sidebar ul.menu,#sidebar-2 ul.menu{list-style-type: none;margin: 0;padding: 0;}



/* @end */


.topbar h1 {position: relative;background: url(/i/1924/logo.png) no-repeat 20px 0;padding: 0px;margin: 0px;

}

.topbar {position: relative;width: 100%;

}

#wrap {margin-top: 8px;

}

#main-body {clear: both;float: left;padding-bottom: 10px;position: relative;width: 75%;z-index: 100;

}

#content {float: right;width: 100%;

}

#sidebar {float: left;margin-right: -3px;width: 32.5%;

}

#sidebar-2 {float: right;margin-left: -3px;overflow: hidden;position: relative;width: 24.25%;

}

#sidebar .inside {padding: 10px 4px 10px 10px;

}

#sidebar-2 .inside {padding: 10px 10px 10px 4px;

}

#content .inside {padding: 10px 7px;

}



/* @end */

/* @group Navbar */

#nav {position: absolute;right: 1em;z-index: 500;

}

#nav ul {margin-top: 12px;list-style: none;

}

#nav a {float: none;

}

#nav li {float: left;height: 20px;margin: 0px 4px;padding-left: 5px;background: url(/i/1924/tmenu_up_l.png) no-repeat bottom left;

}

#nav li a {display: block;float: left;height: 20px;padding-right: 5px;text-decoration: none;background: url(/i/1924/tmenu_up_r.png) no-repeat bottom right;

}

div#nav li:hover, div#nav li.sfhover {background: url(/i/1924/tmenu_over_l.png) no-repeat bottom left;

}

div#nav li:hover a, div#nav li.sfhover a {background: url(/i/1924/tmenu_over_r.png) no-repeat bottom right;

}

div#nav li.active a {background: url(/i/1924/tmenu_active_r.png) no-repeat bottom right;

}

div#nav li.active {background: url(/i/1924/tmenu_active_l.png) no-repeat bottom left;

}/* @end Navbar */


#path {height: 33px;position: relative;width: 100%;

}



span.pathway {display: block;margin: 0 10px;line-height: 32px;font-size: 11px;

}

span.pathway a, span.pathway a:hover {line-height: 32px;font-size: 11px;

}

#path .pathleft .inside {margin-left: 10px;

}

.pathright {background: url(/i/1924/pathway_right.png) no-repeat left top;float: right;height: 33px;padding-right: 0px;width: 11px;

}


.access {height: 21px;position: absolute;right: 1.7em;top: .54em;width: auto;

}

#access_buttons {height: 21px;margin-left: 7px;white-space: nowrap;width: 103px;

}

#access_buttons a {height: 21px;text-decoration: none;white-space: nowrap;width: 21px;

}

/* @end */



#headerleader .module-gradient {width: 100%;margin: 0px;



padding: 0px;}

#headerleader .module,#headerleader .modulelight,#headerleader .moduledark,#headerleader .modulemid,#headerleader .modulebdr {

margin: 8px;}

.user4split2,.user6split2 {float: left;overflow: hidden;width: 49%;

}

.user5split2,.user7split2 {float: right;overflow: hidden;width: 49%;

}

.user6,.user7,.user6split2,.user7split2 {overflow: hidden;padding-top: 10px;

}

#headerleader .module,#headerleader .module div {margin: 0;padding: 0;

}

/* LIGHT */

div.modulelight{

margin-bottom: 10px;background: url(/i/1924/topright_light.png) 100% 0 no-repeat;height: 1%;

}

div.modulelight div {

background: url(/i/1924/topleft_light.png) 0 0 no-repeat;}div.modulelight div div {

background: url(/i/1924/botright_light.png) 100% 100% no-repeat;}div.modulelight div div div {

background: url(/i/1924/botleft_light.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.modulelight div div div div {


}



div.modulelight h3 {margin: 0px 0px 10px 0px;text-indent: 0px;border: none;

}

/* MID */

div.modulemid{

margin-bottom: 10px;background: url(/i/1924/topright_mid.png) 100% 0 no-repeat;height: 1%;

}

div.modulemid div {

background: url(/i/1924/topleft_mid.png) 0 0 no-repeat;}div.modulemid div div {

background: url(/i/1924/../images/botright_mid.png) 100% 100% no-r>peat;}div.modulemid div div div {

background: url(/i/1924/botleft_mid.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.modulemid div div div div {


}div.modulemid h3 {


}

/* DARK */

div.moduledark{

margin-bottom: 10px;background: url(/i/1924/topright_dark.png) 100% 0 no-repeat;height: 1%;

}

div.moduledark div {

background: url(/i/1924/topleft_dark.png) 0 0 no-repeat;}div.moduledark div div {

background: url(/i/1924/botright_dark.png) 100% 100% no-repeat;}div.moduledark div div div {

background: url(/i/1924/botleft_dark.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.moduledark div div div div {

background: transparent none;



padding: 0;}div.moduledark h3 {


}

/* BDR */

div.module,div.modulebdr{

margin-bottom: 10px;background: url(/i/1924/topright_bdr.png) 100% 0 no-repeat;height: 1%;

}

div.module div, div.modulebdr div {

background: url(/i/1924/topleft_bdr.png) 0 0 no-repeat;}div.module div div, div.modulebdr div div {

background: url(/i/1924/botright_bdr.png) 100% 100% no-repeat;}div.module div div div, div.modulebdr div div div {

background: url(/i/1924/botleft_bdr.png) 0 100% no-repeat;padding: 12px 15px 15px 15px;

}div.module div div div div, div.modulebdr div div div div {


}div.module h3, div.modulebdr h3 {


}

/* @end Modules */

/* @group Footer */

#footereflect {height: 43px;text-align: center;color: #666;

}#footereflect a,#footereflect a:hover {

color: #666;font-size: 0.8em;text-decoration: none;

}

#footer #mainlevel ul {cursor: default;display: inline;list-style-type: none;margin: 0;padding: 0;

}



#footer #mainlevel li {cursor: default;display: inline;line-height: 12px;list-style-type: none;margin: 0;padding: 0 5px;

}

#footer td {padding-top: 10px;

}

/* @end */


table.contentpaneopen td.buttonheading,table.blog table.contentpaneopen td.buttonheading {

padding: 0px;margin: 0;

}

div.mosimage {margin: 5px;

}

.pagenav {padding: 3px 5px 3px 3px;

}

table.contenttoc {margin: 5px;padding: 1px;float: right;


padding: 2px 10px;}table.contenttoc td {

font-size: 0.9em;font-weight: normal;text-align: left;padding: 2px 0px 2px 4px;

}table.contenttoc a {

text-decoration: none;line-height: 1em;

}table.contentpaneopen {

margin: 0;padding: 0;width: 100%;

}

table.blog table.contentpaneopen td {padding: 0px 4px;

}




td.sectiontableheader {font-weight: bold;padding: 4px;

}


tr.sectiontableentry1 td,td.sectiontableentry1 {padding: 6px;

}

tr.sectiontableentry2 td ,td.sectiontableentry2 {padding: 6px;



}div.blog_more strong {

position: relative;}div.blog_more ul li {

list-style: none;background-image: none;padding: 0px;

}div.blog_more ul li a {

text-decoration: none;display: block;padding: 4px;

}div.blog_more ul li a:hover {

text-decoration: none;}

/* @end */

/* /i/1924/style.css */

/*---------------------------------------------------- MAIN FONT & BG COLOR----------------------------------------------------*/

body {color: #515151;background: #58a2ff url(/i/1924/pagebg.png) repeat-x fixed;font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans-serif;

}

/*---------------------------------------------------- PRIMARY LINK COLORS----------------------------------------------------*/a {

color: #2E69BF;



text-decoration: underline;}a:hover {

color: #2E69BF;text-decoration: none;

}

/*---------------------------------------------------- READ MORE LINKS----------------------------------------------------*/

a.readon {font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;text-decoration: underline;float: right;

}a.readon:hover {

color: #333;}

/*---------------------------------------------------- HEADING STYLES----------------------------------------------------*/

.componentheading {color: #000;font-weight: bold;line-height: 1.35em;font-size: 1.75em;border-bottom: 1px solid #eee;

}

/* CONTENT HEADINGS */td.contentheading {

color: #2E69BF;text-decoration: none;font-weight: bold;font-size: 1.5em;

}/* CONTENT HEADINGS (LINKED) */a.contentpagetitle {

text-decoration: none;}a.contentpagetitle:hover {

color: #333;}


h1 {color: #333;font-style: normal;line-height: 1.9em;font-size: 1.6em;

}




}


}


}


}

h6 {color: #666;font-weight: bold;line-height: 1.3em;font-size: 1em;

}

/* CODE */pre {

background: #F6F6F6;border: 1px dashed #999999;color: #000;display: block;font: 10px "Courier New", Courier, monospace;padding: 5px;white-space: normal;

}

/*---------------------------------------------------- TOP NAV----------------------------------------------------*/

/* TOP NAV COLOR */#nav li a {

color: #fff;font: bold 11px/20px Tahoma, Arial;

}



/* TOP NAV HOVER COLOR */div#nav li:hover a,div#nav li.sfhover a /* IE */ {

color: #3982FF;}

/* TOP NAV ACTIVE COLOR */div#nav li.active a {

color: #FFF;}

/*---------------------------------------------------- PATHWAY----------------------------------------------------*/

/* PATHWAY TRAIL COLOR */span.pathway {

color: #fff;}

/* PATHWAY LINK COLOR */span.pathway a,span.pathway a:hover {

color: #6699CC;}


#wrap {background: #FFF;

}

/*---------------------------------------------------- USER3 BG COLOR----------------------------------------------------*/

/* REQUIRES "-gradient" CLASS SUFFIX */#headerleader .module-gradient {

background-color: #333;}




#sidebar,#sidebar-2,.user4,.user4split2,.user5,.user5split2,.user6,.user6split2,.user7,.user7split2 {

font-size: 1em;}


/* "light" TEXT COLOR */div.modulelight {

color: #333;}

/* "light" LINK COLOR */div.modulelight a,div.modulelight a:hover,div.modulelight a.latestnewslight,div.modulelight a.latestnewslight:hover,div.modulelight a.mostreadlight,div.modulelight a.mostreadlight:hover {

color: #3a80f5;}/* "light" MODULE HEADING COLOR */div.modulelight h3 {


}

/*---------------------------------------------------- "mid" MODULE SUFFIX----------------------------------------------------*/

/* "mid" TEXT COLOR */div.modulemid {

color: #fff;}/* "mid" LINK COLOR */div.modulemid a,div.modulemid a:hover,div.modulemid a.latestnewsmid,div.modulemid a.latestnewsmid:hover,div.modulemid a.mostreadmid,div.modulemid a.mostreadmid:hover {

color: #fff;}/* "mid" MODULE HEADING COLOR */div.modulemid h3 {

color: #fff;font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;



}

/*---------------------------------------------------- "dark" MODULE SUFFIX----------------------------------------------------*/

/* "dark" TEXT COLOR */div.moduledark {

color: #ccc;}

/* "dark" LINK COLOR */div.moduledark a,div.moduledark a:hover,div.moduledark a.latestnewsdark,div.moduledark a.latestnewsdark:hover,div.moduledark a.mostreaddark,div.moduledark a.mostreaddark:hover {

color: #3a80f5;}

/* "dark" MODULE HEADING COLOR */div.moduledark h3 {

color: #ccc;font: bold 1.2em/.7em "Helvetica Neue", Helvetica, Arial , sans-serif;

}


/* "bdr" TEXT COLOR */div.module,div.modulebdr {

color: #333;}

/* "bdr" LINK COLOR */div.module a,div.modulebdr a,div.module a:hover,div.modulebdr a:hover,div.module a.latestnews,div.modulebdr a.latestnewsbdr,div.module a.latestnews:hover,div.modulebdr a.latestnewsbdr:hover,div.module a.mostread,div.modulebdr a.mostreadbdr,div.module a.mostread:hover,div.modulebdr a.mostreadbdr:hover {

color: #3a80f5;}

/* "bdr" MODULE HEADING COLOR */div.module h3, div.modulebdr h3 {


}

/*---------------------------------------------------- FOOTER----------------------------------------------------



*/

/*TEXT*/#footer p, #footer a {

font: 11px Arial, Helvetica, sans-serif;color: #fff;line-height: 43px;

}

/*LINKS*/#footer a, #footer #mainlevel li a {

font: 11px Arial, Helvetica, sans-serif;color: #fff;

}#footer a:hover,#footer #mainlevel li a:hover,#footer #mainlevel li a#active_menu {

color: #33CCFF;text-decoration: underline;

}

/*---------------------------------------------------- JOOMLA! STYLES----------------------------------------------------*/

.createdate,.modifydate,.small {color: #BFBFBF;font-size: .75em;

}


td.sectiontableheader {color: #FFF;background: #222;

}/*Alternating table rows*/

tr.sectiontableentry1 td,td.sectiontableentry1 {background-color: #fdfdfd;

}

tr.sectiontableentry2 td ,td.sectiontableentry2 {background-color: #f7f7f7;

}



}

div.blog_more ul li a {border-bottom: 1px solid #eee;

}

div.blog_more ul li a:hover {background-color: #f4f4f4;



}


table.contenttoc {color: #330;border: 1px solid #d6d6d6;


background-color: #ececec;color: #4f4f4f;

}

div.mosimage_caption {font-size: 0.9em;color: #666;

}

.pagenav {font-size: 1em;color: #73819C;

}

</style>




<script type="text/javascript">

var prefsLoaded = false;var defaultFontSize = 76;var currentFontSize = defaultFontSize;

function revertStyles(){currentFontSize = defaultFontSize;changeFontSize(0);

}

function switchFluid(){if(currentStyle == "Fluid"){

setWidth("Fixed");}

}function switchFixed(){

if(currentStyle == "Fixed"){setWidth("Fluid");

}



}

function setWidth(width){d=new Date();flash=Math.round(Math.random()*d.getTime());if(width != "Fixed"){

document.body.className = 'bodyfluid';currentStyle = "Fluid";

}else{document.body.className = '';currentStyle = "Fixed";

}}

function changeFontSize(sizeDifference){currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

if(currentFontSize > 100){currentFontSize = 100;

}else if(currentFontSize < 60){currentFontSize = 60;

}

setFontSize(currentFontSize);};

function setFontSize(fontSize){var stObj = (document.getElementById) ? document.getElementById('content_area') :

document.all('content_area');document.body.style.fontSize = fontSize + '%';

//alert (document.body.style.fontSize);};

function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/";};

function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null;};

window.onunload = saveSettings;

function saveSettings(){ createCookie("fontSize", currentFontSize, 365);



createCookie("pageWidth", currentStyle, 365);}

</script>


</style>


if(!prefsLoaded){



}

}</script>

</head><body><div id="wrap"><div id="wrap-inner"><div class="topbar">

<div id="nav"><ul class="menu-nav"><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/2009-calendar/cat.listevents/2009/11/7/-"><span>2009 Calendar</span></a></li><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/cruise-and-cabin-rates"><span>Cabins and Rates</span></a></li><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/gift-certificates"><span>Gift Certificates</span></a></li><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/home"><span>Home</span></a></li></ul>


<div><div>

<div><div


<img src="/i/1924/banner.jpg" alt="banner.jpg" width="775" height="162" /></a>

</div> </div></div>



</div></div>

</div>



<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes" onclick="changeFontSize(1);return false;">

<img src="/i/1924/larger.png" alt="larger" width="20" height="20" border="0" /></a><a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Decrease font

sizes" onclick="changeFontSize(-1);return false;"><img src="/i/1924/smaller.png" alt="smaller" width="20" height="20" border="0"

/></a><a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Revert styles

to default" onclick="revertStyles(); return false;"><img src="/i/1924/reset.png" alt="reset" width="20" height="20" border="0" /></a></span><span class="widthbuttons"><a

href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to narrow version" onclick="switchFixed();return false;">

<img src="/i/1924/fixed.png" alt="fixed-width" id="theme-fixed" height="20" width="20" border="0" /></a >

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to wider version" onclick="switchFluid();return false;" >

<img src="/i/1924/fluid.png" alt="fluid-width" id="theme-fluid" height="20" width="20" border="0" /></a ></span>

</div></div>


<div id="main-body"><div style="padding: 10px;">[rezgo]</div></div>

<script type="text/javascript">setWidthFont();</script>


<div></div></div><div id="footereflect">

<div class="designer"><a href="http://www.joomlashack.com" title="Joomla Templates by JoomlaShack">Joomla Template by Joomlashack</a></div></div></div></div></body></html>



All image src and urls to images will look like this: /i/1924/fluid.png

Be sure to save your template at this point in case you need to modify it later.

Step Ten: Moving your Template to Rezgo

Before you copy the template to your Rezgo account, modify the page title and the keywords and description of the template so that they match your booking site. In the page title, for example, we recommend adding the [navigation] tag. This tag will display the tour name of the tour being displayed at the time and improve your SEO.

The final step is to copy and paste your code to the Rezgo Settings > My Site Template. Paste the code into the “My Current Template” text area:



Be sure to click on the “Save Changes” button. Once you have pasted and saved your template code, click on the “Preview Site” link in the upper right corner of the page. The resulting Rezgo site will look like this:

Once you have updated your template, you should not need to modify the template again unless you change or adjust the design of your website. We hope you have found this tutorial to be useful and suggest that if you consult with your web designer to ensure that your template is simplified well before you move it to Rezgo. In our experience the simpler the template, the easier the integration.


integrating a joomla template into rezgo

Documents