J1.5:Customising the JA Purity template

Revision as of 10:27, 20 May 2011

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.

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 Mvangeest (talk| contribs) 2 years ago. (Purge)

Introduction

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

1. Screen width configuration (Fluid / Narrow / Wide-screen / 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, and Opera

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

Before You Start

Before you start hacking away at the default installed JA_Purity template you may want to do ONE of the following:

Option One:

• Create a new directory templates/my_japurity
• Copy the contents of the original ja_purity directory to the my_japurity directory.
• Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini
• Go to the language/en-GB directory and copy language/en-GB/en-GB.tpl_ja_purity.ini to en-GB.tpl_my_ja_purity.ini
• Open the templateDetails.xml file in the my_japurity directory and change ALL references for the original ja_purity directory to the new directory my_japurity.

  3. <name>JA_Purity</name>

  326. <language tag="en-GB">en-GB.tpl_ja_purity.ini</language>

  330. <language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language>

  388. <param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />

  389. <param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />

  390. <param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" />

Option Two:

• Download the 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.

Doing one of these options will save you from worrying about any future updates to the Joomla source code that might overwrite your existing 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)

Front Page

Click on the picture to see the descriptions (if available)

Positions

Classes/IDs

Body

• JA Purity body

Header

• JA Purity header
  • JA Purity logo
  • JA Purity accessibility
  • JA Purity search
    • JA Purity user4

Horizontal Navigation

• JA Purity horizontal navigation

Top

• JA Purity top

Left

• JA Purity left

Right

• JA Purity right

Main

• JA Purity content
  • JA Purity breadcrumbs
  • JA Purity banners

Breadcrumbs

• JA Purity breadcrumbs

Spotlight

• JA Purity spotlight
  • JA Purity user 1
  • JA Purity user 2
  • JA Purity top
  • JA Purity user 5

User 1

• JA Purity user 1

User 2

• JA Purity user 2

User 3

• JA Purity user3

User 4

• JA Purity user 4

User 5

• JA Purity user 5

Syndication

• JA Purity Syndication

Footer

• JA Purity Footer
  • JA Purity Syndication
  • JA Purity user3

CSS Files

• JA Purity template.css

Customisation - Basics

Administration Features

Enable Horizontal Navigation Menus with drop down menus

Customising Module Position and Content

• Customisation - Header Area
• Customisation - Module Position Left
• Customisation - Main Content Area
• Customisation - Module Position Right
• Customisation - Spotlight Area
• Customisation - Module Position Footer

Customising the Logo

• Customising the Logo
• Changing the Position of Your Logo
• Using one image for Header and Logo

Customising the Header

• Customising the Header Background Images
• Changing the Size of the Header
• Adding or Changing the Header Color Scheme
• Removing the Rotating Header Graphics
• Removing the Text Larger / Smaller AAA icon
• Removing the Magnifying Glass Icon

Customising the Favicon

• Customising the Favorite Icon

Customising Horizontal Navigation Menus

• Centering the Horizontal Menus
• Changing the Color of the Horizontal Menus
• Using a Gradient Image for the Background in the Horizontal Menus
• Allowing Right to Left language use of Horizontal Menu

Customisation - Intermediate

• Customising Accessibility
  
• Customising Searching

Customisation - Advanced

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

A forum topic with some information about this template