Difference between revisions of "Customising the JA Purity template"
From Joomla! Documentation
m |
m (→See also: archiving articles with category removal and addition) |
||
(83 intermediate revisions by 14 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{version/tutor|1.5}} |
== Introduction == | == Introduction == | ||
− | JA Purity is a highly customizable template available by default in standard Joomla 1.5 | + | 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: |
− | + | ||
− | # Screen width configuration (Fluid/Narrow/ | + | # 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, Opera | + | # 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 [[jforum:541|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. | ||
+ | *:<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> | ||
+ | |||
+ | '''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. | ||
+ | |||
+ | 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 19: | Line 43: | ||
Click on the picture to see the descriptions (if available) | Click on the picture to see the descriptions (if available) | ||
<imagemap> | <imagemap> | ||
− | Image: | + | Image:JA_Purity_Tutorial_Main.png|640px |
− | rect | + | rect 19 9 220 67 [[Customising the JA Purity template/customisations/Replacing the Joomla! Logo|Customise the Logo]] |
− | rect | + | rect 253 9 1102 67 [[Customising the JA Purity template/customisations/Replacing the header pictures|Customise the Header Background]] |
− | rect | + | rect 1140 13 1197 34 [[Customising the JA Purity template/header/accessibility|Customise Accessibility]] |
− | rect | + | rect 1113 40 1265 64 [[Customising the JA Purity template/header/search|Customise Searching]] |
+ | rect 0 76 279 657 [[Customising the JA Purity template/left|Customise - Module Position Left]] | ||
+ | rect 278 76 1002 657 [[Customising the JA Purity template/content|Customise - Main Content Area]] | ||
+ | rect 1002 76 1280 657 [[Customising the JA Purity template/right|Customise - Module Position Right]] | ||
+ | rect 0 657 1280 817 [[Customising the JA Purity template/spotlight|Customise - Spotlight Area]] | ||
+ | rect 0 817 1280 1024 [[Customising the JA Purity template/footer|Customise - Module Position Footer]] | ||
+ | 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 | ||
</imagemap> | </imagemap> | ||
− | === | + | ===Positions=== |
− | === Body === | + | [[Image:JA Purity Tutorial Positions.png|640 px]] |
− | === | + | |
− | === | + | [[Image:Ja_purity_module_position.png]] |
− | === | + | ===Classes/IDs=== |
− | === Right === | + | ====Body==== |
− | === | + | *[[/body|JA Purity body]] |
− | === | + | ====Header==== |
− | === | + | *[[/header|JA Purity header]] |
− | === User 1 === | + | **[[/header/logo|JA Purity logo]] |
− | === User 2 === | + | **[[/header/accessibility|JA Purity accessibility]] |
− | === User 3 === | + | **[[/header/search|JA Purity search]] |
− | === User 4 === | + | ***[[/header/search/user4|JA Purity user4]] |
− | === User 5 === | + | ====Horizontal Navigation==== |
− | === | + | *[[/hornav|JA Purity horizontal navigation]] |
− | === CSS === | + | ====Top==== |
+ | *[[/spotlight/top|JA Purity top]] | ||
+ | ====Left==== | ||
+ | *[[/left|JA Purity left]] | ||
+ | ====Right==== | ||
+ | *[[/right|JA Purity right]] | ||
+ | ====Main==== | ||
+ | *[[/content|JA Purity content]] | ||
+ | **[[/content/breadcrumb|JA Purity breadcrumbs]] | ||
+ | **[[/content/banner|JA Purity banners]] | ||
+ | ====Breadcrumbs==== | ||
+ | *[[/content/breadcrumb|JA Purity breadcrumbs]] | ||
+ | ====Spotlight==== | ||
+ | *[[/spotlight|JA Purity spotlight]] | ||
+ | **[[/spotlight/user1|JA Purity user 1]] | ||
+ | **[[/spotlight/user2|JA Purity user 2]] | ||
+ | **[[/spotlight/top|JA Purity top]] | ||
+ | **[[/spotlight/user5|JA Purity user 5]] | ||
+ | ====User 1==== | ||
+ | *[[/spotlight/user1|JA Purity user 1]] | ||
+ | ====User 2==== | ||
+ | *[[/spotlight/user2|JA Purity user 2]] | ||
+ | ====User 3==== | ||
+ | *[[/footer/user3|JA Purity user3]] | ||
+ | ====User 4==== | ||
+ | *[[/header/search/user4|JA Purity user 4]] | ||
+ | ====User 5==== | ||
+ | *[[/spotlight/user5|JA Purity user 5]] | ||
+ | ====Syndication==== | ||
+ | *[[/footer/syndication|JA Purity Syndication]] | ||
+ | ====Footer==== | ||
+ | *[[/footer|JA Purity Footer]] | ||
+ | **[[/footer/syndication|JA Purity Syndication]] | ||
+ | **[[/footer/user3|JA Purity user3]] | ||
+ | ===CSS Files=== | ||
+ | *[[/template.css|JA Purity template.css]] | ||
== Customisation - Basics == | == Customisation - Basics == | ||
=== Administration Features === | === Administration Features === | ||
+ | [[/customisations/Enabling hornav submenus|Enable Horizontal Navigation Menus with drop down menus]] | ||
− | === | + | === Customising Module Position and Content === |
− | [[ | + | * [[/header|Customisation - Header Area]] |
− | + | * [[/left|Customisation - Module Position Left]] | |
− | [[ | + | * [[/content|Customisation - Main Content Area]] |
+ | * [[/right|Customisation - Module Position Right]] | ||
+ | * [[/spotlight|Customisation - Spotlight Area]] | ||
+ | * [[/footer|Customisation - Module Position Footer]] | ||
− | === | + | === Customising the Logo === |
− | [[ | + | * [[/customisations/Replacing the Joomla! Logo|Customising the Logo]] |
− | + | * [[/customisations/Changing the position of your logo|Changing the Position of Your Logo]] | |
− | [[ | + | * [[/customisations/Using a single image for header and logo|Using one image for Header and Logo]] |
− | === | + | === Customising the Header === |
− | [[ | + | * [[/customisations/Replacing the header pictures|Customising the Header Background Images]] |
+ | * [[/customisations/Resizing the header|Changing the Size of the Header]] | ||
+ | * [[/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]] | ||
− | === | + | === Customising the Favicon === |
− | [[ | + | * [[Changing the site favicon|Customising the Favorite Icon]] |
− | === | + | === Customising Horizontal Navigation Menus === |
− | [[ | + | * [[/customisations/Centering the hornav|Centering the Horizontal Menus]] |
+ | * [[/customisations/Modifying the horizontal menu colour|Changing the Color of the Horizontal Menus]] | ||
+ | * [[/customisations/Modifying the horizontal menu background|Using a Gradient Image for the Background in the Horizontal Menus]] | ||
+ | * [[/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| | + | * [[Modify accessibility in ja purity|Customising Accessibility]]<br /> |
− | [[Modify searching in ja purity| | + | * [[Modify searching in ja purity|Customising Searching]] |
== Customisation - Advanced == | == Customisation - Advanced == | ||
+ | * [[Modify overrides in ja purity|Customising Overrides]] | ||
== Known Issues and Bugs == | == Known Issues and Bugs == | ||
− | * | + | * IE8 Compatibility - SEE: http://forum.joomla.org/viewtopic.php?f=541&t=393631&p=1709079&hilit=ie8#p1709079 |
− | * 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'. | + | * 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 == | == See also == | ||
− | [ | + | [[jtopic:294258|A forum topic with some information about this template]] |
+ | |||
− | [[Category: | + | [[Category:Archived version Joomla! 1.5|{{PAGENAME}}]] |
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 09:24, 29 April 2013
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.
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:
- Screen width configuration (Fluid / Narrow / Wide-screen / 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, 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]
Classes/IDs[edit]
Body[edit]
Header[edit]
[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]
[edit]
CSS Files[edit]
Customisation - Basics[edit]
Administration Features[edit]
Enable Horizontal Navigation Menus with drop down menus
Customising Module Position and Content[edit]
- 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[edit]
Customising the Header[edit]
- 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[edit]
[edit]
- 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[edit]
Customisation - Advanced[edit]
Known Issues and Bugs[edit]
- 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