Difference between revisions of "Customising the JA Purity template"

From Joomla! Documentation

m (Added link to Horizontal Menu with Gradient Background to Tutorial)
m (Added several links to Class and ID pages)
Line 38: Line 38:
desc bottom-left
desc bottom-left
=== Positions ===
[[Image:JA Purity Tutorial Positions.png|640 px]]
[[Image:JA Purity Tutorial Positions.png|640 px]]
=== Header ===
=== Body ===
=== Top ===
*[[Ja purity template body|JA Purity body]]
=== Left ===
=== Main ===
*[[Ja purity template header|JA Purity header]]
=== Right ===
**[[Ja purity template header logo|JA Purity logo]]
=== Footer ===
**[[Ja purity template header accessibility|JA Purity accessibility]]
=== Horizontal Navigation ===
**[[Ja purity template header search|JA Purity search]]
=== Breadcrumbs ===
***[[Ja purity template header search user4 |JA Purity user4]]
=== User 1 ===
====Horizontal Navigation====
=== User 2 ===
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
=== User 3 ===
=== User 4 ===
*[[Ja purity template spotlight top|JA Purity top]]
=== User 5 ===
=== Syndicate ===
*[[Ja purity template left|JA Purity left]]
=== CSS ===
*[[Ja purity template right|JA Purity right]]
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
*[[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]]
*[[Ja purity template footer syndication|JA Purity Syndication]]
*[[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 ==
== Customisation - Basics ==

Revision as of 04:26, 13 June 2009

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.
Documentation all together tranparent small.png
Under Construction

This article or section is in the process of an expansion or major restructuring. You are welcome to assist in its construction by editing it as well. If this article or section has not been edited in several days, please remove this template.
This article was last edited by Jwwicks (talk| contribs) 6 years ago. (Purge)


JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by and features the following:

  1. Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
  2. Multiple colors schemes (Red, Green, Blue and Black )
  3. Well Structured, xHTML/CSS validated and SEO-optimized source
  4. Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera

If you have a support question about the JA Purity template check for a solution on the following forum.

Before You Start

Before you start hacking away at the template you may want to download the tutorial template. This will save you from worrying about any updates to the Joomla source that might overwrite your edits. Once you download the archive, rename it as and then log into the Administration area of your Joomla site and install the template. This tutorial is based on the latest template version as of Joomla version 1.5.11. You may want to use the modifications to index.php since they strip out some embedded text strings in the source and use the MACROS in the language initialization files.

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 Customise the Logo rect 253 9 1102 67 Customise the Header Background rect 1140 13 1197 34 Customise Accessibility rect 1113 40 1265 64 Customise Searching rect 0 76 279 657 Customise - Module Position Left rect 278 76 1002 657 Customise - Main Content Area rect 1002 76 1280 657 Customise - Module Position Right rect 0 657 1280 817 Customise - Spotlight Area rect 0 817 1280 1024 Customise - Module Position Footer rect 0 0 1280 73 Customise Header Area default Customising the JA Purity template desc bottom-left </imagemap>


JA Purity Tutorial Positions.png




Horizontal Navigation







User 1

User 2

User 3

User 4

User 5



CSS Files

Customisation - Basics

Administration Features

Enable Horizontal Navigation Menus

Customise Module Position and Content

Customise - Header Area
Customise - Module Position Left
Customise - Main Content Area
Customise - Module Position Right
Customise - Spotlight Area
Customise - Module Position Footer

Customise the Logo
Change the Position of Your Logo

Customise the Header

Customise the Header Background
Change the Size of the Header
Add or Change the Header Color Scheme

Customise the Favicon

Customise the Favorite Icon

Customise Horizontal Navigation Menus

Center the Horizontal Menus
Change the Color of the Horizontal Menus
Use a Gradient Image for the Background in the Horizontal Menus

Customisation - Intermediate

Customise Accessibility
Customise Searching

Customisation - Advanced

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

Some information about this template