Joomla! Documentation - User contributions [en]

User:Jwwicks

2014-04-14T17:53:30Z

Jwwicks: /* What I'm Doing */

== Who I Am ==
My name is John Wm. Wicks. I'm a computer programmer in the Sacramento, Ca area. You can contact me through SourceForge http://www.sf.net at no_spam!j_wicks@users.sourceforge.net

== What I'm Doing ==
I'm currently going back to college to get a Bachelors Degree in CSIS at Sacramento City College and to transfer to Sacramento State University.

== My To Do List On WikiJoomla ==

== The Resume ==
April 2001 - Present Freelance Consultant - Sacramento Ca.<br>
<i>Lead Internet Application Developer</i><br>
Develop dynamic websites utilizing NT, Linux, IIS, Apache, SQL
Server, MySQL, ASP, PHP, JavaScript, VBScript, HTML, XML, CSS, Flash
and Photoshop.

August 1999 - April 2001 SacWeb, Inc. - Sacramento Ca.<br>
<i>Lead Internet Application Developer</i><br>
Develop dynamic websites from concept to release including
requirements analysis and deployment procedures. Perform
development tasks utilizing IIS 4/5, MTS, SQL Server 6/7/2000,
Access 97/2000, ADO/DAO/OLEDB, VBScript, JavaScript, HTML,
DHTML, CSS, Interdev, MSVC++ 6.x, VB 6.x, COM and Homesite
on NT 4/2000 Servers. Design solutions for content management,
e-commerce, security, auction/award tracking. Write training
aids using Word, PowerPoint and Visio. Author User Guides with
Word and PaintShop Pro. Create, maintain and report schedule of
tasks using Project 2000.

January 1999 - June 1999 Network Associates - Santa Clara, Ca.<br>
<i>Release/Installation Developer (Contract)</i><br>
Redesign Network Informant 3.0 installation using InstallShield,
SQL Server 6.5, Sybase 10.x and MSVC++ 4.2 to allow easier
maintenance. Develop build and release procedures using PERL
and OpusMake. Create and administer SourceSafe and StarTeam.
Create uninstall/maintenance utility DLL using MSVC++ 6.0.
Generate software defect reports using StarTeam and Track32.
Setup, administer and maintain setup QA equipment as needed.

July 1998 - January 1999 Agile Software, LLC - San Jose, Ca.<br>
<i>Installation Developer (Contract)</i><br>
Create Agile Workplace 4.x setup using InstallShield 5.5 and
MSVC++ 5.x. Design web update DLL using MSVC++ 5.x. Migrate
InstallShield setup to MFC framework using MSVC++ 5.0 and
Exemplar Setup Toolkit. Create DemoShield CD Browser
application. Evaluate, debug and correct existing software
defects. Create maintenance releases using RTPatch. Install and
maintain QA lab software and hardware.

November 1997 - June 1998 Netscape - Mountain View, Ca.<br>
<i>Localization Programmer (Contract)</i><br>
Create multi-lingual installations for Windows NT, Solaris, HP-UX,
IRIX and AIX operating systems using InstallShield 3. Maintain
source code using VCS/RCS and PERL. Write scripts for nightly
builds using PERL. Install, configure and test localized
Enterprise, Messaging and Directory Server 3.x on multiple
platforms. Author documentation for the release and build process
using HTML and JavaScript for intranet site. Provide translation
vendors with L10N kit including requirements document in HTML.
Setup and configure QA test equipment for L10N vendor.

January 1997 - November 1997 Adaptec, Inc. - Milpitas, Ca.<br>
<i>Lead Internationalization Programmer (Contract)</i><br>
Modify SCSI/RAID adapter BIOS to support I18N features using
MASM 6.11. Create localized UI, help and installations for
EZ-SCSI 4.0, ARO 1130, 2940UW, 7800, CD Creator and
DirectCD products. Perform QA on localized products to identify
and debug defects. Setup and maintain QA lab equipment.
Install and administer QA test equipment for L10N vendor.
Modify PVCS scripts to build/create multilingual releases.

February 1992 - January 1997 Lucent - Monterey, Ca.<br>
<i>Senior Localization/Internationalization Programmer</i><br>
Develop L10N utilities using Borland C++ 3.x/4.5, AWK, PERL
and VBA. Document functional specification in Word and author
WinHelp training aid using RoboHelp. Internationalize software in
C/C++, Delphi and MASM. Author multi-lingual installation
programs using InstallShield. Localize websites and database
content using HTML, JavaScript and Oracle. Instrumental in
developing L10N process for IS0-9000 certification. Create QA
test scripts for the L10N process using Visual Test. Setup and
administer Bulletin Board System (BBS) using Wildcat 4.0/5.0.
Create and maintain HTML and RipScript interface for Internet
user access to BBS.

Module Position

2011-07-27T00:44:19Z

Jwwicks: /* templateDetails.xml */ Added missing debug position

Module positions are placeholders in a template. They identify positions within the template and tell the Joomla! application where to place output from modules assigned to a particular position. The template designer has complete control over module positions, creating variations between templates and the respective Joomla! default positions assigned to modules in the installation sample data.

For example the module position "Left" could be used in the left side of the template to display a site navigation menu.
So if a module is assigned the "Left" position, it will be displayed wherever the designer puts that "Left" module position - not necessarily the left side of the page.

==templateDetails.xml==
The <code>templateDetails.xml</code> file contains all the installation and core information for a template, including the module positions it utilizes and displays. Here is a brief list of the commonly used names for the various module positions.
<pre>
<positions>
<position>top</position>
<position>left</position>
<position>right</position>
<position>bottom</position>
<position>banner</position>
<position>syndicate</position>
<position>footer</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>debug</position>
</positions>
</pre>
Although these are commonly used, it is up to the template developer to choose both a module position name and an accompanying display style.
The addition of module positions, as displayed above, is implemented in between the <code><positions></code> and <code></positions></code> tags. In between those tags in the <code>templateDetails.xml</code> file, add the name of the module position in between a set of <code><position></code> and <code></position></code> tags.

==Use and Implementation==
A Joomla! template displays a set of modules added to a specific position using the <code><jdoc:include /></code> statement shown below (for further information about <code><jdoc:include /></code> see [[jdoc statements]]):
<pre>
<jdoc:include type="modules" name="name of module position" style="xhtml" />
</pre>

==Visualization==
It's possible to visualize all modules set on a template by calling the <code>"tp=1"</code> query string on the front-end.
<pre>
http://www.yourdomain.com/index.php?tp=1
</pre>

The default module positioning looks like the [[Module Map]]

<noinclude>[[Category:Templates]]</noinclude>

J1.5:Customising the JA Purity template/customisations/Adding or changing a header colour scheme

2010-02-23T15:44:55Z

Jwwicks: Fixed minor error for copying images to directory - added header subdirectory

The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, ja_templatetools.php, style.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png and header-mask.png are in the following directories:<br />
<pre>
templates/ja_purity
ja_templatetools.php
images/
user-increase.png
user-decrease.png
user-reset.png
styles/
header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )
style.css
images/
vdot2.gif
opaque.png
icon-search.gif
header-mask.png
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
ja_templatetools.php
images/
user-increase.png
user-decrease.png
user-reset.png
styles/
header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )
style.css
images/
vdot2.gif
opaque.png
icon-search.gif
header-mask.png
</pre>

#To add a color scheme first create a directory styles/header, named for your new color scheme such as white or grey.
#Copy the contents of one of the other colors scheme directories such as blue to your new directory.
#Copy the three user-XXXX.png files from templates/ja_purity/images to templates/ja_purity/styles/header/grey/images for a grey scheme. If you're using the tutorial version the directory is my_japurity.
#Normally you'd be able to edit the CSS in the Joomla Administration area but that isn't an option in this case. So you'll need to edit the file directly in your choice of plain text editors such as VI or Notepad. Edit the style.css file to match your new color scheme. For instance the following changes will make a readable set of colors for a grey scheme (using the copied blue style.css):
#Change all instances of #006699 to #CCCCCC (near lines 2,37,115 )
#Change all instances of #C3DFED to #444444 (near lines 3,11,15,28,38,50,83,90,107,116)
#Change all instances of #1E7CAB to #BBBBBB (near lines 19,29)
#Add the following to the style.css file to color the Spotlight h3 tags
#:<pre>
#: #ja-botsl h3 {
#: color: #000000;
#: }
#:</pre>
#Modify the header-mask.png to match your color scheme in your favorite graphic editor. You'll want to use a gradient tool from transparent to foreground color.
#Modify the other graphics, vdot2.gif, user-XXXXX.png and icon-search.gif for readability in your new scheme
#Lastly you'll need to hack the ja_templatetools.php file to change the genToolsMenu method to look like the following
#:<pre>
#:function genToolMenu($_array_tools=null, $imgext = 'gif'){
#: $themedir = $this->templateurl();
#: if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
#: if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
#: if ($this->getParam('theme_header') && $this->getParam('theme_header')!='-1') $themedir = $this->templateurl()."/styles/header/".$this->getParam('theme_header');
#: if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
#: ?>
#: <ul class="ja-usertools-font">
#: <li><img style="cursor: pointer;" title="<?php echo JText::_('INCREASE FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('INCREASE FONT SIZE');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
#: <li><img style="cursor: pointer;" title="<?php echo JText::_('DEFAULT FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('DEFAULT FONT SIZE');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
#: <li><img style="cursor: pointer;" title="<?php echo JText::_('DECREASE FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('DECREASE FONT SIZE');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
#: </ul>
#: <script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
#: <?php
#: }
#:}
#:</pre>
#Go to the Joomla Administration for your site and select the new color for your header in the Template Manager
#You should get something similar to this when finished...
[[Image:JA Purity Tutorial Header Grey.png|640px]]

Remember to refresh. reload, etc. to get the colors to show up.

Note: If you enable Horizontal Menus then you'll need to [[Modify horizontal menu color in ja purity|change the color of the Horizontal Menus]] as well.

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-08-16T18:21:13Z

Jwwicks: /* Known Issues and Bugs */ Added Link to IE8 Issue fix

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]

[[Image:Ja_purity_module_position.png]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]<br />
[[Use single image for header in ja purity|Use one image for Header and Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]<br />
[[Enable rtl horizontal menu in ja purity|Allow Right to Left language use of Horizontal Menu]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* IE8 Compatibility - SEE: http://forum.joomla.org/viewtopic.php?f=541&t=393631&p=1709079&hilit=ie8#p1709079
* Active Menu item not updating. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu

2009-06-27T05:45:36Z

Jwwicks: Added image of result

The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, templateDetails.xml and ja-sosdmenu-rtl.css are in the following directories:<br />
Note: The css file isn't installed as of version 1.5.11. You'll need to add this file to the site using the code below.
<pre>
templates/ja_purity
index.php
templateDetails.xml
css/
ja-sosdmenu-rtl.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
Note: The tutorial version of the template should include the ja-sosdmenu-rtl.css file but doesn't install it.
<pre>
templates/ja_purity
index.php
templateDetails.xml
css/
ja-sosdmenu-rtl.css
</pre>

#Modify index.php starting at line XXX
:<source lang="php" line start="47">

<?php if ($this->countModules('hornav')): ?>
<?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
<?php endif; ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
<?php else: ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
<?php endif; ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
<?php endif; ?>
<?php endif; ?>
</source>
#<li value=2>Change the ja-sosdmenu-rtl.css file to look like the following:
:<source lang="css" line>
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

#ja-mainnav {
margin: 0; /* all lists */
padding: 0;
float: none;
text-align: right;
border-left: 1px solid #555555;
}

#ja-mainnav ul {
text-align: right;
margin: 0; /* all lists */
padding: 0;
}

#ja-mainnav li ul {
float: right;
}
#ja-mainnav li {
margin: 0; /* all list items */
padding: 0;
float: right;
display: block;
background: none;
cursor: pointer;
position: relative;
}

#ja-mainnav li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
w\idth: 15.9em;
right: 0;
}

#ja-mainnav li ul ul {
margin: -1.5em 0 0 14em; /* third-and-above-level lists */
}

#ja-mainnav li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-mainnav ul a {
width: 14.8em;
w\idth: 10.8em;
}

#ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul,
#ja-mainnav li.sfhover ul ul, #ja-mainnav li.havechildsfhover ul ul, #ja-mainnav li.havechild-activesfhover ul ul, #ja-mainnav li.activesfhover ul ul,
#ja-mainnav li.sfhover ul ul ul, #ja-mainnav li.havechildsfhover ul ul ul, #ja-mainnav li.havechild-activesfhover ul ul ul, #ja-mainnav li.activesfhover ul ul ul {
top: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul,
#ja-mainnav li.sfhover ul, #ja-mainnav li.havechildsfhover ul, #ja-mainnav li.havechild-activesfhover ul, #ja-mainnav li.activesfhover ul,
#ja-mainnav li li.sfhover ul, #ja-mainnav li li.havesubchildsfhover ul, #ja-mainnav li li.havesubchild-activesfhover ul, #ja-mainnav li li.activesfhover ul,
#ja-mainnav li li li.sfhover ul, #ja-mainnav li li li.havesubchildsfhover ul, #ja-mainnav li li li.havesubchild-activesfhover ul, #ja-mainnav li li li.activesfhover ul {
top: auto;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav li a {
margin: 0;
padding: 10px 20px;
border-right: 1px solid #555555;
border-left: 1px solid #333333;
display: block;
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}

#ja-mainnav li a:hover,
#ja-mainnav li a:active,
#ja-mainnav li a:focus {
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav li {
margin: 0;
}

#ja-mainnav li:hover,
#ja-mainnav li.sfhover,
#ja-mainnav li.havechildsfhover,
#ja-mainnav li.havechild-activesfhover {
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav li a.active,
#ja-mainnav li a.active:hover,
#ja-mainnav li a.active:active,
#ja-mainnav li a.active:focus {
background: url(../../images/arrow2.png) no-repeat bottom center #333333;
color: #FFFFFF;
}

/* 2nd level and above */
#ja-mainnav li ul {
border: 1px solid #555555;
background: url(../../images/opaque.png);
}

#ja-mainnav li ul li {
border-top: 1px solid #777777;
border-bottom: 1px solid #444444;
background: none;
}

#ja-mainnav li ul a {
border-left: none;
margin: 0;
padding: 7px 10px;
background: none;
color: #CCCCCC;
font-weight: normal;
line-height: normal;
text-transform: none;
}

#ja-mainnav li.havesubchild,
#ja-mainnav li.havesubchild-active {
background: url(../../images/bullet2.gif) no-repeat 94% 50%;
}

#ja-mainnav li ul a:hover,
#ja-mainnav li ul a:active,
#ja-mainnav li ul a:focus,
#ja-mainnav ul li:hover,
#ja-mainnav ul li.sfhover,
#ja-mainnav ul li.havesubchildsfhover,
#ja-mainnav ul li.havesubchild-activesfhover,
#ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li.sfhover,
#ja-mainnav ul ul li.havesubchildsfhover,
#ja-mainnav ul ul li.havesubchild-activesfhover {
background: #333333;
color: #CCCCCC;
}

#ja-mainnav ul li a.active,
#ja-mainnav ul li a.active:hover,
#ja-mainnav ul li a.active:active,
#ja-mainnav ul li a.active:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}
</source>

Here's the result...
[[Image:JA Purity Tutorial Right2LeftMenu.png|640px]]
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

File:JA Purity Tutorial Right2LeftMenu.png

2009-06-27T05:43:38Z

Jwwicks:

== Licensing: ==
{{JEDL}}

J1.5:Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu

2009-06-27T05:31:13Z

Jwwicks: Removed stub/inuse

The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, templateDetails.xml and ja-sosdmenu-rtl.css are in the following directories:<br />
Note: The css file isn't installed as of version 1.5.11. You'll need to add this file to the site using the code below.
<pre>
templates/ja_purity
index.php
templateDetails.xml
css/
ja-sosdmenu-rtl.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
Note: The tutorial version of the template should include the ja-sosdmenu-rtl.css file but doesn't install it.
<pre>
templates/ja_purity
index.php
templateDetails.xml
css/
ja-sosdmenu-rtl.css
</pre>

#Modify index.php starting at line XXX
:<source lang="php" line start="47">

<?php if ($this->countModules('hornav')): ?>
<?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
<?php endif; ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
<?php else: ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
<?php endif; ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
<?php endif; ?>
<?php endif; ?>
</source>
#<li value=2>Change the ja-sosdmenu-rtl.css file to look like the following:
:<source lang="css" line>
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

#ja-mainnav {
margin: 0; /* all lists */
padding: 0;
float: none;
text-align: right;
border-left: 1px solid #555555;
}

#ja-mainnav ul {
text-align: right;
margin: 0; /* all lists */
padding: 0;
}

#ja-mainnav li ul {
float: right;
}
#ja-mainnav li {
margin: 0; /* all list items */
padding: 0;
float: right;
display: block;
background: none;
cursor: pointer;
position: relative;
}

#ja-mainnav li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
w\idth: 15.9em;
right: 0;
}

#ja-mainnav li ul ul {
margin: -1.5em 0 0 14em; /* third-and-above-level lists */
}

#ja-mainnav li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-mainnav ul a {
width: 14.8em;
w\idth: 10.8em;
}

#ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul,
#ja-mainnav li.sfhover ul ul, #ja-mainnav li.havechildsfhover ul ul, #ja-mainnav li.havechild-activesfhover ul ul, #ja-mainnav li.activesfhover ul ul,
#ja-mainnav li.sfhover ul ul ul, #ja-mainnav li.havechildsfhover ul ul ul, #ja-mainnav li.havechild-activesfhover ul ul ul, #ja-mainnav li.activesfhover ul ul ul {
top: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul,
#ja-mainnav li.sfhover ul, #ja-mainnav li.havechildsfhover ul, #ja-mainnav li.havechild-activesfhover ul, #ja-mainnav li.activesfhover ul,
#ja-mainnav li li.sfhover ul, #ja-mainnav li li.havesubchildsfhover ul, #ja-mainnav li li.havesubchild-activesfhover ul, #ja-mainnav li li.activesfhover ul,
#ja-mainnav li li li.sfhover ul, #ja-mainnav li li li.havesubchildsfhover ul, #ja-mainnav li li li.havesubchild-activesfhover ul, #ja-mainnav li li li.activesfhover ul {
top: auto;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav li a {
margin: 0;
padding: 10px 20px;
border-right: 1px solid #555555;
border-left: 1px solid #333333;
display: block;
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}

#ja-mainnav li a:hover,
#ja-mainnav li a:active,
#ja-mainnav li a:focus {
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav li {
margin: 0;
}

#ja-mainnav li:hover,
#ja-mainnav li.sfhover,
#ja-mainnav li.havechildsfhover,
#ja-mainnav li.havechild-activesfhover {
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav li a.active,
#ja-mainnav li a.active:hover,
#ja-mainnav li a.active:active,
#ja-mainnav li a.active:focus {
background: url(../../images/arrow2.png) no-repeat bottom center #333333;
color: #FFFFFF;
}

/* 2nd level and above */
#ja-mainnav li ul {
border: 1px solid #555555;
background: url(../../images/opaque.png);
}

#ja-mainnav li ul li {
border-top: 1px solid #777777;
border-bottom: 1px solid #444444;
background: none;
}

#ja-mainnav li ul a {
border-left: none;
margin: 0;
padding: 7px 10px;
background: none;
color: #CCCCCC;
font-weight: normal;
line-height: normal;
text-transform: none;
}

#ja-mainnav li.havesubchild,
#ja-mainnav li.havesubchild-active {
background: url(../../images/bullet2.gif) no-repeat 94% 50%;
}

#ja-mainnav li ul a:hover,
#ja-mainnav li ul a:active,
#ja-mainnav li ul a:focus,
#ja-mainnav ul li:hover,
#ja-mainnav ul li.sfhover,
#ja-mainnav ul li.havesubchildsfhover,
#ja-mainnav ul li.havesubchild-activesfhover,
#ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li.sfhover,
#ja-mainnav ul ul li.havesubchildsfhover,
#ja-mainnav ul ul li.havesubchild-activesfhover {
background: #333333;
color: #CCCCCC;
}

#ja-mainnav ul li a.active,
#ja-mainnav ul li a.active:hover,
#ja-mainnav ul li a.active:active,
#ja-mainnav ul li a.active:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}
</source>

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu

2009-06-27T05:30:33Z

Jwwicks: Completed tutorial

{{stub}}
{{inuse}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, templateDetails.xml and ja-sosdmenu-rtl.css are in the following directories:<br />
Note: The css file isn't installed as of version 1.5.11. You'll need to add this file to the site using the code below.
<pre>
templates/ja_purity
index.php
templateDetails.xml
css/
ja-sosdmenu-rtl.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
Note: The tutorial version of the template should include the ja-sosdmenu-rtl.css file but doesn't install it.
<pre>
templates/ja_purity
index.php
templateDetails.xml
css/
ja-sosdmenu-rtl.css
</pre>

#Modify index.php starting at line XXX
:<source lang="php" line start="47">

<?php if ($this->countModules('hornav')): ?>
<?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
<?php endif; ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
<?php else: ?>
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
<?php else: ?>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
<?php endif; ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
<?php endif; ?>
<?php endif; ?>
</source>
#<li value=2>Change the ja-sosdmenu-rtl.css file to look like the following:
:<source lang="css" line>
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

#ja-mainnav {
margin: 0; /* all lists */
padding: 0;
float: none;
text-align: right;
border-left: 1px solid #555555;
}

#ja-mainnav ul {
text-align: right;
margin: 0; /* all lists */
padding: 0;
}

#ja-mainnav li ul {
float: right;
}
#ja-mainnav li {
margin: 0; /* all list items */
padding: 0;
float: right;
display: block;
background: none;
cursor: pointer;
position: relative;
}

#ja-mainnav li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
w\idth: 15.9em;
right: 0;
}

#ja-mainnav li ul ul {
margin: -1.5em 0 0 14em; /* third-and-above-level lists */
}

#ja-mainnav li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-mainnav ul a {
width: 14.8em;
w\idth: 10.8em;
}

#ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul,
#ja-mainnav li.sfhover ul ul, #ja-mainnav li.havechildsfhover ul ul, #ja-mainnav li.havechild-activesfhover ul ul, #ja-mainnav li.activesfhover ul ul,
#ja-mainnav li.sfhover ul ul ul, #ja-mainnav li.havechildsfhover ul ul ul, #ja-mainnav li.havechild-activesfhover ul ul ul, #ja-mainnav li.activesfhover ul ul ul {
top: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul,
#ja-mainnav li.sfhover ul, #ja-mainnav li.havechildsfhover ul, #ja-mainnav li.havechild-activesfhover ul, #ja-mainnav li.activesfhover ul,
#ja-mainnav li li.sfhover ul, #ja-mainnav li li.havesubchildsfhover ul, #ja-mainnav li li.havesubchild-activesfhover ul, #ja-mainnav li li.activesfhover ul,
#ja-mainnav li li li.sfhover ul, #ja-mainnav li li li.havesubchildsfhover ul, #ja-mainnav li li li.havesubchild-activesfhover ul, #ja-mainnav li li li.activesfhover ul {
top: auto;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav li a {
margin: 0;
padding: 10px 20px;
border-right: 1px solid #555555;
border-left: 1px solid #333333;
display: block;
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}

#ja-mainnav li a:hover,
#ja-mainnav li a:active,
#ja-mainnav li a:focus {
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav li {
margin: 0;
}

#ja-mainnav li:hover,
#ja-mainnav li.sfhover,
#ja-mainnav li.havechildsfhover,
#ja-mainnav li.havechild-activesfhover {
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav li a.active,
#ja-mainnav li a.active:hover,
#ja-mainnav li a.active:active,
#ja-mainnav li a.active:focus {
background: url(../../images/arrow2.png) no-repeat bottom center #333333;
color: #FFFFFF;
}

/* 2nd level and above */
#ja-mainnav li ul {
border: 1px solid #555555;
background: url(../../images/opaque.png);
}

#ja-mainnav li ul li {
border-top: 1px solid #777777;
border-bottom: 1px solid #444444;
background: none;
}

#ja-mainnav li ul a {
border-left: none;
margin: 0;
padding: 7px 10px;
background: none;
color: #CCCCCC;
font-weight: normal;
line-height: normal;
text-transform: none;
}

#ja-mainnav li.havesubchild,
#ja-mainnav li.havesubchild-active {
background: url(../../images/bullet2.gif) no-repeat 94% 50%;
}

#ja-mainnav li ul a:hover,
#ja-mainnav li ul a:active,
#ja-mainnav li ul a:focus,
#ja-mainnav ul li:hover,
#ja-mainnav ul li.sfhover,
#ja-mainnav ul li.havesubchildsfhover,
#ja-mainnav ul li.havesubchild-activesfhover,
#ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li.sfhover,
#ja-mainnav ul ul li.havesubchildsfhover,
#ja-mainnav ul ul li.havesubchild-activesfhover {
background: #333333;
color: #CCCCCC;
}

#ja-mainnav ul li a.active,
#ja-mainnav ul li a.active:hover,
#ja-mainnav ul li a.active:active,
#ja-mainnav ul li a.active:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}
</source>

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu

2009-06-27T05:23:42Z

Jwwicks: Started edit session

J1.5:Customising the JA Purity template

2009-06-27T05:22:57Z

Jwwicks: /* Customise Horizontal Navigation Menus */

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]

[[Image:Ja_purity_module_position.png]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]<br />
[[Use single image for header in ja purity|Use one image for Header and Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]<br />
[[Enable rtl horizontal menu in ja purity|Allow Right to Left language use of Horizontal Menu]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Active Menu item not updating. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-06-27T05:22:40Z

Jwwicks: /* Customise Horizontal Navigation Menus */ Added RTL tutorial link

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]

[[Image:Ja_purity_module_position.png]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]<br />
[[Use single image for header in ja purity|Use one image for Header and Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]<br />
[[Enable rtl horizontal menu in ja purity||Allow Right to Left language use of Horizontal Menu]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Active Menu item not updating. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/customisations/Using a single image for header and logo

2009-06-27T05:08:05Z

Jwwicks: Completed tutorial

The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, style.css are in the following directories:<br />
<pre>
templates/ja_purity
index.php
styles/
header/
blue/
style.css
green/
style.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/ja_purity
index.php
styles/
header/
blue/
style.css
green/
style.css
</pre>

# First modify index.php to eliminate the random image code on line 112
::<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">
</source>
#<li value=2>It should look like the following when done
::<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix">
</source>
#<li value=3>Modify style.css to the following (you'll want to do this same edit in both green and blue themes).
::<source lang="css" line start="6">
.ja-headermask {
width: 602px;
display: block;
background: url(images/myheader-image.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: 0;
}
</source>
#<li value=4>Create an image 602 x 80 in your favorite graphics application and save it in the styles/header/xxxxx/images directory. You'll either want to fade the image to transparent at the edges or ensure it matches the background color for your header.

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/customisations/Using a single image for header and logo

2009-06-27T04:20:49Z

Jwwicks: Started edit session on new tutorial topic

{{stub}}
{{inuse}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, style.css are in the following directories:<br />
<pre>
templates/ja_purity
index.php
styles/
header/
blue/
style.css
green/
style.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/ja_purity
index.php
styles/
header/
blue/
style.css
green/
style.css
</pre>

# First modify index.php to eliminate the random image code on line 113
<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">
</source>
#: It should look like the following when done
<source lang="php">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix">
</source>
#
# Modify style.css

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-06-27T04:19:30Z

Jwwicks: /* Customise the Logo */

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]

[[Image:Ja_purity_module_position.png]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]<br />
[[Use single image for header in ja purity|Use one image for Header and Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Active Menu item not updating. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-06-24T15:43:51Z

Jwwicks: /* Known Issues and Bugs */

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Active Menu item not updating. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-06-24T15:41:32Z

Jwwicks: /* Known Issues and Bugs */

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Left position fails to collapse when no module present. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-06-24T15:38:21Z

Jwwicks: /* Known Issues and Bugs */ Added forum references per discussion page

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Left position fails to collapse when no module present. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template

2009-06-24T15:30:47Z

Jwwicks: /* Before You Start */ Modified per suggestion on discussion page

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Left position fails to collapse when no module present.
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'.

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Replacing the logo image in the Milky Way template

2009-06-17T20:27:19Z

Jwwicks: /* See also */ Added correct link to procedure in JA Purity tutorial

=Replacing the logo image in the Milkyway template=
Since all templates have their own structure of css-Files, this chunk is special to the Milkyway template. Have a look below or at [[:category:templates]] for other templates.

== Upload your logo image ==
The new logo image should have the same size as the original joomla image.
# login into administration area
# choose ''Media'' from the ''Site'' menu
# upload your image into the opening main directory for images
# the file name will be renamed to non capital letters
# Memorize the exact spelling of your logo file name on the server!

== Activate the new logo ==
# login into administration area
# choose ''Templates'' from the ''Extensions'' menu within the top menu bar
# click ''rhuk_milkyway'' for editing the Milkyway template (it should have been marked with a star)
# click ''edit CSS'' within the top icon bar
# mark ''template.css'' and click ''edit'' (again in the top area)
# Now you should act careful and avoid unintended changes:
## search for line ''div#logo {''
## change the defined url for background
##: replace line
##:<code>background: url(../images/logo.png) no-repeat;</code>
##: by a line like this
##:<code>background: url(../../../images/your_logo.png) no-repeat;</code>
## ATTENTION:
##: mind the different numbers of directory levels, each marked by ''../''
##: remember the exact file name of your logo

===See also===
[[Replace the JA Purity Joomla! Logo|Replacing the logo image in the Purity template]]
----
This chunk should cover the process for the benefit of someone without
prior experience of Joomla! or PHP, HTML, CSS. It should suggest a suitable
tool to use to create a new image and should show a step-by-step procedure,
with annotated screenshots, of a new image being created using an open
source image editor such as The Gimp. It should then show, again with
annotated screenshots, the process of uploading the new image to the
correct location within Joomla!
----
<noinclude>[[Category:Milky Way template]]</noinclude>

J1.5:Customising the JA Purity template/header/logo

2009-06-17T20:24:57Z

Jwwicks: Added all the relevant files to section

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, template.css, template_rtl.css, logo.png, logo.gif, ja.script.js, iepngfix.htc and style.css (green and blue versions), are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
template_rtl.css
images/
logo.gif
logo.png
js/
iepngfix.htc
ja.script.js
styles/header
blue/
style.css
green/
style.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
template_rtl.css
images/
logo.gif
logo.png
js/
iepngfix.htc
ja.script.js
styles/header
blue/
style.css
green/
style.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="116">
<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>
</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="949">
h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}
</source>
===ja_purity/css/template_rtl.css===
<source lang="css" line start="180">
h1.logo-text a {
right: 5px;
left: auto;
}

p.site-slogan {
right: 0;
left: auto;
}
</source>
===ja_purity/styles/header/blue/style.css===
<source lang="css" line start="14">
h1.logo-text a {
color: #C3DFED !important;
}

p.site-slogan {
background: #1E7CAB;
}
</source>
===ja_purity/styles/header/green/style.css===
<source lang="css" line start="14">
h1.logo-text a {
color: #E4EFDF !important;
}

p.site-slogan {
background: #9DBF8C;
}
</source>
==Image Files==
===ja_purity/images/logo.gif===
[[Image:JA Purity Tutorial logo.gif]]
===ja_purity/images/logo.png===
[[Image:JA Purity Tutorial logo.png]]
==Javascript Files==
===ja_purity/js/ja.script.js===
<source lang="javascript" line start="4">
function fixIEPNG(el, bgimgdf, sizingMethod, type, offset){
var objs = el;
if(!objs) return;
if ($type(objs) != 'array') objs = [objs];
if(!sizingMethod) sizingMethod = 'crop';
if(!offset) offset = 0;
var blankimg = siteurl + 'images/blank.png';
objs.each(function(obj) {
var bgimg = bgimgdf;
if (obj.tagName == 'IMG') {
//This is an image
if (!bgimg) bgimg = obj.src;
if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return;

obj.setStyle('height',obj.offsetHeight);
obj.setStyle('width',obj.offsetWidth);
obj.src = blankimg;
obj.setStyle ('visibility', 'visible');
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
}else{
//Background
if (!bgimg) bgimg = obj.getStyle('backgroundImage');
var pattern = new RegExp('url\s*[$\"\']*([^\'\"$]*)[\'\"\)]*');
if ((m = pattern.exec(bgimg))) bgimg = m[1];
if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return;
if (!type)
{
obj.setStyle('background', 'none');
//if(!obj.getStyle('position'))
if(obj.getStyle('position')!='absolute' && obj.getStyle('position')!='relative') {
obj.setStyle('position', 'relative');
}

//Get all child
var childnodes = obj.childNodes;
for(var j=0;j<childnodes.length;j++){
if((child = $(childnodes[j]))) {
if(child.getStyle('position')!='absolute' && child.getStyle('position')!='relative') {
child.setStyle('position', 'relative');
}
child.setStyle('z-index',2);
}
}
//Create background layer:
var bgdiv = new Element('IMG');
bgdiv.src = blankimg;
bgdiv.width = obj.offsetWidth - offset;
bgdiv.height = obj.offsetHeight - offset;
bgdiv.setStyles({
'position': 'absolute',
'top': 0,
'left': 0
});

bgdiv.className = 'TransBG';

bgdiv.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
bgdiv.inject(obj, 'top');
//alert(obj.innerHTML + '\n' + bgdiv.innerHTML);
} else {
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
}
}
}.bind(this));

}
</source>
===ja_purity/js/iepngfix.htc===
<source lang="javascript" line >
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.png';

var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto') {
style.width = offsetWidth + 'px';
style.height = offsetHeight + 'px';
}
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'scale');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

File:JA Purity Tutorial logo.png

2009-06-17T20:21:35Z

Jwwicks:

== Licensing: ==
{{JEDL}}

File:JA Purity Tutorial logo.gif

2009-06-17T20:21:05Z

Jwwicks:

== Licensing: ==
{{JEDL}}

J1.5:Customising the JA Purity template/header/logo

2009-06-17T19:45:45Z

Jwwicks: Starting edit session

{{stub}}
{{inuse}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, XXXXX and XXXX, are in the following directories:<br />
<pre>
templates/ja_purity
XXXXX.php
css/
XXXXX.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
XXXXX
css/
XXXXXX
</pre>
==HTML and PHP Files==
===ja_purity/XXXXX.php===
<source lang="php" line start="">
</source>
==CSS Files==
===ja_purity/css/XXXXX.css===
<source lang="css" line start="">
</source>
==Image Files==
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/template.css

2009-06-13T13:38:20Z

Jwwicks:

{{stub}}
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line>
/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
color: #000000;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
}

body#bd {
color: #333333;
background: #F2F2F2;
}

body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}

/* Normal link */
a {
color: #006699;
text-decoration: underline;
}

a:hover, a:active, a:focus {
color: #333333;
text-decoration: underline;
}

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

/* Small text */
small, .small, .smalldark, .mosimage_caption, .createby, .createdate, .modifydate, a.readon, .img_caption {
color: #666666;
font-size: 92%;
}

/* Heading */
h1 {
font-size: 180%;
}

h2 {
font-size: 150%;
}

h3 {
font-size: 125%;
}

h4 {
font-size: 100%;
text-transform: uppercase;
}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
padding: 0;
}

ul {
list-style: none;
}

ul li {
padding-left: 30px;
background: url(../images/bullet.gif) no-repeat 18px 8px;
line-height: 180%;
}

ol li {
margin-left: 35px;
line-height: 180%;
}

th {
padding: 5px;
font-weight: bold;
text-align: left;
}

fieldset {
border: none;
padding: 10px 5px;
background: url(../images/hdot2.gif) repeat-x top;
}

fieldset a {
font-weight: bold;
}

hr {
border-top: 1px solid #CCCCCC;
border-right: 0;
border-left: 0;
border-bottom: 0;
height: 1px;
}

td, div {
font-size: 100%;
}

img {
border: none;
}
/* FORM
--------------------------------------------------------- */
form {
margin: 0;
padding: 0;
}

form label {
cursor: pointer;
}

input, select, textarea, .inputbox {
padding: 3px 5px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 100%;
}

.button {
padding: 3px 5px;
border: 1px solid #333333;
background: url(../images/grad1.gif) repeat-x top #333333;
color: #CCCCCC;
font-size: 85%;
text-transform: uppercase;
}

.button:hover, .button:focus {
border: 1px solid #999999;
background: #333333;
color: #FFFFFF;
}

* html .button {
padding: 2px 0 !important; /*IE 6*/
}

*+html .button {
padding: 2px 0 !important; /*IE 7*/
}

.inputbox {
border: 1px solid #CCCCCC;
background: #FFFFFF;
}

.inputbox:hover, .inputbox:focus {
background: #FFFFCC;
}

/* BONUS TYPOGRAPHY STYLES
--------------------------------------------------------- */
pre, .code {
padding: 10px 15px;
margin: 5px 0 15px;
border-left: 5px solid #999999;
background: #FFFFFF;
font: 1em/1.5 "Courier News", monospace;
}

blockquote {
padding: 1em 40px 1em 15px;
}

blockquote span.open {
padding: 0 0 0 20px;
background: url(../images/so-q.gif) no-repeat left top;
}

blockquote span.close {
padding: 0 20px 0 0;
background: url(../images/sc-q.gif) no-repeat bottom right;
}

/* Quote hilight */
.quote-hilite {
padding: 10px 15px;
margin: 0;
border: 1px solid #CACACC;
background: #FFFFFF;
}

/* Small quote */
.small-quote {
margin: 0;
padding: 0;
background: none;
}

.small-quote span.open-quote {
margin: 0;
padding-left: 20px;
background: url(../images/so-q.gif) no-repeat center left;
}

.small-quote span.close-quote {
margin: 0;
padding-right: 20px;
background: url(../images/sc-q.gif) no-repeat center right;
}

.small-quote span.author {
padding: 2px 5px 2px 20px;
border-top: 1px solid #DCDDE0;
margin: 0.5em 0 0;
display: block;
background: url(../images/author.gif) no-repeat 5px 4px #EAEBEE;
font-size: 90%;
text-transform: uppercase;
}

/* Rropcap */
.dropcap {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #999999;
font: 50px/40px Georgia, Times, serif;
}

/* Tips, Error, Message, Hightlight*/
p.error {
padding-left: 25px;
color: #BF0000;
background: url(../images/icon-error.gif) no-repeat top left;
}

p.message {
padding-left: 25px;
color: #006699;
background: url(../images/icon-info.gif) no-repeat top left;
}

p.tips {
padding-left: 25px;
color: #EE9600;
background: url(../images/icon-tips.gif) no-repeat top left;
}

.highlight {
padding: 1px 5px;
background: #FFFFCC;
font-weight: bold;
}

/* Note Style */
p.stickynote {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}

p.download {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
}

.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}

/* Small checklist */
ul.small-checklist {
list-style: none;
}

ul.small-checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/icon_list.gif) no-repeat 0 3px;
}

/* Check list */
ul.stars {
list-style: none;
}

ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}

/* Bignumber */
.bignumber {
float: left;
margin-right: 8px;
padding: 6px 7px;
display: block;
background: url(../images/ol-bg.gif) no-repeat top left;
color: #7BA566;
font: bold 20px/normal Arial, sans-serif;
}

/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}

div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
padding-left: 15px;
margin-left: 15px;
background: url(../images/author.gif) no-repeat center left;
font-weight: bold;
}

div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br.gif) no-repeat bottom right;
}

div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
}

div.bubble1 div div div div {
background: url(../images/bub1-tl.gif) no-repeat top left;
}

div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}

div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br.gif) no-repeat bottom right;
}

div.bubble2 div div {
background: url(../images/bub2-bl.gif) no-repeat bottom left;
}

div.bubble2 div div div {
background: url(../images/bub2-tr.gif) no-repeat top right;
}

div.bubble2 div div div div {
background: url(../images/bub2-tl.gif) no-repeat top left;
}

div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}

div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br.gif) no-repeat bottom right;
}

div.bubble3 div div {
background: url(../images/bub3-bl.gif) no-repeat bottom left;
}

div.bubble3 div div div {
background: url(../images/bub3-tr.gif) no-repeat top right;
}

div.bubble3 div div div div {
background: url(../images/bub3-tl.gif) no-repeat top left;
}

div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}

div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br.gif) no-repeat bottom right;
}

div.bubble4 div div {
background: url(../images/bub4-bl.gif) no-repeat bottom left;
}

div.bubble4 div div div {
background: url(../images/bub4-tr.gif) no-repeat top right;
}

div.bubble4 div div div div {
background: url(../images/bub4-tl.gif) no-repeat top left;
}

div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}

/* Legend */
.legend-title {
margin: 0;
padding: 0 3px;
float: left;
display: block;
background: #F6F6F6;
font-weight: bold;
position: absolute;
top: -10px;
left: 7px;
}

.legend {
margin: 20px 0;
padding: 0 10px;
border: 1px solid #CACACC;
background: #FFFFFF;
position: relative;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
table.blog {
}

.article_separator {
clear: both;
display: block;
height: 20px;
}

.article_column {
}

.column_separator {
padding: 0 25px;
}

/* content tables */
td.sectiontableheader {
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}

table.contentpane {
border: none;
width: 100%;
}

table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}

table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
float: right;
}

table.contenttoc a {
text-decoration: none;
}

table.contenttoc td {
padding: 1px 5px 1px 25px;
background: url(../images/bullet-list.gif) no-repeat 5% 50%;
}

table.contenttoc th {
padding: 0 0 3PX;
border-bottom: 1px solid #CCCCCC;
text-indent: 5px;
}

table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}

table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left;
}

table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
padding: 4px!important;
border-collapse: collapse;
border-spacing: 0;
}

table.pollstableborder tr.sectiontableentry1 td {
background: #ECECEC;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}

table.searchintro td {
padding: 5px!important;
}

table.adminform {
}

.adminform .inputbox {
}

.blog_more {
padding: 10px 0;
background: url(../images/hdot.gif) repeat-x top;
}

.blog_more strong {
margin: 0 0 5px;
display: block;
font-size: 125%;
}

.blog_more ul {
margin: 0;
padding: 0;
}

.blog_more ul li {
margin: 0;
padding: 0 0 0 17px;
background: url(../images/bullet.gif) no-repeat 6px 8px;
}

.category {
font-weight: bold;
}

h1.componentheading, .componentheading {
padding: 5px 0 15px;
margin: 0 0 10px;
background: url(../images/hdot.gif) repeat-x bottom;
}

.componentheading {
font-size: 200%;
font-weight: bold;
}

.contentdescription {
padding-bottom: 30px;
}

h2.contentheading, .contentheading {
padding: 5px 0 8px;
margin: 0;
font-weight: normal;
}

table.blog .contentheading {
font-size: 150%;
}

.contentheading {
font-size: 200%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
text-decoration: none !important;
}

a.readon {
float: left;
margin-top: 10px;
padding: 1px 5px 1px 14px;
border: 1px solid #F6F6F6;
display: block;
background: url(../images/arrow.png) no-repeat 5px 48%;
color: #006699;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}

a.readon:hover, a.readon:active, a.readon:focus {
border: 1px solid #ECECEC;
background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF;
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}

.moduletable {
padding: 0;
}

ul.pagination {
margin: 15px auto;
padding: 10px 0;
background: url(../images/hdot.gif) repeat-x top;
}

ul.pagination li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

ul.pagination li span{
padding: 2px 5px;
}

ul.pagination a {
padding: 2px 5px;
border: 1px solid #F6F6F6;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
border: 1px solid #ECECEC;
background: #FFFFFF;
}

.pagenavbar {
padding-left: 14px;
}

.pagenavcounter {
padding: 8px 14px 0 14px;
}

.sectiontableheader {
padding: 8px 5px;
background: #444444;
color: #FFFFFF;
}

.sectiontableheader a {
color: #FFFFFF;
}

tr.sectiontableentry1 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom;
}

tr.sectiontableentry2 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC;
}

.smalldark {
text-align: left;
}

div.syndicate div {
text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}

/* META
--------------------------------------------------------- */
.article-tools {
border-top: 1px solid #DDDDDD;
width: 100%;
float: left;
clear: both;
margin-bottom: 15px;
display: block;
background: #ECECEC;
}

.article-meta {
padding: 5px;
width: 80%;
float: left;
}

.createby {
padding: 3px 3px 3px 20px;
background: url(../images/icon-user.gif) no-repeat 0 2px;
}

.createdate {
padding: 3px 3px 3px 20px;
background: url(../images/icon-date.gif) no-repeat 0 2px;
}

.modifydate {
width: 100%;
float: left;
}

div.buttonheading {
float: right;
width: 15%;
}

.buttonheading img {
margin: 7px 5px 0 0;
border: 0;
float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
width: 100%;
margin: 0;
background: #F2F2F2;
}

#ja-containerwrap {
background: url(../images/cw-bg1.gif) repeat-y 50% 0;
}

#ja-containerwrap2 {
background: url(../images/cw-bg2.gif) no-repeat 50% 0;
}

#ja-container {
background: url(../images/c-bg1.gif) repeat-y 18% 0;
}

#ja-container2 {
padding: 20px 0;
background: url(../images/c-bg2.gif) no-repeat 18% 0;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-mainbody, #ja-mainbody-fl {
float: left;
width: 80%;
}

#ja-mainbody #ja-contentwrap {
float: right;
width: 75%;
}

#ja-mainbody-fl #ja-contentwrap {
float: left;
width: 100%;
}

#ja-mainbody-f, #ja-mainbody-fr {
float: none;
width: 100%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 74.8%;
float: right;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
float: left;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-content {
padding: 0 20px 0 40px;
}
#ja-contentwrap {
min-height: 300px;
height: auto;
}
* html #ja-contentwrap {
height: 300px;
}
#ja-mainbody-fl #ja-content {
padding-left: 0;
}

#ja-mainbody-f #ja-content {
padding: 0;
}

/* Full */
#ja-containerwrap-f {
background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6;
}

#ja-containerwrap-f #ja-containerwrap2 {
background: none;
}

#ja-containerwrap-f #ja-container,
#ja-containerwrap-f #ja-container2 {
background: none;
}

/* Full left */
#ja-containerwrap-fl {
background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6;
}

#ja-containerwrap-fl #ja-containerwrap2,
#ja-containerwrap-fl #ja-container,
#ja-containerwrap-fl #ja-container2 {
background: none;
}

/* Full right */
#ja-containerwrap-fr {
background: url(../images/cw-bg1.gif) repeat-y 50% 0;
}

#ja-containerwrap-fr #ja-containerwrap2 {
background: url(../images/cw-bg2.gif) no-repeat 50% 0;
}

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}

#ja-header {
position: relative;
height: 80px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}

/* MAIN NAVIGATION
--------------------------------------------------------- */

#ja-pathway {
font-size: 92%;
}

#ja-pathway strong {
margin-right: 5px;
font-weight: normal;
}

#ja-pathway a {
text-decoration: none;
}

#ja-pathway img {
margin: 1px 5px;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable,
div.moduletable_menu,
div.moduletable_text {
padding: 0 0 20px;
margin-bottom: 15px;
background: url(../images/hdot.gif) repeat-x bottom;
}

div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3 {
padding: 0 0 8px;
margin: 0;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

/* Module rounded */
div.module h3 {
margin: 0 -15px 10px;
padding: 8px 15px 5px;
border-bottom: 2px solid #F6F6F6;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

div.module_black,
div.module_green,
div.module_blue,
div.module_red,
div.module {
margin-bottom: 20px;
float: left;
clear: both;
width: 100%;
background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF;
}

div.module div {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

div.module div div {
background: url(../images/b-tr.gif) no-repeat top right;
}

div.module div div div {
padding: 0 15px 10px;
background: url(../images/b-tl.gif) no-repeat top left;
}

div.module_black div div div div,
div.module_green div div div div,
div.module_blue div div div div,
div.module_red div div div div,
div.module_text div div div div,
div.module div div div div {
margin: 0;
padding: 0;
float: none;
width: 99%;
background: none;
}

div.module_text h3 {
margin: 0 0 10px;
width: 100%;
clear: both;
display: block;
overflow: hidden;
}

div.module_text span {
padding: 0 3px 0 0;
float: left;
clear: both;
display: block;
background: #F6F6F6;
font-weight: bold;
}

div.module_text {
margin-bottom: 20px;
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/bt-br.gif) no-repeat bottom right #F6F6F6;
}

div.module_text div {
background: url(../images/bt-bl.gif) no-repeat bottom left;
}

div.module_text div div {
background: url(../images/bt-tr.gif) no-repeat top right;
}

div.module_text div div div {
padding: 0 15px 10px;
display: block;
background: url(../images/bt-tl.gif) no-repeat top left;
}

div.banneritem_text {
padding: 5px 0 !important;
}

/* red */
div.module_black h3,
div.module_green h3,
div.module_blue h3,
div.module_red h3 {
margin: 0 -15px 10px;
padding: 8px 15px 5px;
border-bottom: 1px solid #F6F6F6;
color: #FFFFFF;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

div.module_red {
background: url(../images/br-br.gif) no-repeat bottom right #BF0000;
color: #FFFFFF;
}

div.module_red div {
background: url(../images/br-bl.gif) no-repeat bottom left;
}

div.module_red div div {
background: url(../images/br-tr.gif) no-repeat top right;
}

div.module_red div div div {
padding: 0 15px 10px;
background: url(../images/br-tl.gif) no-repeat top left;
}

/* blue */
div.module_blue {
background: url(../images/bb-br.gif) no-repeat bottom right #006699;
color: #FFFFFF;
}

div.module_blue div {
background: url(../images/bb-bl.gif) no-repeat bottom left;
}

div.module_blue div div {
background: url(../images/bb-tr.gif) no-repeat top right;
}

div.module_blue div div div {
padding: 0 15px 10px;
background: url(../images/bb-tl.gif) no-repeat top left;
}

/* green */
div.module_green {
background: url(../images/bg-br.gif) no-repeat bottom right #7BA566;
color: #FFFFFF;
}

div.module_green div {
background: url(../images/bg-bl.gif) no-repeat bottom left;
}

div.module_green div div {
background: url(../images/bg-tr.gif) no-repeat top right;
}

div.module_green div div div {
padding: 0 15px 10px;
background: url(../images/bg-tl.gif) no-repeat top left;
}

/* black */
div.module_black {
background: url(../images/bl-br.gif) no-repeat bottom right #333333;
color: #FFFFFF;
}

div.module_black div {
background: url(../images/bl-bl.gif) no-repeat bottom left;
}

div.module_black div div {
background: url(../images/bl-tr.gif) no-repeat top right;
}

div.module_black div div div {
padding: 0 15px 10px;
background: url(../images/bl-tl.gif) no-repeat top left;
}

div.module_blue ul,
div.module_blue ol,
div.module_red ul,
div.module_red ol,
div.module_black ul,
div.module_black ol,
div.module_green ul,
div.module_green ol {
margin: 0;
padding: 0;
}

div.module_blue li,
div.module_red li,
div.module_black li,
div.module_green li {
margin-left: 20px;
padding: 0;
line-height: 150%;
}

div.module_blue a,
div.module_red a,
div.module_black a,
div.module_green a {
color: #FFFFFF;
}

div.advs {
float: left;
width: 100%;
clear: both;
display: block;
}

/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-col1 {
float: left;
width: 24.99%;
padding-top: 10px;
overflow: hidden;
}

#ja-col2 {
float: right;
width: 20%;
overflow: hidden;
}

#ja-col1 table,
#ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 ul li,
#ja-col2 ul li {
padding-left: 15px;
margin: 0;
background: url(../images/bullet.gif) no-repeat 5px 50%;
}

#ja-col1 ul, #ja-col2 ul {
margin: 0;
}

#ja-col1 ol, #ja-col2 ol {
margin-left: 5px;
}

#ja-col1 .article_separator,
#ja-col2 .article_separator {
display: none;
}

/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left div.moduletable,
.ja-box-full div.moduletable {
padding-right: 30px;
background: none;
}

.ja-box-right div.moduletable {
padding-left: 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

.ja-box-center div.moduletable {
padding: 0 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

#ja-botsl h3 {
background: none;
}

#ja-botslwrap {
border-top: 5px solid #CCCCCC;
background: #444444;
color: #CCCCCC;
}

#ja-botsl {
padding: 15px 0;
}

#ja-botsl div.moduletable {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}

#ja-botsl h3 {
margin: 0 0 12px;
padding: 0;
color: #FFFFFF;
}

#ja-botsl a {
color: #CCCCCC;
}

#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl p, #ja-botsl ol {
padding: 0;
margin: 0 !important;
}

#ja-botsl ul li {
padding: 0 0 0 15px;
margin: 0;
background: url(../images/bullet2.gif) no-repeat 3px 8px;
}

#ja-botsl ol li {
margin-left: 25px;
padding: 0 !important;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator {
display: none;
}

#ja-botsl table {
border-spacing: 0;
border-collapse: collapse;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
border-top: 5px solid #CCCCCC;
padding: 20px 0 30px;
clear: both;
background: url(../images/grad3.gif) repeat-x bottom #F6F6F6;
}

#ja-footer {
padding: 0;
color: #666666;
background: url(../images/vdot.gif) repeat-y 22% 0;
position: relative;
}

#ja-footer .copyright {
clear: both;
display: block;
padding-left: 25%;
color: #666666;
font-style: normal;
font-size: 92%;
}

#ja-footnav {
padding-left: 25%;
}

#ja-footer ul {
margin: 0 0 5px;
padding: 0;
}

#ja-footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

#ja-footer li a {
padding: 0 15px 0 0;
display: inline;
color: #666666;
font-weight: bold;
font-size: 92%;
line-height: normal;
text-decoration: none;
text-transform: uppercase;
}

#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus {
color: #333333;
text-decoration: none;
}

.ja-cert {
font-size: 92%;
position: absolute;
right: 0;
top: 18px;
}

.ja-cert a {
margin: 0 0 0 5px;
padding: 0;
border: none;
border: none;
text-decoration: none;
}

.ja-cert a span {
display: none;
}

.ja-cert a img {
border: none;
}

.banneritem {
display: block;
margin-top: 15px;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
position: absolute;
top: -100%;
}

/*usertool*/
ul.ja-usertools-font {
font-size: 11px;
position: absolute;
top: 8px;
right: 70px;
}

ul.ja-usertools-font li {
padding: 0;
margin: 0;
display: inline;
background: none;
}

/*collapsible h3*/
h3.show {
background: url(../images/arrow2.png) no-repeat 90% 60%;
cursor: pointer;
}

h3.hide {
background: url(../images/arrow3.png) no-repeat 90% 60%;
cursor: pointer;
}

/*others*/
#ja-banner {
margin: 15px 0;
text-align: center;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
margin: 10px 0;
display: block;
background: none!important;
text-decoration: none!important;
}

#form-login p {
margin: 0 0 5px;
}

#form-login ul {
margin: 10px 0 0;
}

#form-login .inputbox {
width: 90%;
}

.clr {
clear: both;
}

.hasTip img {
margin: 10px 5px 0 0;
border: none;
}

/* Tooltips */
.tool-tip {
float: left;
border: 1px solid #D4D5AA;
padding: 5px;
background: #FFFFCC;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
}

.tool-text {
margin: 0;
font-size: 100%;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
padding: 0;
margin: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
padding: 5px;
margin: 0;
color: #FFFFFF;
}

/* System Standard Messages */
#system-message dd.message ul {
background: #006699;
border: none;
}

/* System Error Messages */
#system-message dd.error ul {
background: #BF0000;
border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
background: #EE9600;
border: none;
}

/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

* html > body .clearfix {
width: 100%;
display: block;
}

* html .clearfix {
height: 1%;
}

/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}
</source>
===ja_purity/css/template_rtl.css===
<source lang="css" line>
/* COMMON STYLE
--------------------------------------------------------- */
html {
direction: rtl;
}

ul li {
padding-right: 30px;
background-position: 98% 8px;
}

ol li {
margin-right: 35px;
margin-left: -35px;
padding: 0;
}

th {
text-align: right;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
td.sectiontableheader {
border-left: 1px solid #fff;
border-right: none;
}

table.contenttoc {
float:left;
margin: 0 10px 10px 0px;
}

table.contenttoc td {
padding: 1px 25px 1px 5px;
background-position: 95% 50%;
}

table.pollstableborder {
text-align: right;
}

.blog_more ul li {
padding: 0 17px 0 0;
background-position: 98% 8px;
}

a.readon {
float: right;
padding: 1px 14px 1px 5px;
background: url(../images/rtl/arrow.png) no-repeat 95% 48%;
}

a.readon:hover, a.readon:active, a.readon:focus {
background: url(../images/rtl/arrow.png) no-repeat 95% 48% #FFFFFF;
}

ul.pagination li span{
padding: 0;
}

.pagenavbar {
padding-right: 14px;
background-position: center right;
}

.pagenavcounter {
padding: 8px 14px 0 14px;
background-position: 0 11px;
}

.smalldark {
text-align: right;
}

/* META
--------------------------------------------------------- */
.article-tools {
float: right;
}

.article-meta {
float: right;
}

.createby {
padding: 3px 20px 3px 3px;
background-position: 100% 5px;
float: right;
}

.createdate {
padding: 3px 20px 3px 3px;
background-position: 100% 5px;
float: right;
}

.buttonheading img {
margin: 7px 0 0 5px;
float: left;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-containerwrap {
background: url(../images/rtl/cw-bg12.gif) repeat-y 50% 0;
}

#ja-containerwrap-fr {
background: url(../images/rtl/cw-bg12.gif) repeat-y 50% 0;
}

#ja-containerwrap2 {
background: url(../images/rtl/cw-bg2.gif) no-repeat 50% 0;
}

#ja-container {
background: url(../images/rtl/c-bg1.gif) repeat-y 82% 0;
padding: 0;
}

#ja-container2 {
background: url(../images/rtl/c-bg2.gif) no-repeat 82% top;
padding: 20px 0;
}

#ja-mainbody, #ja-mainbody-fl {
float: right;
}

#ja-mainbody #ja-contentwrap,
#ja-mainbody-fr #ja-contentwrap,
#ja-mainbody-fl #ja-contentwrap {
float: left;
}

#ja-mainbody-fl #ja-contentwrap #ja-content {
padding-left: 20px;
}

#ja-mainbody-f, #ja-mainbody-fr {
float: right;
}

#ja-content {
padding: 0 40px 0 20px;
}
.OPE #ja-content {
padding-left: 40px;
}
.OPE #ja-mainbody #ja-content {
padding-right: 20px;
}
#ja-mainbody-fl #ja-content {
padding-right: 0;
}

/* Full */
#ja-containerwrap-f {
background: url(../images/rtl/cwf-bg.gif) repeat-x top right #F6F6F6;
}

/* Full right */
#ja-containerwrap-fl {
background: url(../images/rtl/cwf-bg.gif) repeat-x top right #F6F6F6;
}

#ja-containerwrap-fr #ja-containerwrap2 {
background: url(../images/rtl/cw-bg2.gif) no-repeat 50% 0;
}

/* HEADER
--------------------------------------------------------- */
.ja-headermask {
background-position: top left;
left: -1px;
right: auto;
}

h1.logo-text a {
right: 5px;
left: auto;
}

p.site-slogan {
right: 0;
left: auto;
}

/* Search */
#ja-search {
background-position: center right;
left: 0;
right: auto;
}

/* MAIN NAVIGATION
--------------------------------------------------------- */

/* MODULE
--------------------------------------------------------- */
div.module_black,
div.module_green,
div.module_blue,
div.module_red,
div.module {
float: right;
}

div.module_black div div div div,
div.module_green div div div div,
div.module_blue div div div div,
div.module_red div div div div,
div.module_text div div div div,
div.module div div div div {
float: none;
}

div.module_text span {
float: right;
}

div.module_text {
float: right;
}

div.module_blue li,
div.module_red li,
div.module_black li,
div.module_green li {
margin-right: 20px;
margin-left: auto;
}

div.advs {
float: right;
}

/* PATHWAY
--------------------------------------------------------- */
#ja-pathway {
}

/* right COLUMN + left COLUMN
--------------------------------------------------------- */
#ja-col1 {
float: right;
}

#ja-col2 {
float: left;
}

#ja-col1 ul li,
#ja-col2 ul li {
padding-right: 15px;
background-position: 100% 10px;
}

#ja-col1 ol, #ja-col2 ol,
#ja-col1 ul, #ja-col2 ul
{
margin-right: 5px;
}
ul.menu li.active a span {
background: none;
}

/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-right, .ja-box-center, .ja-box-left {
float: right;
}

.ja-box-left div.moduletable,
.ja-box-full div.moduletable {
padding-left: 30px;
}

.ja-box-right div.moduletable {
padding-left: 30px;
padding-right: 30px;
background-position: right;
}

.ja-box-center div.moduletable {
background-position: right;
}

#ja-botsl ul li {
padding: 0 15px 0 0;
background-position: 99% 8px;
}

#ja-botsl ol li {
margin-right: 25px;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footer {
background-position: 78% 0;
}

#ja-footer .copyright {
padding-right: 25%;
}

#ja-footnav {
padding-right: 25%;
}

#ja-footnav li{
float: right;
direction: ltr;
}

#ja-footer li a {
padding: 0 0 0 15px;
}

.ja-cert {
left: 0;
right: auto;
}

.ja-cert a {
margin: 0 5px 0 0;
}

.banneritem {
display: block;
margin-top: 15px;
}

/* MISCELLANOUS
----------------------------------------------------------- */
/*usertool*/
ul.ja-usertools-font {
left: 70px;
right: auto;
}

/*collapsible h3*/
h3.show {
background-position: 10% 60%;
}

h3.hide {
background-position: 10% 60%;
}

.hasTip img {
margin: 10px 0 0 5px;
}

/* Tooltips */
.tool-tip {
float: right;
}

.breadcrumbs {
}

.breadcrumbs a {
float: right;
}

.breadcrumbs img {
float: right;
margin-top: 10px;
padding-top: 5px;
}

/* MainNav
--------------------------------------------------------- */
#ja-mainnav{
direction: ltr;
}

#ja-mainnav li a {
direction: rtl;
}

#ja-cssmenu {
float: right;
}

#ja-cssmenu li {
float: right;
}

#ja-cssmenu li ul {
right: 0;
}

#ja-cssmenu li ul ul {
margin: -1.5em 14em 0 0; /* third-and-above-level lists */
}

#ja-cssmenu li li {
padding: 0 0 0 1em;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-cssmenu li ul a {
border-left: none;
}

#ja-cssmenu li.havesubchild,
#ja-cssmenu li.havesubchild-active {
background-position: 6% 50%;
}

body.IE6 #ja-cssmenu li ul,
body.IE7 #ja-cssmenu li ul,
body.OPE #ja-cssmenu li ul {
left: auto;
top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

body.IE6 #ja-cssmenu li.sfhover ul ul, body.IE6 #ja-cssmenu li.havechildsfhover ul ul, body.IE6 #ja-cssmenu li.havechild-activesfhover ul ul, body.IE6 #ja-cssmenu li.activesfhover ul ul,
body.IE6 #ja-cssmenu li.sfhover ul ul ul, body.IE6 #ja-cssmenu li.havechildsfhover ul ul ul, body.IE6 #ja-cssmenu li.havechild-activesfhover ul ul ul, body.IE6 #ja-cssmenu li.activesfhover ul ul ul,
body.IE7 #ja-cssmenu li.sfhover ul ul, body.IE7 #ja-cssmenu li.havechildsfhover ul ul, body.IE7 #ja-cssmenu li.havechild-activesfhover ul ul, body.IE7 #ja-cssmenu li.activesfhover ul ul,
body.IE7 #ja-cssmenu li.sfhover ul ul ul, body.IE7 #ja-cssmenu li.havechildsfhover ul ul ul, body.IE7 #ja-cssmenu li.havechild-activesfhover ul ul ul, body.IE7 #ja-cssmenu li.activesfhover ul ul ul,
body.OPE #ja-cssmenu li.sfhover ul ul, body.OPE #ja-cssmenu li.havechildsfhover ul ul, body.OPE #ja-cssmenu li.havechild-activesfhover ul ul, body.OPE #ja-cssmenu li.activesfhover ul ul,
body.OPE #ja-cssmenu li.sfhover ul ul ul, body.OPE #ja-cssmenu li.havechildsfhover ul ul ul, body.OPE #ja-cssmenu li.havechild-activesfhover ul ul ul, body.OPE #ja-cssmenu li.activesfhover ul ul ul {
left: auto;
left: auto;
top: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
body.IE6 #ja-cssmenu li.sfhover ul, body.IE6 #ja-cssmenu li.havechildsfhover ul, body.IE6 #ja-cssmenu li.havechild-activesfhover ul, body.IE6 #ja-cssmenu li.activesfhover ul,
body.IE6 #ja-cssmenu li li.sfhover ul, body.IE6 #ja-cssmenu li li.havesubchildsfhover ul, body.IE6 #ja-cssmenu li li.havesubchild-activesfhover ul, body.IE6 #ja-cssmenu li li.activesfhover ul,
body.IE6 #ja-cssmenu li li li.sfhover ul, body.IE6 #ja-cssmenu li li li.havesubchildsfhover ul, body.IE6 #ja-cssmenu li li li.havesubchild-activesfhover ul, body.IE6 #ja-cssmenu li li li.activesfhover ul,
body.IE7 #ja-cssmenu li.sfhover ul, body.IE7 #ja-cssmenu li.havechildsfhover ul, body.IE7 #ja-cssmenu li.havechild-activesfhover ul, body.IE7 #ja-cssmenu li.activesfhover ul,
body.IE7 #ja-cssmenu li li.sfhover ul, body.IE7 #ja-cssmenu li li.havesubchildsfhover ul, body.IE7 #ja-cssmenu li li.havesubchild-activesfhover ul, body.IE7 #ja-cssmenu li li.activesfhover ul,
body.IE7 #ja-cssmenu li li li.sfhover ul, body.IE7 #ja-cssmenu li li li.havesubchildsfhover ul, body.IE7 #ja-cssmenu li li li.havesubchild-activesfhover ul, body.IE7 #ja-cssmenu li li li.activesfhover ul,
body.OPE #ja-cssmenu li.sfhover ul, body.OPE #ja-cssmenu li.havechildsfhover ul, body.OPE #ja-cssmenu li.havechild-activesfhover ul, body.OPE #ja-cssmenu li.activesfhover ul,
body.OPE #ja-cssmenu li li.sfhover ul, body.OPE #ja-cssmenu li li.havesubchildsfhover ul, body.OPE #ja-cssmenu li li.havesubchild-activesfhover ul, body.OPE #ja-cssmenu li li.activesfhover ul,
body.OPE #ja-cssmenu li li li.sfhover ul, body.OPE #ja-cssmenu li li li.havesubchildsfhover ul, body.OPE #ja-cssmenu li li li.havesubchild-activesfhover ul, body.OPE #ja-cssmenu li li li.activesfhover ul {
top: auto;
}

/* TYPOGRAPY FIX FOR RTL */
pre, .code {
border-right: 5px solid #999999;
border-left: none;
}

blockquote {
padding: 1em 40px 1em 15px;
}

blockquote span.open {
float: right;
padding: 0 20px 0 0;
background-position: right top;
}

blockquote span.close {
padding: 0 0 0 20px;
background-position: bottom left;
}

/* Small quote */
.small-quote span.open-quote {
padding-left: 20px;
background-position: center left;
}

.small-quote span.close-quote {
padding-right: 20px;
background-position: center right;
}

.small-quote span.author {
padding: 2px 20px 2px 5px;
background-position: 99% 4px;
}

/* Dropcap */
.dropcap {
float: right;
padding: 4px 0 0 8px;
}

/* Note Style */
p.stickynote {
padding: 10px 40px 10px 0;
background-position: 99% 50%;
}

p.download {
padding: 10px 40px 10px 0;
background-position: 99% 50%;
}

.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-right: 15px;
padding: 0 20px 5px 0px;
background-position: right 3px;
}
/* Small checklist */
ul.small-checklist {
list-style: none;
}

ul.small-checklist li {
margin-right: 15px;
padding: 0 20px 5px 0;
background-position: right 3px;
}

/* Check list */
ul.stars {
list-style: none;
}

ul.stars li {
margin-right: 15px;
padding: 0px 20px 5px 0;
background-position: right 3px;
}

.IE7 ul li,
.IE7 ul.checklist li,
.IE7 ul.small-checklist li,
.IE7 ul.stars li
{
padding-right: 40px;
}

/* Tips, Error, Message, Hightlight*/
p.error {
padding-right: 25px;
background-position: top right;
}

p.message {
padding-right: 25px;
background-position: top right;
}

p.tips {
padding-right: 25px;
background-position: top right;
}

/* Bignumber */
.bignumber {
float: right;
margin-left: 8px;
padding: 6px 7px;
display: block;
background-position: top right;
}

/* Talking box. Thinking box. */
div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
padding-right: 15px;
margin-right: 15px;
background-position: center right;
float: right;
}

div.bubble1 div {
background: url(../images/rtl/bub12-br.gif) no-repeat bottom left;
}

div.bubble1 div div {
background: url(../images/rtl/bub12-bl.gif) no-repeat bottom right;
}

div.bubble1 div div div {
background: url(../images/rtl/bub12-tr.gif) no-repeat top left;
}

div.bubble1 div div div div {
background: url(../images/rtl/bub12-tl.gif) no-repeat top right;
}

div.bubble2 div {
background: url(../images/rtl/bub22-br.gif) no-repeat bottom left;
}

div.bubble2 div div {
background: url(../images/rtl/bub22-bl.gif) no-repeat bottom right;
}

div.bubble2 div div div {
background: url(../images/rtl/bub22-tr.gif) no-repeat top left;
}

div.bubble2 div div div div {
background: url(../images/rtl/bub22-tl.gif) no-repeat top right;
}

div.bubble3 div {
background: url(../images/rtl/bub32-br.gif) no-repeat bottom left;
}

div.bubble3 div div {
background: url(../images/rtl/bub32-bl.gif) no-repeat bottom right;
}

div.bubble3 div div div {
background: url(../images/rtl/bub32-tr.gif) no-repeat top left;
}

div.bubble3 div div div div {
background: url(../images/rtl/bub32-tl.gif) no-repeat top right;
}

div.bubble4 div {
background: url(../images/rtl/bub42-br.gif) no-repeat bottom left;
}

div.bubble4 div div {
background: url(../images/rtl/bub42-bl.gif) no-repeat bottom right;
}

div.bubble4 div div div {
background: url(../images/rtl/bub42-tr.gif) no-repeat top left;
}

div.bubble4 div div div div {
background: url(../images/rtl/bub42-tl.gif) no-repeat top right;
}

/* Legend */
.legend-title {
display: block;
float: left;
right: 7px;
left: auto;
}
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/template.css

2009-06-13T13:36:16Z

Jwwicks: Added Template CSS files source

J1.5:Customising the JA Purity template/header

2009-06-13T12:30:35Z

Jwwicks:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, ja_templatetools.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
ja_templatetools.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
ja_templatetools.php
css/
template.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>

</source>
===ja_purity/ja_templatetools.php===
====getParam method====
<source lang="php" line start="49">
function getParam ($param, $default='') {
if (isset($this->_params_cookie[$param])) {
return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_params_cookie[$param]);
}
return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_tpl->params->get($param, $default));
}
</source>
====genToolsMenu method====
<source lang="php" line start="69">
function genToolMenu($_array_tools=null, $imgext = 'gif'){
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
?>
<ul class="ja-usertools-font">
<li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
</ul>
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
<?php
}
}
</source>
====templateurl method====
<source lang="php" line start="169">
function templateurl(){
return JURI::base()."templates/".$this->template;
}
</source>
====getRandomImage method====
<source lang="php" line start="173">
function getRandomImage ($img_folder) {
$imglist=array();

mt_srand((double)microtime()*1000);

//use the directory class
$imgs = dir($img_folder);

//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ($file = $imgs->read()) {
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
$imglist[] = $file;
}
closedir($imgs->handle);

if(!count($imglist)) return '';

//generate a random number between 0 and the number of images
$random = mt_rand(0, count($imglist)-1);
$image = $imglist[$random];

return $image;
}
</source>
====sitename method====
<source lang="php" line start="201">
function sitename() {
$config = new JConfig();
return $config->sitename;
}
</source>

==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="921">
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}

#ja-header {
position: relative;
height: 80px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
===ja_purity/css/template_rtl.css===
<source lang="css" line start="172">
/* HEADER
--------------------------------------------------------- */
.ja-headermask {
background-position: top left;
left: -1px;
right: auto;
}

h1.logo-text a {
right: 5px;
left: auto;
}

p.site-slogan {
right: 0;
left: auto;
}

/* Search */
#ja-search {
background-position: center right;
left: 0;
right: auto;
}
</source>
===ja_purity/styles/header/blue/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #006699;
color: #C3DFED;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #C3DFED;
}

h1.logo-text a {
color: #C3DFED !important;
}

p.site-slogan {
background: #1E7CAB;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #005A87;
color: #C3DFED;
background: #1E7CAB;
}
</source>
===ja_purity/styles/header/green/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #7BA566;
color: #E4EFDF;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #E4EFDF;
}

h1.logo-text a {
color: #E4EFDF !important;
}

p.site-slogan {
background: #9DBF8C;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #658854;
color: #E4EFDF;
background: #9DBF8C;
}
</source>

==Image Files==
==Javascript Files==
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header

2009-06-13T12:28:39Z

Jwwicks: /* ja_purity/ja_templatetools.php */ Added siteName method

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>

</source>
===ja_purity/ja_templatetools.php===
====getParam method====
<source lang="php" line start="49">
function getParam ($param, $default='') {
if (isset($this->_params_cookie[$param])) {
return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_params_cookie[$param]);
}
return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_tpl->params->get($param, $default));
}
</source>
====genToolsMenu method====
<source lang="php" line start="69">
function genToolMenu($_array_tools=null, $imgext = 'gif'){
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
?>
<ul class="ja-usertools-font">
<li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
</ul>
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
<?php
}
}
</source>
====templateurl method====
<source lang="php" line start="169">
function templateurl(){
return JURI::base()."templates/".$this->template;
}
</source>
====getRandomImage method====
<source lang="php" line start="173">
function getRandomImage ($img_folder) {
$imglist=array();

mt_srand((double)microtime()*1000);

//use the directory class
$imgs = dir($img_folder);

//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ($file = $imgs->read()) {
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
$imglist[] = $file;
}
closedir($imgs->handle);

if(!count($imglist)) return '';

//generate a random number between 0 and the number of images
$random = mt_rand(0, count($imglist)-1);
$image = $imglist[$random];

return $image;
}
</source>
====sitename method====
<source lang="php" line start="201">
function sitename() {
$config = new JConfig();
return $config->sitename;
}
</source>

==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="921">
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}

#ja-header {
position: relative;
height: 80px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
===ja_purity/css/template_rtl.css===
<source lang="css" line start="172">
/* HEADER
--------------------------------------------------------- */
.ja-headermask {
background-position: top left;
left: -1px;
right: auto;
}

h1.logo-text a {
right: 5px;
left: auto;
}

p.site-slogan {
right: 0;
left: auto;
}

/* Search */
#ja-search {
background-position: center right;
left: 0;
right: auto;
}
</source>
===ja_purity/styles/header/blue/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #006699;
color: #C3DFED;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #C3DFED;
}

h1.logo-text a {
color: #C3DFED !important;
}

p.site-slogan {
background: #1E7CAB;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #005A87;
color: #C3DFED;
background: #1E7CAB;
}
</source>
===ja_purity/styles/header/green/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #7BA566;
color: #E4EFDF;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #E4EFDF;
}

h1.logo-text a {
color: #E4EFDF !important;
}

p.site-slogan {
background: #9DBF8C;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #658854;
color: #E4EFDF;
background: #9DBF8C;
}
</source>

==Image Files==
==Javascript Files==
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header

2009-06-13T12:25:00Z

Jwwicks: /* ja_purity/ja_templatetools.php */ Added more functions used in header from ja_templatetools.php

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>

</source>
===ja_purity/ja_templatetools.php===
====getParam method====
<source lang="php" line start="49">
function getParam ($param, $default='') {
if (isset($this->_params_cookie[$param])) {
return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_params_cookie[$param]);
}
return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_tpl->params->get($param, $default));
}
</source>
====genToolsMenu method====
<source lang="php" line start="69">
function genToolMenu($_array_tools=null, $imgext = 'gif'){
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
?>
<ul class="ja-usertools-font">
<li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
</ul>
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
<?php
}
}
</source>
====templateurl method====
<source lang="php" line start="169">
function templateurl(){
return JURI::base()."templates/".$this->template;
}
</source>
====getRandomImage method====
<source lang="php" line start="173">
function getRandomImage ($img_folder) {
$imglist=array();

mt_srand((double)microtime()*1000);

//use the directory class
$imgs = dir($img_folder);

//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ($file = $imgs->read()) {
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
$imglist[] = $file;
}
closedir($imgs->handle);

if(!count($imglist)) return '';

//generate a random number between 0 and the number of images
$random = mt_rand(0, count($imglist)-1);
$image = $imglist[$random];

return $image;
}
</source>

==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="921">
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}

#ja-header {
position: relative;
height: 80px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
===ja_purity/css/template_rtl.css===
<source lang="css" line start="172">
/* HEADER
--------------------------------------------------------- */
.ja-headermask {
background-position: top left;
left: -1px;
right: auto;
}

h1.logo-text a {
right: 5px;
left: auto;
}

p.site-slogan {
right: 0;
left: auto;
}

/* Search */
#ja-search {
background-position: center right;
left: 0;
right: auto;
}
</source>
===ja_purity/styles/header/blue/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #006699;
color: #C3DFED;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #C3DFED;
}

h1.logo-text a {
color: #C3DFED !important;
}

p.site-slogan {
background: #1E7CAB;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #005A87;
color: #C3DFED;
background: #1E7CAB;
}
</source>
===ja_purity/styles/header/green/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #7BA566;
color: #E4EFDF;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #E4EFDF;
}

h1.logo-text a {
color: #E4EFDF !important;
}

p.site-slogan {
background: #9DBF8C;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #658854;
color: #E4EFDF;
background: #9DBF8C;
}
</source>

==Image Files==
==Javascript Files==
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header

2009-06-13T12:13:31Z

Jwwicks: /* CSS Files */ Added right to left CSS

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>

</source>
===ja_purity/ja_templatetools.php===
<source lang="php" line start="69">
function genToolMenu($_array_tools=null, $imgext = 'gif'){
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
?>
<ul class="ja-usertools-font">
<li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
</ul>
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
<?php
}
}
</source>

==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="921">
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}

#ja-header {
position: relative;
height: 80px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
===ja_purity/css/template_rtl.css===
<source lang="css" line start="172">
/* HEADER
--------------------------------------------------------- */
.ja-headermask {
background-position: top left;
left: -1px;
right: auto;
}

h1.logo-text a {
right: 5px;
left: auto;
}

p.site-slogan {
right: 0;
left: auto;
}

/* Search */
#ja-search {
background-position: center right;
left: 0;
right: auto;
}
</source>
===ja_purity/styles/header/blue/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #006699;
color: #C3DFED;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #C3DFED;
}

h1.logo-text a {
color: #C3DFED !important;
}

p.site-slogan {
background: #1E7CAB;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #005A87;
color: #C3DFED;
background: #1E7CAB;
}
</source>
===ja_purity/styles/header/green/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #7BA566;
color: #E4EFDF;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #E4EFDF;
}

h1.logo-text a {
color: #E4EFDF !important;
}

p.site-slogan {
background: #9DBF8C;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #658854;
color: #E4EFDF;
background: #9DBF8C;
}
</source>

==Image Files==
==Javascript Files==
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header

2009-06-13T12:03:50Z

Jwwicks: /* HTML and PHP Files */ Added ja_templatetools.php

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="110">

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>

</source>
===ja_purity/ja_templatetools.php===
<source lang="php" line start="69">
function genToolMenu($_array_tools=null, $imgext = 'gif'){
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
?>
<ul class="ja-usertools-font">
<li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
</ul>
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
<?php
}
}
</source>

==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="921">
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}

#ja-header {
position: relative;
height: 80px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
===ja_purity/styles/header/blue/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #006699;
color: #C3DFED;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #C3DFED;
}

h1.logo-text a {
color: #C3DFED !important;
}

p.site-slogan {
background: #1E7CAB;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #005A87;
color: #C3DFED;
background: #1E7CAB;
}
</source>
===ja_purity/styles/header/green/style.css===
<source lang="css" line>
#ja-headerwrap {
background: #7BA566;
color: #E4EFDF;
}

.ja-headermask {
background: url(images/header-mask.png) no-repeat top right;
}

#ja-header a {
color: #E4EFDF;
}

h1.logo-text a {
color: #E4EFDF !important;
}

p.site-slogan {
background: #9DBF8C;
}

#ja-search {
background: url(images/icon-search.gif) no-repeat center left;
}

#ja-search .inputbox {
border: 1px solid #658854;
color: #E4EFDF;
background: #9DBF8C;
}
</source>
==Image Files==
==Javascript Files==
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/footer/syndication

2009-06-13T11:20:24Z

Jwwicks:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, XXXXX and XXXX, are in the following directories:<br />
<pre>
templates/ja_purity
XXXXX.php
css/
XXXXX.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
XXXXX
css/
XXXXXX
</pre>
==HTML and PHP Files==
===ja_purity/XXXXX.php===
<source lang="php" line start="">
</source>
==CSS Files==
===ja_purity/css/XXXXX.css===
<source lang="css" line start="">
</source>
==Image Files==
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/spotlight/user5

2009-06-13T11:19:50Z

Jwwicks:

J1.5:Customising the JA Purity template/spotlight/user2

2009-06-13T11:19:17Z

Jwwicks:

J1.5:Customising the JA Purity template/spotlight/user1

2009-06-13T11:18:48Z

Jwwicks:

J1.5:Customising the JA Purity template/spotlight

2009-06-13T11:18:27Z

Jwwicks:

J1.5:Customising the JA Purity template/content/banner

2009-06-13T11:17:54Z

Jwwicks:

J1.5:Customising the JA Purity template/content/breadcrumb

2009-06-13T11:17:33Z

Jwwicks:

J1.5:Customising the JA Purity template/content

2009-06-13T11:17:12Z

Jwwicks:

J1.5:Customising the JA Purity template/right

2009-06-13T11:16:42Z

Jwwicks:

J1.5:Customising the JA Purity template/left

2009-06-13T11:15:27Z

Jwwicks:

J1.5:Customising the JA Purity template/spotlight/top

2009-06-13T11:14:52Z

Jwwicks:

J1.5:Customising the JA Purity template/hornav

2009-06-13T11:13:58Z

Jwwicks:

J1.5:Customising the JA Purity template/header/search/user4

2009-06-13T11:13:27Z

Jwwicks:

J1.5:Customising the JA Purity template/header/search

2009-06-13T11:13:03Z

Jwwicks:

J1.5:Customising the JA Purity template/header/accessibility

2009-06-13T11:12:19Z

Jwwicks:

J1.5:Customising the JA Purity template/header/logo

2009-06-13T11:11:25Z

Jwwicks: Added generic look for these pages - Probably need to create this as a template

J1.5:Customising the JA Purity template/body

2009-06-13T11:00:55Z

Jwwicks:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="99">
<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>

<div id="ja-wrapper">


<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>



<?php if ($this->countModules('hornav')): ?>
<div id="ja-mainnavwrap">
<div id="ja-mainnav" class="clearfix">
<jdoc:include type="modules" name="hornav" />
</div>
</div>
<?php endif; ?>


<div id="ja-containerwrap<?php echo $divid; ?>">
<div id="ja-containerwrap2">
<div id="ja-container">
<div id="ja-container2" class="clearfix">

<div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">


<div id="ja-contentwrap">
<div id="ja-content">

<jdoc:include type="message" />

<?php if(!$tmpTools->isFrontPage()) : ?>
<div id="ja-pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<?php endif ; ?>

<jdoc:include type="component" />

<?php if($this->countModules('banner')) : ?>
<div id="ja-banner">
<jdoc:include type="modules" name="banner" />
</div>
<?php endif; ?>

</div>
</div>


<?php if ($this->countModules('left')): ?>

<div id="ja-col1">
<jdoc:include type="modules" name="left" style="xhtml" />
</div><br />

<?php endif; ?>

</div>

<?php if ($this->countModules('right')): ?>

<div id="ja-col2">
<jdoc:include type="modules" name="right" style="jarounded" />
</div><br />

<?php endif; ?>

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

<?php
$spotlight = array ('user1','user2','top','user5');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>

<div id="ja-botslwrap">
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user1') ): ?>
<div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user2') ): ?>
<div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('top') ): ?>
<div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user5') ): ?>
<div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>

</div>
</div>

<?php endif; ?>


<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

<div id="ja-footnav">
<jdoc:include type="modules" name="user3" />
</div>

<div class="copyright">
<jdoc:include type="modules" name="footer" />
</div>

<div class="ja-cert">
<jdoc:include type="modules" name="syndicate" />
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
</a>
<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
</a>
</div>

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


</div>

<jdoc:include type="modules" name="debug" />

</body>
</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line>
/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
color: #000000;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
}

body#bd {
color: #333333;
background: #F2F2F2;
}

body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}
</source>
==Image Files==
==Javascript Files==
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header

2009-06-13T10:58:01Z

Jwwicks: Created basic stub

J1.5:Customising the JA Purity template/body

2009-06-13T10:35:52Z

Jwwicks:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>

==ja_purity/index.php==
<source lang="php" line start="99">
<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>

<div id="ja-wrapper">


<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>



<?php if ($this->countModules('hornav')): ?>
<div id="ja-mainnavwrap">
<div id="ja-mainnav" class="clearfix">
<jdoc:include type="modules" name="hornav" />
</div>
</div>
<?php endif; ?>


<div id="ja-containerwrap<?php echo $divid; ?>">
<div id="ja-containerwrap2">
<div id="ja-container">
<div id="ja-container2" class="clearfix">

<div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">


<div id="ja-contentwrap">
<div id="ja-content">

<jdoc:include type="message" />

<?php if(!$tmpTools->isFrontPage()) : ?>
<div id="ja-pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<?php endif ; ?>

<jdoc:include type="component" />

<?php if($this->countModules('banner')) : ?>
<div id="ja-banner">
<jdoc:include type="modules" name="banner" />
</div>
<?php endif; ?>

</div>
</div>


<?php if ($this->countModules('left')): ?>

<div id="ja-col1">
<jdoc:include type="modules" name="left" style="xhtml" />
</div><br />

<?php endif; ?>

</div>

<?php if ($this->countModules('right')): ?>

<div id="ja-col2">
<jdoc:include type="modules" name="right" style="jarounded" />
</div><br />

<?php endif; ?>

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

<?php
$spotlight = array ('user1','user2','top','user5');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>

<div id="ja-botslwrap">
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user1') ): ?>
<div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user2') ): ?>
<div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('top') ): ?>
<div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user5') ): ?>
<div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>

</div>
</div>

<?php endif; ?>


<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

<div id="ja-footnav">
<jdoc:include type="modules" name="user3" />
</div>

<div class="copyright">
<jdoc:include type="modules" name="footer" />
</div>

<div class="ja-cert">
<jdoc:include type="modules" name="syndicate" />
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
</a>
<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
</a>
</div>

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


</div>

<jdoc:include type="modules" name="debug" />

</body>
</source>
==ja_purity/css/template.css==
<source lang="css" line>
/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
color: #000000;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
}

body#bd {
color: #333333;
background: #F2F2F2;
}

body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/body

2009-06-13T10:28:02Z

Jwwicks:

{{stub}}
==ja_purity/index.php==
<source lang="php" line start="99">
<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>

<div id="ja-wrapper">


<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

<div class="ja-headermask"> </div>

<?php
$siteName = $tmpTools->sitename();
if ($tmpTools->getParam('logoType')=='image'): ?>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
<h1 class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
</h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
<?php endif; ?>

<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>

</div>
</div>



<?php if ($this->countModules('hornav')): ?>
<div id="ja-mainnavwrap">
<div id="ja-mainnav" class="clearfix">
<jdoc:include type="modules" name="hornav" />
</div>
</div>
<?php endif; ?>


<div id="ja-containerwrap<?php echo $divid; ?>">
<div id="ja-containerwrap2">
<div id="ja-container">
<div id="ja-container2" class="clearfix">

<div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">


<div id="ja-contentwrap">
<div id="ja-content">

<jdoc:include type="message" />

<?php if(!$tmpTools->isFrontPage()) : ?>
<div id="ja-pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<?php endif ; ?>

<jdoc:include type="component" />

<?php if($this->countModules('banner')) : ?>
<div id="ja-banner">
<jdoc:include type="modules" name="banner" />
</div>
<?php endif; ?>

</div>
</div>


<?php if ($this->countModules('left')): ?>

<div id="ja-col1">
<jdoc:include type="modules" name="left" style="xhtml" />
</div><br />

<?php endif; ?>

</div>

<?php if ($this->countModules('right')): ?>

<div id="ja-col2">
<jdoc:include type="modules" name="right" style="jarounded" />
</div><br />

<?php endif; ?>

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

<?php
$spotlight = array ('user1','user2','top','user5');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>

<div id="ja-botslwrap">
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user1') ): ?>
<div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user2') ): ?>
<div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('top') ): ?>
<div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user5') ): ?>
<div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>

</div>
</div>

<?php endif; ?>


<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

<div id="ja-footnav">
<jdoc:include type="modules" name="user3" />
</div>

<div class="copyright">
<jdoc:include type="modules" name="footer" />
</div>

<div class="ja-cert">
<jdoc:include type="modules" name="syndicate" />
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
</a>
<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
</a>
</div>

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


</div>

<jdoc:include type="modules" name="debug" />

</body>
</source>
==ja_purity/css/template.css==
<source lang="css" line>
/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
color: #000000;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
}

body#bd {
color: #333333;
background: #F2F2F2;
}

body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>