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 90

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.........................................................5
Step Two: Preparing your base template.................................................................................... 6
Step Three: Changing relative paths to absolute paths............................................................ 14
Step Four: Embedding Styles....................................................................................................18
Step Five: Importing Your Images............................................................................................. 37
Step Six: Updating Image Paths to Local Paths....................................................................... 40
Step Seven: Formatting the Content area.................................................................................64
Step Eight: Adding the Rezgo Tag............................................................................................ 66
Step Nine: Removing the Absolute Paths................................................................................. 67
Step Ten: Moving your Template to Rezgo............................................................................... 89
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.

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>

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

.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>
<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:info@mysticwhaler.com"
mce_href="mailto:info@mysticwhaler.com">info@mysticwhaler.com</A> </P>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
Country" />

<link rel="stylesheet"
href="http://www.mysticwhalercruises.com/empty/empty_files/system.css" type="text/css" />
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" />
href="http://www.mysticwhalercruises.com/empty/empty_files/template_css.css"
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"


</style>


</style>

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

height:44px;}
</style>

if(!prefsLoaded){
prefsLoaded = true;
}
}
</script>
</head>
<body>
<div id="wrap">
<div>
<div id="nav">
<ul><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/2009-
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
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>
<div>
<div align="center">
<img src="http://www.mysticwhalercruises.com/empty/empty_files/banner.jpg"

alt="banner.jpg" width="775" height="162" /></a>
</div> </div>
</div>
</div>
</div>
</div>
<div id="path"><div><div></div>
<div>
<span>
<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes"

<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"
<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"
</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="content"><div>
<table>
<tr>
<td width="100%">
</tr>
</table>
<table>
<tr>
<td valign="top">
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
setWidthFont();
</script>
<div id="footer">
<div></div>
</div>
<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:

<head>
Country" />

media="screen" />



</style>

</style>

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

height:44px;}
</style>
if(!prefsLoaded){
prefsLoaded = true;
}
}
</script>
</head>
<body>
<div id="wrap">
<div>
<div id="nav">
<ul><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/2009-
/ul>
</div>
<h1> </h1>
</div>
<div id="headerleader"> <div>
<div>

<div>
<div>
<div align="center">
<img src="http://www.mysticwhalercruises.com/empty/empty_files/banner.jpg"
alt="banner.jpg" width="775" height="162" /></a>
</div> </div>
</div>
</div>
</div>
</div>
<div id="path"><div><div></div>
<div>
<span>
<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes"

<img src="http://www.mysticwhalercruises.com/empty/empty_files/larger.png" alt="larger"
<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"
<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"
</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 >

<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="content"><div>
<table>
<tr>
<td width="100%">
</tr>
</table>
<table>
<tr>

<td valign="top">
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
setWidthFont();
</script>
<div id="footer">
<div></div>
</div>
<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:
media="screen" />

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

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

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

}
/*Sublevel Support*/
#sidebar a.sublevel,
#sidebar-2 a.sublevel
{
padding-left: 4px;
font-size: .9em;
}
#sidebar a.sublevel:hover, #sidebar-2 a.sublevel:hover {

}
/* 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;}

#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 */

#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 {
}
#sidebar-2 .inside {
}
#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;
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;
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%;
}
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;
}
div.modulelight div div div div {
background: transparent none;
padding: 0;
}
div.modulelight h3 {
text-indent: 0px;
border: none;
}
/* MID */
div.modulemid
{
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;
}
div.modulemid div div div div {
padding: 0;
}
div.modulemid h3 {
text-indent: 0px;
border: none;
}
/* DARK */

div.moduledark
{
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;
}
div.moduledark div div div div {
padding: 0;
}
div.moduledark h3 {
text-indent: 0px;
border: none;
}
/* BDR */
div.module,div.modulebdr
{
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;
}
div.module div div div div, div.modulebdr div div div div {
padding: 0;
}
div.module h3, div.modulebdr h3 {
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;
}
#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;
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 {
}
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;
}
table.contenttoc a {
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 {
display: block;
padding: 4px;
}
div.blog_more ul li a:hover {
}
/* @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;
}
/*
----------------------------------------------------
PRIMARY LINK COLORS
----------------------------------------------------
*/
a {
color: #2E69BF;
}
a:hover {
color: #2E69BF;
}
/*
----------------------------------------------------
READ MORE LINKS
----------------------------------------------------
*/
a.readon {
font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
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;
font-weight: bold;
font-size: 1.5em;

}
/* CONTENT HEADINGS (LINKED) */
a.contentpagetitle {
}
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;
padding: 5px;

}
/*
----------------------------------------------------
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 */

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


background-color: #333;
}
/*
----------------------------------------------------
GLOBAL MODULE FONT SIZES
----------------------------------------------------
*/
#sidebar,#sidebar-2,
.user4,.user4split2,
.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 */
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;
}

/*
----------------------------------------------------
"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;
}
/*
----------------------------------------------------
"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 */

color: #333;
}
/*
----------------------------------------------------
FOOTER
----------------------------------------------------
*/
/*TEXT*/
#footer p, #footer a {

font: 11px Arial, Helvetica, sans-serif;

color: #fff;
line-height: 43px;
}
/*LINKS*/
#footer a, #footer #mainlevel li a {
color: #fff;
}
#footer a:hover,
#footer #mainlevel li a:hover,
#footer #mainlevel li a#active_menu {
color: #33CCFF;
}
/*
----------------------------------------------------
JOOMLA! STYLES
----------------------------------------------------
*/
.createdate,.modifydate,.small {
color: #BFBFBF;
font-size: .75em;
}
color: #FFF;
background: #222;
}
background-color: #fdfdfd;
}
background-color: #f7f7f7;
}
div.blog_more {
}
}
}
/* Article TOC Table */
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;
}
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.

<head>
Country" />

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

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;}
url(http://supplier.rezgo.com/i/1924/path_left_wide.png) no-repeat left top;}
/* http://supplier.rezgo.com/i/1924/800.css */

relative;}
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;}
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 {
}
img.right {
}

b, u, i, center,
/* @end Reset */
body {
line-height: 145%;
}
/* Headings */
strong,
em,b,
i,
abbr,
.contentheading,
.componentheading,
.contentpagetitle,
h1,h2,h3,h4,h5,h6 {

}
.componentheading {
}

width: 99%;
}
h1,h2,h3,h4,h5,h6 {
margin: 1.2em 0;
}
list-style: none;
padding: 0px;
margin: 0px;
}
a.readon {
}
list-style: none;
margin: 0;
padding: 0;
}
line-height: 135%;
font-weight: bold;
}
}

line-height: 135%;
font-weight: bold;
}

}
{

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

}
/* Lists */
/* Ordered Lists */
p {
margin: 10px 0px;
}
pre {
display: block;
padding: 5px;
}
/* Lists */

#content ul li,
#sidebar ul li,
#sidebar-2 ul li
#content ul li li,
#sidebar ul li li,
#sidebar-2 ul li li
/* Ordered Lists */


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

/* @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;
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 {
}
}
#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;
background: url(http://supplier.rezgo.com/i/1924/tmenu_up_r.png) no-repeat bottom
right;
}

background: url(http://supplier.rezgo.com/i/1924/tmenu_over_l.png) no-repeat bottom
left;
}

background: url(http://supplier.rezgo.com/i/1924/tmenu_over_r.png) no-repeat bottom
right;
}
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;
}

line-height: 32px;
font-size: 11px;
}

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;
width: 103px;
}
#access_buttons a {
height: 21px;
width: 21px;
}

/* @end */
width: 100%;
margin: 0px;
padding: 0px;
}
margin: 8px;
}
float: left;
overflow: hidden;
width: 49%;
}
float: right;
overflow: hidden;
width: 49%;
}
overflow: hidden;
padding-top: 10px;
}

margin: 0;
padding: 0;
}
/* LIGHT */
div.modulelight
{
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;
}


background: url(http://supplier.rezgo.com/i/1924/botright_light.png) 100% 100% no-
repeat;
}
background: url(http://supplier.rezgo.com/i/1924/botleft_light.png) 0 100% no-
repeat;
}
padding: 0;
}
text-indent: 0px;
border: none;
}
/* MID */
div.modulemid
{
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;
}
background: url(http://supplier.rezgo.com/i/1924/../images/botright_mid.png) 100%
100% no-r>peat;
}
background: url(http://supplier.rezgo.com/i/1924/botleft_mid.png) 0 100% no-repeat;
}
padding: 0;
}
div.modulemid h3 {
text-indent: 0px;
border: none;
}
/* DARK */
div.moduledark
{
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;
}
background: url(http://supplier.rezgo.com/i/1924/botright_dark.png) 100% 100% no-
repeat;
}
background: url(http://supplier.rezgo.com/i/1924/botleft_dark.png) 0 100% no-repeat;
}
padding: 0;
}
div.moduledark h3 {
text-indent: 0px;
border: none;
}
/* BDR */
{
background: url(http://supplier.rezgo.com/i/1924/topright_bdr.png) 100% 0 no-repeat;
height: 1%;
}

{
background: url(http://supplier.rezgo.com/i/1924/topleft_bdr.png) 0 0 no-repeat;
}
background: url(http://supplier.rezgo.com/i/1924/botright_bdr.png) 100% 100% no-
repeat;
}
background: url(http://supplier.rezgo.com/i/1924/botleft_bdr.png) 0 100% no-repeat;
}
padding: 0;
}
text-indent: 0px;
border: none;
}
/* @end Modules */
/* @group Footer */
#footereflect {
height: 43px;

text-align: center;
color: #666;
}
color: #666;
font-size: 0.8em;
}
cursor: default;
display: inline;
margin: 0;
padding: 0;
}
cursor: default;
display: inline;
line-height: 12px;
margin: 0;
padding: 0 5px;
}
#footer td {
padding-top: 10px;
}
/* @end */
padding: 0px;
margin: 0;
}
div.mosimage {
margin: 5px;
}
.pagenav {
}
table.contenttoc {
margin: 5px;
padding: 1px;
float: right;
}
padding: 2px 10px;
}
font-size: 0.9em;

text-align: left;
}
line-height: 1em;
}
margin: 0;
padding: 0;
width: 100%;
}
padding: 0px 4px;
}
font-weight: bold;
padding: 4px;
}
padding: 6px;
}
padding: 6px;
}
div.blog_more {
}
position: relative;
}
list-style: none;
padding: 0px;
}
display: block;
padding: 4px;
}
}
/* @end */
/* http://supplier.rezgo.com/i/1924/style.css */
/*
----------------------------------------------------


----------------------------------------------------
*/
body {
color: #515151;
background: #58a2ff url(http://supplier.rezgo.com/i/1924/pagebg.png) repeat-x fixed;
}
/*
----------------------------------------------------
PRIMARY LINK COLORS
----------------------------------------------------
*/
a {
color: #2E69BF;
}
a:hover {
color: #2E69BF;
}
/*
----------------------------------------------------
READ MORE LINKS
----------------------------------------------------
*/
a.readon {
float: right;
}
a.readon:hover {
color: #333;
}
/*
----------------------------------------------------
HEADING STYLES
----------------------------------------------------
*/
.componentheading {
color: #000;
font-weight: bold;
font-size: 1.75em;
}
td.contentheading {
color: #2E69BF;
font-weight: bold;
font-size: 1.5em;
}

}
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;
}
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 {
color: #000;
display: block;

padding: 5px;
}
/*
----------------------------------------------------
TOP NAV
----------------------------------------------------
*/
/* TOP NAV COLOR */

#nav li a {
color: #fff;
}

div#nav li:hover a,
color: #3982FF;
}

color: #FFF;
}
/*
----------------------------------------------------
PATHWAY
----------------------------------------------------
*/

span.pathway {
color: #fff;
}

span.pathway a,
color: #6699CC;
}
/*
----------------------------------------------------
----------------------------------------------------
*/
#wrap {

background: #FFF;
}
/*
----------------------------------------------------
USER3 BG COLOR
----------------------------------------------------
*/

}
/*
----------------------------------------------------
----------------------------------------------------
*/
font-size: 1em;
}
/*
----------------------------------------------------
----------------------------------------------------
*/

div.modulelight {
color: #333;
}

color: #3a80f5;
}
color: #333;
}
/*
----------------------------------------------------
"mid" MODULE SUFFIX
----------------------------------------------------

*/

div.modulemid {
color: #fff;
}
color: #fff;
}
div.modulemid h3 {
color: #fff;
}
/*
----------------------------------------------------
----------------------------------------------------
*/

div.moduledark {
color: #ccc;
}

{
color: #3a80f5;
}

div.moduledark h3 {
color: #ccc;
}
/*
----------------------------------------------------
----------------------------------------------------
*/

color: #333;
}



color: #3a80f5;
}

color: #333;
}
/*
----------------------------------------------------
FOOTER
----------------------------------------------------
*/
/*TEXT*/
color: #fff;
line-height: 43px;
}
/*LINKS*/
color: #fff;
}
#footer a:hover,
color: #33CCFF;
}
/*
----------------------------------------------------
JOOMLA! STYLES
----------------------------------------------------
*/
color: #BFBFBF;
font-size: .75em;
}
color: #FFF;
background: #222;
}
}

}
div.blog_more {
}
}
}
table.contenttoc {
color: #330;
}
color: #4f4f4f;
}
font-size: 0.9em;
color: #666;
}
.pagenav {
font-size: 1em;
color: #73819C;
}
</style>

</style>

</style>

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

height:44px;}
</style>
if(!prefsLoaded){
prefsLoaded = true;
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul class="menu-nav"><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/2009-

/ul>
</div>
<h1> </h1>
</div>
<div>
<div>
<div>
<div
align="center">
<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"
<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"
</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 >

<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="content"><div class="inside">
<tr>

</tr>
</table>
<tr>
<td valign="top">
</td>
</tr>
</table>
</div>
</div>
<div id="sidebar">
<div>
<div>
<div>
<h3>Contact Us</h3>
<P style="LINE-
</div>
</div>
</div>
</div>
</div>
</div>
</div>
setWidthFont();
</script>
<div id="footer">
<div></div>
</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>
<div>
<div>
<h3>Contact Us</h3>
<P style="LINE-
</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”>
<tr>
File Not Found
</td>
</tr>
</table>
<tr>
<td valign="top">
</td>
</tr>
</table>
</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 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:

<head>
Country" />

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

align:center;background:url(/i/1924/footerbg_wide.png) no-repeat center bottom;
#footereflect {background:url(/i/1924/footereflect_wide.png) no-repeat center top;
.topbar {background: url(/i/1924/topmenubg_wide.png) no-repeat center top; width:967px;}
url(/i/1924/path_left_wide.png) no-repeat left top;}
/* /i/1924/800.css */

relative;}
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;}
left;background: url(/i/1924/path_left_short.png) no-repeat left top;}
/* /i/1924/template_css.css */

div.ev_navigation {
display:none;
}
img.left {
}
img.right {
}

b, u, i, center,
/* @end Reset */
body {
line-height: 145%;
}
/* Headings */
strong,
em,b,
i,
abbr,
.contentheading,
.componentheading,
.contentpagetitle,
h1,h2,h3,h4,h5,h6 {

}
.componentheading {
}

width: 99%;
}
h1,h2,h3,h4,h5,h6 {
margin: 1.2em 0;
}
list-style: none;
padding: 0px;
margin: 0px;
}
a.readon {
}
list-style: none;
margin: 0;
padding: 0;
}
line-height: 135%;
font-weight: bold;
}
}

line-height: 135%;
font-weight: bold;
}

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


}
/* Lists */
/* Ordered Lists */
p {
margin: 10px 0px;
}
pre {
display: block;
padding: 5px;
}
/* Lists */

#content ul li,
#sidebar ul li,
#sidebar-2 ul li
#content ul li li,
#sidebar ul li li,
#sidebar-2 ul li li
/* Ordered Lists */


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

/* @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;
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 {
}
}
#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;
background: url(/i/1924/tmenu_up_r.png) no-repeat bottom right;
}

background: url(/i/1924/tmenu_over_l.png) no-repeat bottom left;
}

background: url(/i/1924/tmenu_over_r.png) no-repeat bottom right;
}
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;
}

line-height: 32px;
font-size: 11px;
}

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;
width: 103px;
}
#access_buttons a {
height: 21px;
width: 21px;
}
/* @end */
width: 100%;

margin: 0px;
padding: 0px;
}
margin: 8px;
}
float: left;
overflow: hidden;
width: 49%;
}
float: right;
overflow: hidden;
width: 49%;
}
overflow: hidden;
padding-top: 10px;
}

margin: 0;
padding: 0;
}
/* LIGHT */
div.modulelight
{
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;
}
background: url(/i/1924/botright_light.png) 100% 100% no-repeat;
}
background: url(/i/1924/botleft_light.png) 0 100% no-repeat;
}
padding: 0;

}
text-indent: 0px;
border: none;
}
/* MID */
div.modulemid
{
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;
}
background: url(/i/1924/../images/botright_mid.png) 100% 100% no-r>peat;
}
background: url(/i/1924/botleft_mid.png) 0 100% no-repeat;
}
padding: 0;
}
div.modulemid h3 {
text-indent: 0px;
border: none;
}
/* DARK */
div.moduledark
{
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;
}
background: url(/i/1924/botright_dark.png) 100% 100% no-repeat;
}
background: url(/i/1924/botleft_dark.png) 0 100% no-repeat;
}


padding: 0;
}
div.moduledark h3 {
text-indent: 0px;
border: none;
}
/* BDR */
{
background: url(/i/1924/topright_bdr.png) 100% 0 no-repeat;
height: 1%;
}

{
background: url(/i/1924/topleft_bdr.png) 0 0 no-repeat;
}
background: url(/i/1924/botright_bdr.png) 100% 100% no-repeat;
}
background: url(/i/1924/botleft_bdr.png) 0 100% no-repeat;
}
padding: 0;
}
text-indent: 0px;
border: none;
}
/* @end Modules */
/* @group Footer */
#footereflect {
height: 43px;
text-align: center;
color: #666;
}
color: #666;
font-size: 0.8em;
}
cursor: default;
display: inline;
margin: 0;
padding: 0;

cursor: default;
display: inline;
line-height: 12px;
margin: 0;
padding: 0 5px;
}
#footer td {
padding-top: 10px;
}
/* @end */
padding: 0px;
margin: 0;
}
div.mosimage {
margin: 5px;
}
.pagenav {
}
table.contenttoc {
margin: 5px;
padding: 1px;
float: right;
}
padding: 2px 10px;
}
font-size: 0.9em;
text-align: left;
}
line-height: 1em;
}
margin: 0;
padding: 0;
width: 100%;
}
padding: 0px 4px;
}

font-weight: bold;
padding: 4px;
}
padding: 6px;
}
padding: 6px;
}
div.blog_more {
}
position: relative;
}
list-style: none;
padding: 0px;
}
display: block;
padding: 4px;
}
}
/* @end */
/* /i/1924/style.css */
/*
----------------------------------------------------
----------------------------------------------------
*/
body {
color: #515151;
background: #58a2ff url(/i/1924/pagebg.png) repeat-x fixed;
}
/*
----------------------------------------------------
PRIMARY LINK COLORS
----------------------------------------------------
*/
a {

color: #2E69BF;
}
a:hover {
color: #2E69BF;
}
/*
----------------------------------------------------
READ MORE LINKS
----------------------------------------------------
*/
a.readon {
float: right;
}
a.readon:hover {
color: #333;
}
/*
----------------------------------------------------
HEADING STYLES
----------------------------------------------------
*/
.componentheading {
color: #000;
font-weight: bold;
font-size: 1.75em;
}
td.contentheading {
color: #2E69BF;
font-weight: bold;
font-size: 1.5em;
}
}
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;
}
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 {
color: #000;
display: block;
padding: 5px;
}
/*
----------------------------------------------------
TOP NAV
----------------------------------------------------
*/
/* TOP NAV COLOR */

#nav li a {
color: #fff;


div#nav li:hover a,
color: #3982FF;
}

color: #FFF;
}
/*
----------------------------------------------------
PATHWAY
----------------------------------------------------
*/

span.pathway {
color: #fff;
}

span.pathway a,
color: #6699CC;
}
/*
----------------------------------------------------
----------------------------------------------------
*/
#wrap {
background: #FFF;
}
/*
----------------------------------------------------
USER3 BG COLOR
----------------------------------------------------
*/

}

/*
----------------------------------------------------
----------------------------------------------------
*/
font-size: 1em;
}
/*
----------------------------------------------------
----------------------------------------------------
*/

div.modulelight {
color: #333;
}

color: #3a80f5;
}
color: #333;
}
/*
----------------------------------------------------
"mid" MODULE SUFFIX
----------------------------------------------------
*/

div.modulemid {
color: #fff;
}
color: #fff;
}
div.modulemid h3 {
color: #fff;


}
/*
----------------------------------------------------
----------------------------------------------------
*/

div.moduledark {
color: #ccc;
}

{
color: #3a80f5;
}

div.moduledark h3 {
color: #ccc;
}
/*
----------------------------------------------------
----------------------------------------------------
*/

color: #333;
}

color: #3a80f5;
}

color: #333;
}
/*
----------------------------------------------------
FOOTER

----------------------------------------------------
*/
/*TEXT*/
color: #fff;
line-height: 43px;
}
/*LINKS*/
color: #fff;
}
#footer a:hover,
color: #33CCFF;
}
/*
----------------------------------------------------
JOOMLA! STYLES
----------------------------------------------------
*/
color: #BFBFBF;
font-size: .75em;
}
color: #FFF;
background: #222;
}
}
}
div.blog_more {
}
}

}
table.contenttoc {
color: #330;
}
color: #4f4f4f;
}
font-size: 0.9em;
color: #666;
}
.pagenav {
font-size: 1em;
color: #73819C;
}
</style>

</style>

</style>

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

}else if(currentFontSize < 60){
}
};
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>

height:44px;}
</style>
if(!prefsLoaded){
prefsLoaded = true;
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul class="menu-nav"><li><a href="http://www.mysticwhalercruises.com/joomla/index.php/2009-
/ul>
</div>
<h1> </h1>
</div>
<div>
<div>
<div>
<div
align="center">
<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 >

<img src="/i/1924/fluid.png" alt="fluid-width" id="theme-fluid" height="20"
width="20" border="0" /></a ></span>
</div>
</div>
<div style="padding: 10px;">
[rezgo]
</div>
</div>
setWidthFont();
</script>
<div id="footer">
<div></div>
</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

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Integrating A Joomla Template Into Rezgo

Diunggah oleh

Hak Cipta:

Format Tersedia

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 90

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 2 of 90

Before You Start

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 3 of 90

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 4 of 90

Step One: Open your base template in your HTML editor

Now you are ready to begin editing your template.

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 5 of 90

Step Two: Preparing your base template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day

<script type="text/javascript" charset="UTF-8">

<script type='text/javascript' charset='UTF-8'>

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 6 of 90

<link rel="stylesheet" href="empty_files/system.css" type="text/css" />

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

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

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

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

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

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 7 of 90

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

<a href="/joomla/index.php" title="Increase font sizes"

<a href="/joomla/index.php" title="Switch to wider version"

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 8 of 90

File Not Found </td>

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 9 of 90

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day

<title>File Not Found</title>

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

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

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 10 of 90

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

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

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 11 of 90

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

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes"

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to wider

File Not Found </td>

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 12 of 90

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 13 of 90

Step Three: Changing relative paths to absolute paths

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta name="description" content="Mystic Whaler Cruises: Lobster Dinner Cruises, Day

<title>File Not Found</title>

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

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 14 of 90

.access {width: auto;height: 21px;position: absolute;right: -21px;top: .5em;}

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

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

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

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 15 of 90

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Increase font sizes"

<a href="http://www.mysticwhalercruises.com/joomla/index.php" title="Switch to wider

File Not Found </td>

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 16 of 90

Copyright © 2009 – Rezgo (A Division of Sentias Software Corp.) 17 of 90

Step Four: Embedding Styles

<link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/1024.css"

/Side Column Navigation/

/Header for table content/

/Alternating table rows/

/Header for table content/