You are on page 1of 90

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.

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


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

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


Rezgo Tutorial Integration a Joomla Template

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.

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


Rezgo Tutorial Integration a Joomla Template

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.

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


Rezgo Tutorial Integration a Joomla 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" ><!-- Source is
http://www.mysticwhalercruises.com/joomla/empty -->
<head>
<!--<base href="http://www.mysticwhalercruises.com/joomla/empty" />-->
<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'>

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


Rezgo Tutorial Integration a Joomla Template

/* <![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" />
<!--[if IE]>
<link rel="stylesheet" href="empty_files/ie.css" media="screen" type="text/css" />
<![endif]-->

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

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


Rezgo Tutorial Integration a Joomla Template

<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>&nbsp;</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>

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


Rezgo Tutorial Integration a Joomla Template

<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">&nbsp;</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>
<script type="text/javascript">
setWidthFont();
</script>

<div id="footer">
<div>Copyright &#169; 2009 Mystic Whaler Cruises. All Rights Reserved.</div>

<div></div>

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


Rezgo Tutorial Integration a Joomla Template

</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" />
<!--[if IE]>
<link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/ie.css"
media="screen" type="text/css" />
<![endif]-->

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

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


Rezgo Tutorial Integration a Joomla Template

</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="http://www.mysticwhalercruises.com/empty/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>

<!-- For this template, we have to keep the following bit of javascript in order to
maintain the proper font sizing -->
<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>&nbsp;</h1>
</div>
<div id="headerleader"> <div>
<div>
<div>
<div>
<div align="center">
<a href="http://www.mysticwhalercruises.com" target="_self">
<img src="http://www.mysticwhalercruises.com/empty/empty_files/banner.jpg"

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


Rezgo Tutorial Integration a Joomla Template

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

</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%">

File Not Found </td>

</tr>
</table>

<table>

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

</td>

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


Rezgo Tutorial Integration a Joomla Template

</tr>

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

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

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

<div id="footer">
<div>Copyright &#169; 2009 Mystic Whaler Cruises. All Rights Reserved.</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.

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


Rezgo Tutorial Integration a Joomla Template

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:

<!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" />
<!--[if IE]>
<link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/ie.css"
media="screen" type="text/css" />
<![endif]-->

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

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


Rezgo Tutorial Integration a Joomla Template

.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="http://www.mysticwhalercruises.com/empty/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>
<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>&nbsp;</h1>
</div>
<div id="headerleader"> <div>
<div>

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


Rezgo Tutorial Integration a Joomla Template

<div>
<div>
<div align="center">
<a href="http://www.mysticwhalercruises.com" target="_self">
<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>
<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%">

File Not Found </td>

</tr>
</table>

<table>

<tr>

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


Rezgo Tutorial Integration a Joomla Template

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

</td>

</tr>

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

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

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

<div id="footer">
<div>Copyright &#169; 2009 Mystic Whaler Cruises. All Rights Reserved.</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

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


Rezgo Tutorial Integration a Joomla Template

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:

<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" />
<!--[if IE]>
<link rel="stylesheet" href="http://www.mysticwhalercruises.com/empty/empty_files/ie.css"
media="screen" type="text/css" />
<![endif]-->

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

#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;
}

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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 {

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

/*Header for table content*/

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 {

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


Rezgo Tutorial Integration a Joomla Template

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.

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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.

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


Rezgo Tutorial Integration a Joomla Template

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.

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


Rezgo Tutorial Integration a Joomla Template

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.

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

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

/* @end */

/* @group Structure */

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

/* @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(http://supplier.rezgo.com/i/1924/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;
}

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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 {
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(http://supplier.rezgo.com/i/1924/topright_dark.png) 100% 0 no-
repeat;
height: 1%;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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://supplier.rezgo.com/i/1924/style.css */

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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 {

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

*/

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

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


Rezgo Tutorial Integration a Joomla Template

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

/*Header for table content*/

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

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

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


Rezgo Tutorial Integration a Joomla Template

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

</style>

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

var prefsLoaded = false;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

</div>
<h1>&nbsp;</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="http://supplier.rezgo.com/i/1924/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="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><div class="pathright"></div></div>

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

<table class="contentpaneopen">
<tr>

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


Rezgo Tutorial Integration a Joomla Template

<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">&nbsp;</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>
<script type="text/javascript">
setWidthFont();
</script>

<div id="footer">
<div>Copyright &#169; 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

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


Rezgo Tutorial Integration a Joomla Template

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:

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


Rezgo Tutorial Integration a Joomla Template

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

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">&nbsp;</span>
</div>
</div>

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


Rezgo Tutorial Integration a Joomla Template

The resulting template should look like this:

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


Rezgo Tutorial Integration a Joomla Template

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:

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


Rezgo Tutorial Integration a Joomla Template

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:

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

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

/* @group Global Reset */

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

#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;}

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


Rezgo Tutorial Integration a Joomla Template

/* @end */

/* @group Structure */

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

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


Rezgo Tutorial Integration a Joomla Template

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

/* @group Pathway */

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

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


Rezgo Tutorial Integration a Joomla Template

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

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

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


Rezgo Tutorial Integration a Joomla Template

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 {
background: transparent none;
padding: 0;

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


Rezgo Tutorial Integration a Joomla Template

}
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 {
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(/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 {

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


Rezgo Tutorial Integration a Joomla Template

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(/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 {
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;

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


Rezgo Tutorial Integration a Joomla Template

#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;
}

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


Rezgo Tutorial Integration a Joomla Template

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

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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;

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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


Rezgo Tutorial Integration a Joomla Template

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

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

/*Header for table content*/

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 {

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


Rezgo Tutorial Integration a Joomla Template

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

</style>

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

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

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


Rezgo Tutorial Integration a Joomla Template

}
}

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

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


Rezgo Tutorial Integration a Joomla Template

createCookie("fontSize", currentFontSize, 365);


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

</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="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>&nbsp;</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="/i/1924/banner.jpg" alt="banner.jpg" width="775" height="162" /></a>

</div> </div>

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


Rezgo Tutorial Integration a Joomla Template

</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="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><div class="pathright"></div></div>

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

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

<div id="footer">
<div>Copyright &#169; 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>

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


Rezgo Tutorial Integration a Joomla Template

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:

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


Rezgo Tutorial Integration a Joomla Template

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.

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