J1.5

Difference between revisions of "Customising the JA Purity template"

From Joomla! Documentation

m (version tutorial template)
(14 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{underconstruction}}
+
{{version/tutor|1.5}}{{underconstruction}}
 
== Introduction ==
 
== 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:
 
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:
<br />
+
 
 
# Screen width configuration (Fluid / Narrow / Wide-screen / Fixed in pixel or percentage)
 
# Screen width configuration (Fluid / Narrow / Wide-screen / Fixed in pixel or percentage)
 
# Multiple colors schemes (Red, Green, Blue and Black)
 
# Multiple colors schemes (Red, Green, Blue and Black)
 
# Well Structured, xHTML/CSS validated and SEO-optimized source
 
# Well Structured, xHTML/CSS validated and SEO-optimized source
 
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, and Opera
 
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, and 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].  
+
If you have a support question about the JA Purity template check for a solution on [[jforum:541|the JA Purity forum]].  
  
 
=== Before You Start ===
 
=== Before You Start ===
Before you start hacking away at the template you may want to do ONE of the following:
+
Before you start hacking away at the default installed JA_Purity template you may want to do ONE of the following:
  
*Create a 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. Do the same in the language/en-GB directory. 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.
+
'''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.
 
*:<source lang="xml" line start="3"><name>JA_Purity</name></source>
 
*:<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="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
Line 21: Line 26:
 
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND 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>
 
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
 +
 +
'''Option Two:'''
 
*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.  
 
*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 existing edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.
+
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 ==
 
== Template Layout ==
Line 37: Line 44:
 
<imagemap>
 
<imagemap>
 
Image:JA_Purity_Tutorial_Main.png|640px
 
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
+
rect 19 9 220 67 [[Customising the JA Purity template/customisations/Replacing the Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
+
rect 253 9 1102 67 [[Customising the JA Purity template/customisations/Replacing the header pictures|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
+
rect 1140 13 1197 34 [[Customising the JA Purity template/header/accessibility|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
+
rect 1113 40 1265 64 [[Customising the JA Purity template/header/search|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
+
rect 0 76 279 657 [[Customising the JA Purity template/left|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
+
rect 278 76 1002 657 [[Customising the JA Purity template/content|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
+
rect 1002 76 1280 657 [[Customising the JA Purity template/right|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
+
rect 0 657 1280 817 [[Customising the JA Purity template/spotlight|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
+
rect 0 817 1280 1024 [[Customising the JA Purity template/footer|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
+
rect 0 0 1280 73 [[Customising the JA Purity template/header|Customise Header Area]]
 
default [[Customising the JA Purity template]]
 
default [[Customising the JA Purity template]]
 
desc bottom-left
 
desc bottom-left
Line 56: Line 63:
 
===Classes/IDs===
 
===Classes/IDs===
 
====Body====
 
====Body====
*[[Ja purity template body|JA Purity body]]
+
*[[/body|JA Purity body]]
 
====Header====
 
====Header====
*[[Ja purity template header|JA Purity header]]
+
*[[/header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
+
**[[/header/logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
+
**[[/header/accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
+
**[[/header/search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
+
***[[/header/search/user4|JA Purity user4]]
 
====Horizontal Navigation====
 
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
+
*[[/hornav|JA Purity horizontal navigation]]
 
====Top====
 
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
+
*[[/spotlight/top|JA Purity top]]
 
====Left====
 
====Left====
*[[Ja purity template left|JA Purity left]]
+
*[[/left|JA Purity left]]
 
====Right====
 
====Right====
*[[Ja purity template right|JA Purity right]]
+
*[[/right|JA Purity right]]
 
====Main====
 
====Main====
*[[Ja purity template content|JA Purity content]]
+
*[[/content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
+
**[[/content/breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
+
**[[/content/banner|JA Purity banners]]
 
====Breadcrumbs====
 
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
+
*[[/content/breadcrumb|JA Purity breadcrumbs]]
 
====Spotlight====
 
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
+
*[[/spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
+
**[[/spotlight/user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
+
**[[/spotlight/user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
+
**[[/spotlight/top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
+
**[[/spotlight/user5|JA Purity user 5]]
 
====User 1====
 
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
+
*[[/spotlight/user1|JA Purity user 1]]
 
====User 2====
 
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
+
*[[/spotlight/user2|JA Purity user 2]]
 
====User 3====
 
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
+
*[[/footer/user3|JA Purity user3]]
 
====User 4====
 
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
+
*[[/header/search/user4|JA Purity user 4]]
 
====User 5====
 
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
+
*[[/spotlight/user5|JA Purity user 5]]
 
====Syndication====
 
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
+
*[[/footer/syndication|JA Purity Syndication]]
 
====Footer====
 
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
+
*[[/footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
+
**[[/footer/syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
+
**[[/footer/user3|JA Purity user3]]
 
===CSS Files===
 
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]
+
*[[/template.css|JA Purity template.css]]
  
 
== Customisation - Basics ==
 
== Customisation - Basics ==
 
=== Administration Features ===
 
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]
+
[[/customisations/Enabling hornav submenus|Enable Horizontal Navigation Menus with drop down menus]]
  
=== Customise Module Position and Content ===
+
=== Customising Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
+
* [[/header|Customisation - Header Area]]
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
+
* [[/left|Customisation - Module Position Left]]
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
+
* [[/content|Customisation - Main Content Area]]
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
+
* [[/right|Customisation - Module Position Right]]
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
+
* [[/spotlight|Customisation - Spotlight Area]]
[[Modify module position footer in ja purity|Customise - Module Position Footer]]
+
* [[/footer|Customisation - Module Position Footer]]
  
=== Customise the Logo ===
+
=== Customising the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
+
* [[/customisations/Replacing the Joomla! Logo|Customising the Logo]]
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]<br />
+
* [[/customisations/Changing the position of your logo|Changing the Position of Your Logo]]
[[Use single image for header in ja purity|Use one image for Header and Logo]]
+
* [[/customisations/Using a single image for header and logo|Using one image for Header and Logo]]
  
=== Customise the Header ===
+
=== Customising the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background Images]]<br />
+
* [[/customisations/Replacing the header pictures|Customising the Header Background Images]]
[[Ja_Purity resize header|Change the Size of the Header]]<br />
+
* [[/customisations/Resizing the header|Changing the Size of the Header]]
[[Add or change header color scheme|Add or Change the Header Color Scheme]]
+
* [[/customisations/Adding or changing a header colour scheme|Adding or Changing the Header Color Scheme]]
 +
* [[/customisations/Removing the rotating header graphics|Removing the Rotating Header Graphics]]
 +
* [[/customisations/Removing the Text Larger / Smaller AAA icon|Removing the Text Larger / Smaller AAA icon]]
 +
* [[/customisations/Removing the Magnifying Glass Icon|Removing the Magnifying Glass Icon]]
  
=== Customise the Favicon ===
+
=== Customising the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]
+
* [[Changing the site favicon|Customising the Favorite Icon]]
  
=== Customise Horizontal Navigation Menus ===
+
=== Customising Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
+
* [[/customisations/Centering the hornav|Centering the Horizontal Menus]]
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
+
* [[/customisations/Modifying the horizontal menu colour|Changing the Color of the Horizontal Menus]]
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]<br />
+
* [[/customisations/Modifying the horizontal menu background|Using a Gradient Image for the Background in the Horizontal Menus]]
[[Enable rtl horizontal menu in ja purity|Allow Right to Left language use of Horizontal Menu]]
+
* [[/customisations/Enabling RTL in the horizontal menu|Allowing Right to Left language use of Horizontal Menu]]
  
 
== Customisation - Intermediate ==
 
== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
+
* [[Modify accessibility in ja purity|Customising Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]
+
* [[Modify searching in ja purity|Customising Searching]]
  
 
== Customisation - Advanced ==
 
== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]
+
* [[Modify overrides in ja purity|Customising Overrides]]
  
 
== Known Issues and Bugs ==
 
== Known Issues and Bugs ==
Line 146: Line 156:
  
 
== See also ==
 
== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]
+
[[jtopic:294258|A forum topic with some information about this template]]
  
 
<noinclude>
 
<noinclude>
Line 152: Line 162:
 
[[Category:JA Purity template]]
 
[[Category:JA Purity template]]
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 +
[[Category:Template Development]]
 +
[[Category:Templates]]
 +
[[Category:Customizing]]
 
</noinclude>
 
</noinclude>

Revision as of 21:40, 17 September 2012

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

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 Tom Hutchison (talk| contribs) 11 years ago. (Purge)

Introduction[edit]

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[edit]

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.
    <name>JA_Purity</name>
    <language tag="en-GB">en-GB.tpl_ja_purity.ini</language>
    <language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language>
    <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" />

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[edit]

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[edit]

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>

Positions[edit]

JA Purity Tutorial Positions.png

Ja purity module position.png

Classes/IDs[edit]

Body[edit]

Header[edit]

Horizontal Navigation[edit]

Top[edit]

Left[edit]

Right[edit]

Main[edit]

Breadcrumbs[edit]

Spotlight[edit]

User 1[edit]

User 2[edit]

User 3[edit]

User 4[edit]

User 5[edit]

Syndication[edit]

Footer[edit]

CSS Files[edit]

Customisation - Basics[edit]

Administration Features[edit]

Enable Horizontal Navigation Menus with drop down menus

Customising Module Position and Content[edit]

[edit]

Customising the Header[edit]

Customising the Favicon[edit]

Customising Horizontal Navigation Menus[edit]

Customisation - Intermediate[edit]

Customisation - Advanced[edit]

Known Issues and Bugs[edit]

See also[edit]

A forum topic with some information about this template