Custom Is Ing The JA Purity Template

Tutorial:Customising the JA Purity template
However, you are welcome to assist in its construction by editing it as well. Please view the edit history should you wish to contact the person who placed this template. If the tutorial page has not been edited in several days please remove this template. While actively editing, consider adding {{inuse}} to reduce edit conflicts.
Contents
1 Introduction 1.1 Before You Start 2 Template Layout 2.1 Front Page 2.2 Positions 2.3 Classes/IDs 2.3.1 Body 2.3.2 Header 2.3.3 Horizontal Navigation 2.3.4 Top 2.3.5 Left 2.3.6 Right 2.3.7 Main 2.3.8 Breadcrumbs 2.3.9 Spotlight 2.3.10 User 1 2.3.11 User 2 2.3.12 User 3 2.3.13 User 4 2.3.14 User 5 2.3.15 Syndication 2.3.16 Footer 2.4 CSS Files 3 Customisation - Basics 3.1 Administration Features 3.2 Customise Module Position and Content 3.3 Customise the Logo 3.4 Customise the Header 3.5 Customise the Favicon 3.6 Customise Horizontal Navigation Menus 4 Customisation - Intermediate 5 Customisation - Advanced 6 Known Issues and Bugs 7 See also
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: 1. 2. 3. 4. 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
Before You Start

Before you start hacking away at the template you may want to do one of the following: 1. 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. 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" /> 2. 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. 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.
Front Page
Positions
Classes/IDs
Body
JA Purity body
Main
JA Purity content JA Purity breadcrumbs JA Purity banners
Header
JA Purity header JA Purity logo JA Purity accessibility JA Purity search JA Purity user4
Breadcrumbs
JA Purity breadcrumbs
Spotlight
JA Purity spotlight JA Purity user 1 JA Purity user 2 JA Purity top JA Purity user 5
Horizontal Navigation
JA Purity horizontal navigation
Top
JA Purity top
User 1
JA Purity user 1
Left
JA Purity left
User 2
JA Purity user 2
Right
JA Purity right
User 3
JA Purity user3
Customisation - Intermediate
Customise Accessibility Customise Searching
User 4
JA Purity user 4
Customisation - Advanced
Customise Overrides
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
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

Customise the Logo Change the Position of Your Logo Use one image for Header and 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 Allow Right to Left language use of Horizontal Menu
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
Ja purity template body

Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 2 CSS Files 2.1 ja_purity/css/template.css 3 Image Files 4 Javascript Files
HTML and PHP Files

ja_purity/index.php
99.<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" > 100.<a name="Top" id="Top"></a> 101.<ul class="accessibility"> 102. <li><a href="#ja-content" title="<?php echo JText::_("Skip to content");? >"><?php echo JText::_("Skip to content");?></a></li> 103. <li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li> 104. <li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");? >"><?php echo JText::_("Skip to 1st column");?></a></li> 105. <li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");? >"><?php echo JText::_("Skip to 2nd column");?></a></li> 106.</ul> 107. 108.<div id="ja-wrapper"> 109. 110. 111.<div id="ja-headerwrap"> 112. <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';?>;"> 113. 114. <div class="ja-headermask"> </div> 115. 116. <?php 117. $siteName = $tmpTools->sitename(); 118. if ($tmpTools->getParam('logoType')=='image'): ?> 119. <h1 class="logo"> 120. <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a> 121. </h1> 122. <?php else: 123. $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config>sitename : $tmpTools->getParam('logoText'); 124. $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?> 125. <h1 class="logo-text"> 126. <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a> 127. </h1>
128. <p class="site-slogan"><?php echo $sloganText;?></p> 129. <?php endif; ?> 130. 131. <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> 132. 133. <?php if($this->countModules('user4')) : ?> 134. <div id="ja-search"> 135. <jdoc:include type="modules" name="user4" /> 136. </div> 137. <?php endif; ?> 138. 139. </div> 140.</div> 141. 142. 143. 144.<?php if ($this->countModules('hornav')): ?> 145.<div id="ja-mainnavwrap"> 146. <div id="ja-mainnav" class="clearfix"> 147. <jdoc:include type="modules" name="hornav" /> 148. </div> 149.</div> 150.<?php endif; ?> 151. 152. 153.<div id="ja-containerwrap<?php echo $divid; ?>"> 154.<div id="ja-containerwrap2"> 155. <div id="ja-container"> 156. <div id="ja-container2" class="clearfix"> 157. 158. <div id="ja-mainbody<?php echo $divid; ?>" class="clearfix"> 159. 160.  161. <div id="ja-contentwrap"> 162. <div id="ja-content"> 163. 164. <jdoc:include type="message" /> 165. 166. <?php if(!$tmpTools->isFrontPage()) : ?> 167. <div id="ja-pathway"> 168. <jdoc:include type="module" name="breadcrumbs" /> 169. </div> 170. <?php endif ; ?> 171. 172. <jdoc:include type="component" /> 173. 174. <?php if($this->countModules('banner')) : ?> 175. <div id="ja-banner"> 176. <jdoc:include type="modules" name="banner" /> 177. </div> 178. <?php endif; ?> 179. 180. </div> 181. </div> 182.  183. 184. <?php if ($this->countModules('left')): ?> 185.  186. <div id="ja-col1"> 187. <jdoc:include type="modules" name="left" style="xhtml" /> 188. </div><br /> 189.  190. <?php endif; ?> 191.
192. </div> 193. 194. <?php if ($this->countModules('right')): ?> 195.  196. <div id="ja-col2"> 197. <jdoc:include type="modules" name="right" style="jarounded" /> 198. </div><br /> 199.  200. <?php endif; ?> 201. 202. </div> 203. </div> 204.</div> 205.</div> 206. 207.<?php 208.$spotlight = array ('user1','user2','top','user5'); 209.$botsl = $tmpTools->calSpotlight ($spotlight,99,22); 210.if( $botsl ) : 211.?> 212. 213.<div id="ja-botslwrap"> 214. <div id="ja-botsl" class="clearfix"> 215. 216. <?php if( $this->countModules('user1') ): ?> 217. <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;"> 218. <jdoc:include type="modules" name="user1" style="xhtml" /> 219. </div> 220. <?php endif; ?> 221. 222. <?php if( $this->countModules('user2') ): ?> 223. <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;"> 224. <jdoc:include type="modules" name="user2" style="xhtml" /> 225. </div> 226. <?php endif; ?> 227. 228. <?php if( $this->countModules('top') ): ?> 229. <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <? php echo $botsl['top']['width']; ?>;"> 230. <jdoc:include type="modules" name="top" style="xhtml" /> 231. </div> 232. <?php endif; ?> 233. 234. <?php if( $this->countModules('user5') ): ?> 235. <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;"> 236. <jdoc:include type="modules" name="user5" style="xhtml" /> 237. </div> 238. <?php endif; ?> 239. 240. </div> 241.</div> 242. 243.<?php endif; ?> 244. 245. 246.<div id="ja-footerwrap"> 247.<div id="ja-footer" class="clearfix"> 248. 249. <div id="ja-footnav"> 250. <jdoc:include type="modules" name="user3" /> 251. </div>
252. 253. <div class="copyright"> 254. <jdoc:include type="modules" name="footer" /> 255. </div> 256. 257. <div class="ja-cert"> 258. <jdoc:include type="modules" name="syndicate" /> 259. <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;"> 260. <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" /> 261. </a> 262. <a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;"> 263. <img src="<?php echo $tmpTools->templateurl(); ?>/images/butxhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" /> 264. </a> 265. </div> 266. 267. <br /> 268.</div> 269.</div> 270. 271. 272.</div> 273. 274.<jdoc:include type="modules" name="debug" /> 275. 276.</body>
CSS Files
ja_purity/css/template.css
1. /* COMMON STYLE 2. --------------------------------------------------------- */ 3. html, body, form, fieldset { 4. margin: 0; 5. padding: 0; 6. } 7. 8. body { 9. color: #000000; 10. background: #FFFFFF; 11. font-family: Arial, Helvetica, sans-serif; 12. line-height: 150%; 13.} 14. 15.body#bd { 16. color: #333333; 17. background: #F2F2F2; 18.} 19. 20.body.contentpane { 21. width: auto; /* Printable Page */ 22. margin: 1em 2em; 23. line-height: 1.3em; 24. margin: 0px 0px 0px 0px; 25. font-size: 12px; 26. color: #333; 27.} 28.
29.body.fs1 { 30. font-size: 31.} 32. 33.body.fs2{ 34. font-size: 35.} 36. 37.body.fs3{ 38. font-size: 39.} 40. 41.body.fs4{ 42. font-size: 43.} 44. 45.body.fs5{ 46. font-size: 47.} 48. 49.body.fs6{ 50. font-size: 51.}
10px;
11px;
12px;
13px;
14px;
15px;
Ja purity template header

Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 1.2 ja_purity/ja_templatetools.php 1.2.1 getParam method 1.2.2 genToolsMenu method 1.2.3 templateurl method 1.2.4 getRandomImage method 1.2.5 sitename method 2 CSS Files 2.1 ja_purity/css/template.css 2.2 ja_purity/css/template_rtl.css 2.3 ja_purity/styles/header/blue/style.css 2.4 ja_purity/styles/header/green/style.css 3 Image Files 4 Javascript Files
HTML and PHP Files

ja_purity/index.php
110. 111.<div id="ja-headerwrap"> 112. <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';?>;"> 113. 114. <div class="ja-headermask"> </div> 115. 116. <?php 117. $siteName = $tmpTools->sitename(); 118. if ($tmpTools->getParam('logoType')=='image'): ?> 119. <h1 class="logo"> 120. <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a> 121. </h1> 122. <?php else: 123. $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config>sitename : $tmpTools->getParam('logoText');
124. $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?> 125. <h1 class="logo-text"> 126. <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a> 127. </h1> 128. <p class="site-slogan"><?php echo $sloganText;?></p> 129. <?php endif; ?> 130. 131. <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> 132. 133. <?php if($this->countModules('user4')) : ?> 134. <div id="ja-search"> 135. <jdoc:include type="modules" name="user4" /> 136. </div> 137. <?php endif; ?> 138. 139. </div> 140.</div> 141.
ja_purity/ja_templatetools.php
getParam method
function getParam ($param, $default='') { if (isset($this->_params_cookie[$param])) { return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this>_params_cookie[$param]); 52. } 53. return preg_replace('/[\x00-\x1F\x7F<>;\/\"\'%()]/', '', $this->_tpl>params->get($param, $default)); 54. } 49. 50. 51.
genToolsMenu method
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="jatool-increase" onclick="switchFontSize('<?php echo $this>template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li> 76. <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-toolreset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;? >',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li> 77. <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="jatool-decrease" onclick="switchFontSize('<?php echo $this>template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li> 78. </ul> 79. <script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script> 80. <?php 81. } 82. } 69. 70. 71. 72. 73. 74. 75.
templateurl method
169. 170. 171. function templateurl(){ return JURI::base()."templates/".$this->template; }
getRandomImage method
173. function getRandomImage ($img_folder) { 174. $imglist=array(); 175. 176. mt_srand((double)microtime()*1000); 177. 178. //use the directory class 179. $imgs = dir($img_folder); 180. 181. //read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners) 182. while ($file = $imgs->read()) { 183. if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file)) 184. $imglist[] = $file; 185. } 186. closedir($imgs->handle); 187. 188. if(!count($imglist)) return ''; 189. 190. //generate a random number between 0 and the number of images 191. $random = mt_rand(0, count($imglist)-1); 192. $image = $imglist[$random]; 193. 194. return $image; 195. }
sitename method
201. 202. 203. 204. function sitename() { $config = new JConfig(); return $config->sitename; }
CSS Files
921./* HEADER 922.--------------------------------------------------------- */ 923.#ja-headerwrap { 924. background: #333333; 925. color: #CCCCCC; 926. line-height: normal; 927. height: 80px; 928.} 929. 930.#ja-header { 931. position: relative; 932. height: 80px; 933.} 934. 935..ja-headermask { 936. width: 602px; 937. display: block; 938. background: url(../images/header-mask.png) no-repeat top right; 939. height: 80px; 940. position: absolute;
941. top: 0; 942. right: -1px; 943.} 944. 945.#ja-header a { 946. color: #CCCCCC; 947.} 948. 949.h1.logo, h1.logo-text { 950. margin: 0 0 0 5px; 951. padding: 0; 952. font-size: 180%; 953. text-transform: uppercase; 954.} 955. 956.h1.logo a { 957. width: 208px; 958. display: block; 959. background: url(../images/logo.png) no-repeat; 960. height: 80px; 961. position: relative; 962. z-index: 100; 963.} 964. 965.h1.logo a span { 966. position: absolute; 967. top: -1000px; 968.} 969. 970.h1.logo-text a { 971. color: #CCCCCC !important; 972. text-decoration: none; 973. outline: none; 974. position: absolute; 975. bottom: 40px; 976. left: 5px; 977.} 978. 979.p.site-slogan { 980. margin: 0; 981. padding: 0; 982. padding: 2px 5px; 983. color: #FFFFFF; 984. background: #444444; 985. font-size: 92%; 986. position: absolute; 987. bottom: 20px; 988. left: 0; 989.} 990. 991./* Search */ 992.#ja-search { 993. padding-left: 20px; 994. background: url(../images/icon-search.gif) no-repeat center left; 995. position: absolute; 996. bottom: 15px; 997. right: 0; 998.} 999. 1000.#ja-search .inputbox { 1001. width: 120px; 1002. border: 1px solid #333333; 1003. padding: 3px 5px; 1004. color: #999999;
1005. background: #444444; 1006. font-size: 92%; 1007.}
ja_purity/css/template_rtl.css
172./* HEADER 173.--------------------------------------------------------- */ 174..ja-headermask { 175. background-position: top left; 176. left: -1px; 177. right: auto; 178.} 179. 180.h1.logo-text a { 181. right: 5px; 182. left: auto; 183.} 184. 185.p.site-slogan { 186. right: 0; 187. left: auto; 188.} 189. 190./* Search */ 191.#ja-search { 192. background-position: center right; 193. left: 0; 194. right: auto; 195.}
ja_purity/styles/header/blue/style.css
1. #ja-headerwrap { 2. background: #006699; 3. color: #C3DFED; 4. } 5. 6. .ja-headermask { 7. background: url(images/header-mask.png) no-repeat top right; 8. } 9. 10.#ja-header a { 11. color: #C3DFED; 12.} 13. 14.h1.logo-text a { 15. color: #C3DFED !important; 16.} 17. 18.p.site-slogan { 19. background: #1E7CAB; 20.} 21. 22.#ja-search { 23. background: url(images/icon-search.gif) no-repeat center left; 24.} 25. 26.#ja-search .inputbox { 27. border: 1px solid #005A87; 28. color: #C3DFED; 29. background: #1E7CAB; 30.}
ja_purity/styles/header/green/style.css
1. #ja-headerwrap { 2. background: #7BA566; 3. color: #E4EFDF; 4. } 5. 6. .ja-headermask { 7. background: url(images/header-mask.png) no-repeat top right; 8. } 9. 10.#ja-header a { 11. color: #E4EFDF; 12.} 13. 14.h1.logo-text a { 15. color: #E4EFDF !important; 16.} 17. 18.p.site-slogan { 19. background: #9DBF8C; 20.} 21. 22.#ja-search { 23. background: url(images/icon-search.gif) no-repeat center left; 24.} 25. 26.#ja-search .inputbox { 27. border: 1px solid #658854; 28. color: #E4EFDF; 29. background: #9DBF8C; 30.}
Ja purity template header logo

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:
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
If you've been following the tutorial you can download a tutorial version of the template that installs to the following directory:
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
Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 2 CSS Files 2.1 ja_purity/css/template.css 2.2 ja_purity/css/template_rtl.css 2.3 ja_purity/styles/header/blue/style.css 4.2 ja_purity/js/iepngfix.htc 2.4 ja_purity/styles/header/green/style.css 3 Image Files 3.1 ja_purity/images/logo.gif 3.2 ja_purity/images/logo.png 4 Javascript Files 4.1 ja_purity/js/ja.script.js
HTML and PHP Files

ja_purity/index.php
116. <?php 117. $siteName = $tmpTools->sitename(); 118. if ($tmpTools->getParam('logoType')=='image'): ?> 119. <h1 class="logo"> 120. <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a> 121. </h1> 122. <?php else: 123. $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config>sitename : $tmpTools->getParam('logoText'); 124. $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?> 125. <h1 class="logo-text"> 126. <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a> 127. </h1> 128. <p class="site-slogan"><?php echo $sloganText;?></p> 129. <?php endif; ?>
CSS Files
949.h1.logo, h1.logo-text { 950. margin: 0 0 0 5px; 951. padding: 0; 952. font-size: 180%; 953. text-transform: uppercase; 954.} 955. 956.h1.logo a { 957. width: 208px; 958. display: block; 959. background: url(../images/logo.png) no-repeat; 960. height: 80px; 961. position: relative; 962. z-index: 100; 963.}
964. 965.h1.logo a span { 966. position: absolute; 967. top: -1000px; 968.} 969. 970.h1.logo-text a { 971. color: #CCCCCC !important; 972. text-decoration: none; 973. outline: none; 974. position: absolute; 975. bottom: 40px; 976. left: 5px; 977.} 978. 979.p.site-slogan { 980. margin: 0; 981. padding: 0; 982. padding: 2px 5px; 983. color: #FFFFFF; 984. background: #444444; 985. font-size: 92%; 986. position: absolute; 987. bottom: 20px; 988. left: 0; 989.}
180.h1.logo-text a { 181. right: 5px; 182. left: auto; 183.} 184. 185.p.site-slogan { 186. right: 0; 187. left: auto; 188.}
ja_purity/styles/header/blue/style.css
14.h1.logo-text a { 15. color: #C3DFED !important; 16.} 17. 18.p.site-slogan { 19. background: #1E7CAB; 20.}
ja_purity/styles/header/green/style.css
14.h1.logo-text a { 15. color: #E4EFDF !important; 16.} 17. 18.p.site-slogan { 19. background: #9DBF8C; 20.}
Image Files
ja_purity/images/logo.gif
ja_purity/images/logo.png
Javascript Files
ja_purity/js/ja.script.js
4. function fixIEPNG(el, bgimgdf, sizingMethod, type, offset){ 5. var objs = el; 6. if(!objs) return; 7. if ($type(objs) != 'array') objs = [objs]; 8. if(!sizingMethod) sizingMethod = 'crop'; 9. if(!offset) offset = 0; 10. var blankimg = siteurl + 'images/blank.png'; 11. objs.each(function(obj) { 12. var bgimg = bgimgdf; 13. if (obj.tagName == 'IMG') { 14. //This is an image 15. if (!bgimg) bgimg = obj.src; 16. if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return; 17. 18. obj.setStyle('height',obj.offsetHeight); 19. obj.setStyle('width',obj.offsetWidth); 20. obj.src = blankimg; 21. obj.setStyle ('visibility', 'visible'); 22. obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')"); 23. }else{ 24. //Background 25. if (!bgimg) bgimg = obj.getStyle('backgroundImage'); 26. var pattern = new RegExp('url\s*[$\"\']*([^\'\"$]*)[\'\"\)]*'); 27. if ((m = pattern.exec(bgimg))) bgimg = m[1]; 28. if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return; 29. if (!type) 30. { 31. obj.setStyle('background', 'none'); 32. //if(!obj.getStyle('position')) 33. if(obj.getStyle('position')!='absolute' && obj.getStyle('position')!='relative') { 34. obj.setStyle('position', 'relative'); 35. } 36. 37. //Get all child 38. var childnodes = obj.childNodes; 39. for(var j=0;j<childnodes.length;j++){ 40. if((child = $(childnodes[j]))) { 41. if(child.getStyle('position')!='absolute' && child.getStyle('position')!='relative') { 42. child.setStyle('position', 'relative'); 43. } 44. child.setStyle('z-index',2); 45. } 46. } 47. //Create background layer: 48. var bgdiv = new Element('IMG'); 49. bgdiv.src = blankimg; 50. bgdiv.width = obj.offsetWidth - offset;
51. 52. 53. 54. 55. 56. 57. 58. 59. 60.
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+"')"); 61. bgdiv.inject(obj, 'top'); 62. //alert(obj.innerHTML + '\n' + bgdiv.innerHTML); 63. } else { 64. obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')"); 65. } 66. } 67. }.bind(this)); 68. 69.}
ja_purity/js/iepngfix.htc
1. <public:component> 2. <public:attach event="onpropertychange" onevent="doFix()" /> 3. 4. <script type="text/javascript"> 5. 6. // IE5.5+ PNG Alpha Fix v1.0RC4 7. // (c) 2004-2005 Angus Turnbull http://www.twinhelix.com 8. 9. // This is licensed under the CC-GNU LGPL, version 2.1 or later. 10.// For details, see: http://creativecommons.org/licenses/LGPL/2.1/ 11. 12. 13.// This must be a path to a blank image. That's all the configuration you need. 14.if (typeof blankImg == 'undefined') var blankImg = 'images/blank.png'; 15. 16. 17.var f = 'DXImageTransform.Microsoft.AlphaImageLoader'; 18. 19.function filt(s, m) 20.{ 21. if (filters[f]) 22. { 23. filters[f].enabled = s ? true : false; 24. if (s) with (filters[f]) { src = s; sizingMethod = m } 25. } 26. else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")'; 27.} 28. 29.function doFix() 30.{ 31. // Assume IE7 is OK. 32. if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || 33. (event && !/(background|src)/.test(event.propertyName))) return; 34. 35. var bgImg = currentStyle.backgroundImage || style.backgroundImage; 36. 37. if (tagName == 'IMG')
38. { 39. if ((/\.png$/i).test(src)) 40. { 41. if (currentStyle.width == 'auto' && currentStyle.height == 'auto') { 42. style.width = offsetWidth + 'px'; 43. style.height = offsetHeight + 'px'; 44. } 45. filt(src, 'scale'); 46. src = blankImg; 47. } 48. else if (src.indexOf(blankImg) < 0) filt(); 49. } 50. else if (bgImg && bgImg != 'none') 51. { 52. if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) 53. { 54. var s = RegExp.$1; 55. if (currentStyle.width == 'auto' && currentStyle.height == 'auto') 56. style.width = offsetWidth + 'px'; 57. style.backgroundImage = 'none'; 58. filt(s, 'scale'); 59. // IE link fix. 60. for (var n = 0; n < childNodes.length; n++) 61. if (childNodes[n].style) childNodes[n].style.position = 'relative'; 62. } 63. else filt(); 64.} 65.} 66. 67.doFix(); 68. 69.</script> 70.</public:component>
Ja purity template header search

Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css 3 Image Files 3.1 icon-search.gif 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
HTML and PHP Files

ja_purity/index.php
133. 134. 135. 136. 137. <?php if($this->countModules('user4')) : ?> <div id="ja-search"> <jdoc:include type="modules" name="user4" /> </div> <?php endif; ?>
CSS Files
ja_purity/css/XXXXX.css
991./* Search */ 992.#ja-search { 993. padding-left: 20px;
994. background: url(../images/icon-search.gif) no-repeat center left; 995. position: absolute; 996. bottom: 15px; 997. right: 0; 998.} 999. 1000.#ja-search .inputbox { 1001. width: 120px; 1002. border: 1px solid #333333; 1003. padding: 3px 5px; 1004. color: #999999; 1005. background: #444444; 1006. font-size: 92%; 1007.} Image Files: icon-search.gif Javascript Files: ja_purity/js/XXXXX.js
Ja purity template header search user4

Contents
1 HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css Image Files: Javascript Files ja_purity/js/XXXXX.js 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
Ja purity template horizontal navigation

Contents
1 HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css Image Files Javascript Files ja_purity/js/XXXXX.js 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
Ja purity template spotlight top

Contents
1 HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
Image Files Javascript Files ja_purity/js/XXXXX.js
Ja purity template left

Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 2 CSS Files 2.1 ja_purity/css/template.css 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
HTML and PHP Files

ja_purity/index.php
184. 185. 186. 187. 188. 189. 190. <?php if ($this->countModules('left')): ?>  <div id="ja-col1"> <jdoc:include type="modules" name="left" style="xhtml" /> </div><br />  <?php endif; ?>
CSS Files
827.#ja-mainbody-fr #ja-col1 { 828. width: 20%; 829.} 860.#ja-mainbody-fr #ja-col1 { 861. width: 20%; 862. float: left; 863.} 1267./* LEFT COLUMN + RIGHT COLUMN 1268.--------------------------------------------------------- */ 1269.#ja-col1 { 1270. float: left; 1271. width: 24.99%; 1272. padding-top: 10px; 1273. overflow: hidden; 1274.} 1275. 1276.#ja-col2 { 1277. float: right; 1278. width: 20%; 1279. overflow: hidden; 1280.} 1281. 1282.#ja-col1 table, 1283.#ja-col2 table { 1284. border-collapse: collapse; 1285. border-spacing: 0; 1286.} 1287. 1288.#ja-col1 ul li, 1289.#ja-col2 ul li { 1290. padding-left: 15px; 1291. margin: 0;
1292. background: url(../images/bullet.gif) no-repeat 5px 50%; 1293.} 1294. 1295.#ja-col1 ul, #ja-col2 ul { 1296. margin: 0; 1297.} 1298. 1299.#ja-col1 ol, #ja-col2 ol { 1300. margin-left: 5px; 1301.} 1302. 1303.#ja-col1 .article_separator, 1304.#ja-col2 .article_separator { 1305. display: none; 1306.} Image Files: bullet.gif Javascript Files: ja_purity/js/XXXXX.js
Ja purity template right

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 and bullet.gif, are in the following directories:
templates/ja_purity index.php css/ template.css images/ bullet.gif js/ ja.rightcol.js
templates/my_japurity index.php css/ template.css images/ bullet.gif js/ ja.rightcol.js
Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 2 CSS Files 2.1 ja_purity/css/template.css 3 Image Files 4 Javascript Files 4.1 ja_purity/js/ja.rightcol.js
HTML and PHP Files

ja_purity/index.php 194. <?php if ($this->countModules('right')): ?> 195.  196. <div id="ja-col2"> 197. <jdoc:include type="modules" name="right" style="jarounded" /> 198. </div><br /> 199.  200. <?php endif; ?>
CSS Files
ja_purity/css/template.css 1267./* LEFT COLUMN + RIGHT COLUMN 1268.--------------------------------------------------------- */ 1269.#ja-col1 { 1270. float: left; 1271. width: 24.99%; 1272. padding-top: 10px; 1273. overflow: hidden; 1274.} 1275. 1276.#ja-col2 { 1277. float: right; 1278. width: 20%; 1279. overflow: hidden; 1280.} 1281. 1282.#ja-col1 table, 1283.#ja-col2 table { 1284. border-collapse: collapse; 1285. border-spacing: 0; 1286.} 1287. 1288.#ja-col1 ul li, 1289.#ja-col2 ul li { 1290. padding-left: 15px; 1291. margin: 0; 1292. background: url(../images/bullet.gif) no-repeat 5px 50%; 1293.} 1294. 1295.#ja-col1 ul, #ja-col2 ul { 1296. margin: 0; 1297.} 1298. 1299.#ja-col1 ol, #ja-col2 ol { 1300. margin-left: 5px; 1301.} 1302. 1303.#ja-col1 .article_separator, 1304.#ja-col2 .article_separator { 1305. display: none; 1306.} Image Files: bullet.gif
Javascript Files
ja_purity/js/ja.rightcol.js
1. //JS script for Joomla template 2. 3. var JA_Collapse_Mod = new Class({ 4. 5. initialize: function(myElements) { 6. options = Object.extend({ 7. transition: Fx.Transitions.quadOut 8. }, {}); 9. this.myElements = myElements; 10. var exModules = excludeModules.split(','); 11. exModules.each(function(el,i){exModules[i]='Mod'+el}); 12. myElements.each(function(el, i){ 13. el.elmain = $E('.jamod-content',el); 14. el.titleEl = $E('h3',el);
15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40.
if(!el.titleEl) return; if (exModules.contains(el.id)) { el.titleEl.className = ''; return; } el.titleEl.className = rightCollapseDefault; el.status = rightCollapseDefault; el.openH = el.elmain.getStyle('height').toInt(); el.elmain.setStyle ('overflow','hidden'); el.titleEl.addEvent('click', function(e){ e = new Event(e).stop(); el.toggle(); }); el.toggle = function(){ if (el.status=='hide') el.show(); else el.hide(); }
el.show = function() { el.titleEl.className='show'; var ch = el.elmain.getStyle('height').toInt(); new Fx.Style(el.elmain,'height', {onComplete:el.toggleStatus}).start(ch,el.openH); 41. } 42. el.hide = function() { 43. el.titleEl.className='hide'; 44. var ch = (rightCollapseDefault=='hide')? 0:el.elmain.getStyle('height').toInt(); 45. new Fx.Style(el.elmain,'height', {onComplete:el.toggleStatus}).start(ch,0); 46. } 47. el.toggleStatus = function () { 48. el.status=(el.status=='hide')?'show':'hide'; 49. Cookie.set(el.id,el.status,{duration:365}); 50. } 51. 52. if(!el.titleEl.className) el.titleEl.className=rightCollapseDefault; 53. if(el.titleEl.className=='hide') el.hide(); 54. }); 55. } 56.}); 57. 58.window.addEvent ('load', function(e){ 59. var jamod = new JA_Collapse_Mod ($ES('.jamod')); 60.});
Ja purity template content

Contents
1 HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
Image Files Javascript Files: ja_purity/js/XXXXX.js
Ja purity template content breadcrumb

Contents
1 HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css Image Files: Javascript Files ja_purity/js/XXXXX.js 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
Ja purity template content banner

Contents
Ja purity template spotlight

Contents
1 HTML and PHP Files 1.1 ja_purity/index.php 2 CSS Files 2.1 ja_purity/css/template.css 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
HTML and PHP Files

ja_purity/index.php
207.<?php 208.$spotlight = array ('user1','user2','top','user5'); 209.$botsl = $tmpTools->calSpotlight ($spotlight,99,22); 210.if( $botsl ) : 211.?> 212. 213.<div id="ja-botslwrap"> 214. <div id="ja-botsl" class="clearfix"> 215. 216. <?php if( $this->countModules('user1') ): ?> 217. <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;"> 218. <jdoc:include type="modules" name="user1" style="xhtml" /> 219. </div>
220. <?php endif; ?> 221. 222. <?php if( $this->countModules('user2') ): ?> 223. <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;"> 224. <jdoc:include type="modules" name="user2" style="xhtml" /> 225. </div> 226. <?php endif; ?> 227. 228. <?php if( $this->countModules('top') ): ?> 229. <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <? php echo $botsl['top']['width']; ?>;"> 230. <jdoc:include type="modules" name="top" style="xhtml" /> 231. </div> 232. <?php endif; ?> 233. 234. <?php if( $this->countModules('user5') ): ?> 235. <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;"> 236. <jdoc:include type="modules" name="user5" style="xhtml" /> 237. </div> 238. <?php endif; ?> 239. 240. </div> 241.</div> 242. 243.<?php endif; ?>
CSS Files
1308./* SPOTLIGHT 1309.--------------------------------------------------------- */ 1310./* Spotlight Box Style */ 1311..ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right { 1312. float: left; 1313. overflow: hidden; 1314.} 1315. 1316..ja-box-left div.moduletable, 1317..ja-box-full div.moduletable { 1318. padding-right: 30px; 1319. background: none; 1320.} 1321. 1322..ja-box-right div.moduletable { 1323. padding-left: 30px; 1324. background: url(../images/vdot2.gif) repeat-y left; 1325.} 1326. 1327..ja-box-center div.moduletable { 1328. padding: 0 30px; 1329. background: url(../images/vdot2.gif) repeat-y left; 1330.} 1331. 1332.#ja-botsl h3 { 1333. background: none; 1334.} 1335. 1336.#ja-botslwrap { 1337. border-top: 5px solid #CCCCCC; 1338. background: #444444;
1339. color: #CCCCCC; 1340.} 1341. 1342.#ja-botsl { 1343. padding: 15px 0; 1344.} 1345. 1346.#ja-botsl div.moduletable { 1347. padding-top: 0; 1348. padding-bottom: 0; 1349. margin: 0; 1350.} 1351. 1352.#ja-botsl h3 { 1353. margin: 0 0 12px; 1354. padding: 0; 1355. color: #FFFFFF; 1356.} 1357. 1358.#ja-botsl a { 1359. color: #CCCCCC; 1360.} 1361. 1362.#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus { 1363. color: #FFFFFF; 1364.} 1365. 1366.#ja-botsl ul, #ja-botsl p, #ja-botsl ol { 1367. padding: 0; 1368. margin: 0 !important; 1369.} 1370. 1371.#ja-botsl ul li { 1372. padding: 0 0 0 15px; 1373. margin: 0; 1374. background: url(../images/bullet2.gif) no-repeat 3px 8px; 1375.} 1376. 1377.#ja-botsl ol li { 1378. margin-left: 25px; 1379. padding: 0 !important; 1380.} 1381. 1382.#ja-botsl td { 1383. padding: 0; 1384.} 1385. 1386.#ja-botsl .article_separator { 1387. display: none; 1388.} 1389. 1390.#ja-botsl table { 1391. border-spacing: 0; 1392. border-collapse: collapse; 1393.} Image Files: vdot2.gif Javascript Files: ja_purity/js/XXXXX.js
Ja purity template spotlight user1

Contents
1 HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css Image Files Javascript Files: ja_purity/js/XXXXX.js 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js

Contents
Ja purity template spotlight top

Contents

Contents
Ja purity template footer user3

Contents
HTML and PHP Files 1.1 ja_purity/XXXXX.php 2 CSS Files 2.1 ja_purity/css/XXXXX.css HTML and PHP Files: ja_purity/XXXXX.php CSS Files: ja_purity/css/XXXXX.css Image Files Javascript Files ja_purity/js/XXXXX.js 3 Image Files 4 Javascript Files 4.1 ja_purity/js/XXXXX.js
Ja purity template footer syndication

Contents
Ja purity template footer

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 and image files: but-css.gif, but-xhtml10.gif, vdot.gif, grad3.gif are in the following directories:
templates/ja_purity index.php css/ template.css images/ but-css.gif but-xhtml10.gif vdot.gif grad3.gif
templates/my_japurity index.php css/ template.css images/ but-css.gif but-xhtml10.gif vdot.gif grad3.gif
Contents
1 HTML and PHP Files 1.1 ja_purity/index.php.php 2 CSS Files 2.1 ja_purity/css/template.css 3 Image Files 4 Javascript Files
4.1 ja_purity/js/XXXXX.js
HTML and PHP Files

ja_purity/index.php.php
245. 246.<div id="ja-footerwrap"> 247.<div id="ja-footer" class="clearfix"> 248. 249. <div id="ja-footnav"> 250. <jdoc:include type="modules" name="user3" /> 251. </div> 252. 253. <div class="copyright"> 254. <jdoc:include type="modules" name="footer" /> 255. </div> 256. 257. <div class="ja-cert"> 258. <jdoc:include type="modules" name="syndicate" /> 259. <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;"> 260. <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" /> 261. </a> 262. <a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;"> 263. <img src="<?php echo $tmpTools->templateurl(); ?>/images/butxhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" /> 264. </a> 265. </div> 266. 267. <br /> 268.</div> 269.</div> 270.
CSS Files
1395./* FOOTER 1396.--------------------------------------------------------- */ 1397.#ja-footerwrap { 1398. border-top: 5px solid #CCCCCC; 1399. padding: 20px 0 30px; 1400. clear: both; 1401. background: url(../images/grad3.gif) repeat-x bottom #F6F6F6; 1402.} 1403. 1404.#ja-footer { 1405. padding: 0; 1406. color: #666666; 1407. background: url(../images/vdot.gif) repeat-y 22% 0; 1408. position: relative; 1409.} 1410. 1411.#ja-footer .copyright { 1412. clear: both; 1413. display: block; 1414. padding-left: 25%;
1415. color: #666666; 1416. font-style: normal; 1417. font-size: 92%; 1418.} 1419. 1420.#ja-footnav { 1421. padding-left: 25%; 1422.} 1423. 1424.#ja-footer ul { 1425. margin: 0 0 5px; 1426. padding: 0; 1427.} 1428. 1429.#ja-footer li { 1430. margin: 0; 1431. padding: 0; 1432. display: inline; 1433. background: none; 1434.} 1435. 1436.#ja-footer li a { 1437. padding: 0 15px 0 0; 1438. display: inline; 1439. color: #666666; 1440. font-weight: bold; 1441. font-size: 92%; 1442. line-height: normal; 1443. text-decoration: none; 1444. text-transform: uppercase; 1445.} 1446. 1447.#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus { 1448. color: #333333; 1449. text-decoration: none; 1450.} 1451. 1452..ja-cert { 1453. font-size: 92%; 1454. position: absolute; 1455. right: 0; 1456. top: 18px; 1457.} 1458. 1459..ja-cert a { 1460. margin: 0 0 0 5px; 1461. padding: 0; 1462. border: none; 1463. border: none; 1464. text-decoration: none; 1465.} 1466. 1467..ja-cert a span { 1468. display: none; 1469.} 1470. 1471..ja-cert a img { 1472. border: none; 1473.} Image Files: but-css.gif but-xhtml10.gif vdot.gif
grad3.gif Javascript: Files ja_purity/js/XXXXX.js
Ja purity css template css

CSS Files
1. /* COMMON STYLE 2. --------------------------------------------------------- */ 3. html, body, form, fieldset { 4. margin: 0; 5. padding: 0; 6. } 7. 8. body { 9. color: #000000; 10. background: #FFFFFF; 11. font-family: Arial, Helvetica, sans-serif; 12. line-height: 150%; 13.} 14. 15.body#bd { 16. color: #333333; 17. background: #F2F2F2; 18.} 19. 20.body.contentpane { 21. width: auto; /* Printable Page */ 22. margin: 1em 2em; 23. line-height: 1.3em; 24. margin: 0px 0px 0px 0px; 25. font-size: 12px; 26. color: #333; 27.} 28. 29.body.fs1 { 30. font-size: 10px; 31.} 32. 33.body.fs2{ 34. font-size: 11px; 35.} 36. 37.body.fs3{ 38. font-size: 12px; 39.} 40. 41.body.fs4{ 42. font-size: 13px; 43.} 44. 45.body.fs5{ 46. font-size: 14px; 47.} 48. 49.body.fs6{ 50. font-size: 15px; 51.} 52.
53./* Normal link */ 54.a { 55. color: #006699; 56. text-decoration: underline; 57.} 58. 59.a:hover, a:active, a:focus { 60. color: #333333; 61. text-decoration: underline; 62.} 63. 64./* Title text */ 65..contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 { 66. font-family: "Segoe UI", Arial, Helvetica, sans-serif; 67.} 68. 69./* Small text */ 70.small, .small, .smalldark, .mosimage_caption, .createby, .createdate, .modifydate, a.readon, .img_caption { 71. color: #666666; 72. font-size: 92%; 73.} 74. 75./* Heading */ 76.h1 { 77. font-size: 180%; 78.} 79. 80.h2 { 81. font-size: 150%; 82.} 83. 84.h3 { 85. font-size: 125%; 86.} 87. 88.h4 { 89. font-size: 100%; 90. text-transform: uppercase; 91.} 92. 93.p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 { 94. margin: 1em 0; 95. padding: 0; 96.} 97. 98.ul { 99. list-style: none; 100.} 101. 102.ul li { 103. padding-left: 30px; 104. background: url(../images/bullet.gif) no-repeat 18px 8px; 105. line-height: 180%; 106.} 107. 108.ol li { 109. margin-left: 35px; 110. line-height: 180%; 111.} 112. 113.th { 114. padding: 5px; 115. font-weight: bold;
116. text-align: left; 117.} 118. 119.fieldset { 120. border: none; 121. padding: 10px 5px; 122. background: url(../images/hdot2.gif) repeat-x top; 123.} 124. 125.fieldset a { 126. font-weight: bold; 127.} 128. 129.hr { 130. border-top: 1px solid #CCCCCC; 131. border-right: 0; 132. border-left: 0; 133. border-bottom: 0; 134. height: 1px; 135.} 136. 137.td, div { 138. font-size: 100%; 139.} 140. 141.img { 142. border: none; 143.} 144./* FORM 145.--------------------------------------------------------- */ 146.form { 147. margin: 0; 148. padding: 0; 149.} 150. 151.form label { 152. cursor: pointer; 153.} 154. 155.input, select, textarea, .inputbox { 156. padding: 3px 5px; 157. font-family: Tahoma, Arial, Helvetica, sans-serif; 158. font-size: 100%; 159.} 160. 161..button { 162. padding: 3px 5px; 163. border: 1px solid #333333; 164. background: url(../images/grad1.gif) repeat-x top #333333; 165. color: #CCCCCC; 166. font-size: 85%; 167. text-transform: uppercase; 168.} 169. 170..button:hover, .button:focus { 171. border: 1px solid #999999; 172. background: #333333; 173. color: #FFFFFF; 174.} 175. 176.* html .button { 177. padding: 2px 0 !important; /*IE 6*/ 178.} 179.
180.*+html .button { 181. padding: 2px 0 !important; /*IE 7*/ 182.} 183. 184..inputbox { 185. border: 1px solid #CCCCCC; 186. background: #FFFFFF; 187.} 188. 189..inputbox:hover, .inputbox:focus { 190. background: #FFFFCC; 191.} 192. 193./* BONUS TYPOGRAPHY STYLES 194.--------------------------------------------------------- */ 195.pre, .code { 196. padding: 10px 15px; 197. margin: 5px 0 15px; 198. border-left: 5px solid #999999; 199. background: #FFFFFF; 200. font: 1em/1.5 "Courier News", monospace; 201.} 202. 203.blockquote { 204. padding: 1em 40px 1em 15px; 205.} 206. 207.blockquote span.open { 208. padding: 0 0 0 20px; 209. background: url(../images/so-q.gif) no-repeat left top; 210.} 211. 212.blockquote span.close { 213. padding: 0 20px 0 0; 214. background: url(../images/sc-q.gif) no-repeat bottom right; 215.} 216. 217./* Quote hilight */ 218..quote-hilite { 219. padding: 10px 15px; 220. margin: 0; 221. border: 1px solid #CACACC; 222. background: #FFFFFF; 223.} 224. 225./* Small quote */ 226..small-quote { 227. margin: 0; 228. padding: 0; 229. background: none; 230.} 231. 232..small-quote span.open-quote { 233. margin: 0; 234. padding-left: 20px; 235. background: url(../images/so-q.gif) no-repeat center left; 236.} 237. 238..small-quote span.close-quote { 239. margin: 0; 240. padding-right: 20px; 241. background: url(../images/sc-q.gif) no-repeat center right; 242.} 243.
244..small-quote span.author { 245. padding: 2px 5px 2px 20px; 246. border-top: 1px solid #DCDDE0; 247. margin: 0.5em 0 0; 248. display: block; 249. background: url(../images/author.gif) no-repeat 5px 4px #EAEBEE; 250. font-size: 90%; 251. text-transform: uppercase; 252.} 253. 254./* Rropcap */ 255..dropcap { 256. float: left; 257. padding: 4px 8px 0 0; 258. display: block; 259. color: #999999; 260. font: 50px/40px Georgia, Times, serif; 261.} 262. 263./* Tips, Error, Message, Hightlight*/ 264.p.error { 265. padding-left: 25px; 266. color: #BF0000; 267. background: url(../images/icon-error.gif) no-repeat top left; 268.} 269. 270.p.message { 271. padding-left: 25px; 272. color: #006699; 273. background: url(../images/icon-info.gif) no-repeat top left; 274.} 275. 276.p.tips { 277. padding-left: 25px; 278. color: #EE9600; 279. background: url(../images/icon-tips.gif) no-repeat top left; 280.} 281. 282..highlight { 283. padding: 1px 5px; 284. background: #FFFFCC; 285. font-weight: bold; 286.} 287. 288./* Note Style */ 289.p.stickynote { 290. padding: 10px 0px 10px 40px; 291. border: 1px solid #CACACC; 292. background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF; 293.} 294. 295.p.download { 296. padding: 10px 0px 10px 40px; 297. border: 1px solid #CACACC; 298. background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF; 299.} 300. 301..blocknumber { 302. clear: both; 303. padding: 5px 15px 10px; 304. position: relative; 305.} 306. 307./* Check list */
308.ul.checklist { 309. list-style: none; 310.} 311. 312.ul.checklist li { 313. margin-left: 15px; 314. padding: 0 0 5px 20px; 315. background: url(../images/checklist-bg.gif) no-repeat 0 3px; 316.} 317. 318./* Small checklist */ 319.ul.small-checklist { 320. list-style: none; 321.} 322. 323.ul.small-checklist li { 324. margin-left: 15px; 325. padding: 0 0 5px 20px; 326. background: url(../images/icon_list.gif) no-repeat 0 3px; 327.} 328. 329./* Check list */ 330.ul.stars { 331. list-style: none; 332.} 333. 334.ul.stars li { 335. margin-left: 15px; 336. padding: 0px 0 5px 20px; 337. background: url(../images/star-bg.gif) no-repeat 0 3px; 338.} 339. 340./* Bignumber */ 341..bignumber { 342. float: left; 343. margin-right: 8px; 344. padding: 6px 7px; 345. display: block; 346. background: url(../images/ol-bg.gif) no-repeat top left; 347. color: #7BA566; 348. font: bold 20px/normal Arial, sans-serif; 349.} 350. 351./* Talking box. Thinking box. */ 352.div.bubble1, div.bubble2, div.bubble3, div.bubble4 { 353. margin: 15px 0; 354.} 355. 356.div.bubble1 span.author, 357.div.bubble2 span.author, 358.div.bubble3 span.author, 359.div.bubble4 span.author { 360. padding-left: 15px; 361. margin-left: 15px; 362. background: url(../images/author.gif) no-repeat center left; 363. font-weight: bold; 364.} 365. 366.div.bubble1 div { 367. margin: 0; 368. width: 100%; 369. background: url(../images/bub1-br.gif) no-repeat bottom right; 370.} 371.
372.div.bubble1 div div { 373. background: url(../images/bub1-bl.gif) 374.} 375. 376.div.bubble1 div div div { 377. background: url(../images/bub1-tr.gif) 378.} 379. 380.div.bubble1 div div div div { 381. background: url(../images/bub1-tl.gif) 382.} 383. 384.div.bubble1 div div div div div { 385. margin: 0; 386. padding: 15px 15px 30px 15px; 387. width: auto; 388.} 389. 390.div.bubble2 div { 391. margin: 0; 392. width: 100%; 393. background: url(../images/bub2-br.gif) 394.} 395. 396.div.bubble2 div div { 397. background: url(../images/bub2-bl.gif) 398.} 399. 400.div.bubble2 div div div { 401. background: url(../images/bub2-tr.gif) 402.} 403. 404.div.bubble2 div div div div { 405. background: url(../images/bub2-tl.gif) 406.} 407. 408.div.bubble2 div div div div div { 409. margin: 0; 410. padding: 15px 15px 35px 15px; 411. width: auto; 412.} 413. 414.div.bubble3 div { 415. margin: 0; 416. width: 100%; 417. background: url(../images/bub3-br.gif) 418.} 419. 420.div.bubble3 div div { 421. background: url(../images/bub3-bl.gif) 422.} 423. 424.div.bubble3 div div div { 425. background: url(../images/bub3-tr.gif) 426.} 427. 428.div.bubble3 div div div div { 429. background: url(../images/bub3-tl.gif) 430.} 431. 432.div.bubble3 div div div div div { 433. margin: 0; 434. padding: 15px 15px 50px 15px; 435. width: auto;
no-repeat bottom left;
no-repeat top right;
no-repeat top left;
no-repeat bottom right;
no-repeat top left;
no-repeat top left;
436.} 437. 438.div.bubble4 div { 439. margin: 0; 440. width: 100%; 441. background: url(../images/bub4-br.gif) no-repeat bottom right; 442.} 443. 444.div.bubble4 div div { 445. background: url(../images/bub4-bl.gif) no-repeat bottom left; 446.} 447. 448.div.bubble4 div div div { 449. background: url(../images/bub4-tr.gif) no-repeat top right; 450.} 451. 452.div.bubble4 div div div div { 453. background: url(../images/bub4-tl.gif) no-repeat top left; 454.} 455. 456.div.bubble4 div div div div div { 457. margin: 0; 458. padding: 15px 15px 55px 15px; 459. width: auto; 460.} 461. 462./* Legend */ 463..legend-title { 464. margin: 0; 465. padding: 0 3px; 466. float: left; 467. display: block; 468. background: #F6F6F6; 469. font-weight: bold; 470. position: absolute; 471. top: -10px; 472. left: 7px; 473.} 474. 475..legend { 476. margin: 20px 0; 477. padding: 0 10px; 478. border: 1px solid #CACACC; 479. background: #FFFFFF; 480. position: relative; 481.} 482. 483./* JOOMLA STYLE 484.--------------------------------------------------------- */ 485.table.blog { 486.} 487. 488..article_separator { 489. clear: both; 490. display: block; 491. height: 20px; 492.} 493. 494..article_column { 495.} 496. 497..column_separator { 498. padding: 0 25px; 499.}
500. 501./* content tables */ 502.td.sectiontableheader { 503. padding: 4px; 504. border-right: 1px solid #fff; 505.} 506. 507.tr.sectiontableentry0 td, 508.tr.sectiontableentry1 td, 509.tr.sectiontableentry2 td { 510. padding: 4px; 511.} 512. 513.td.sectiontableentry0, 514.td.sectiontableentry1, 515.td.sectiontableentry2 { 516. padding: 3px; 517.} 518. 519.table.contentpane { 520. border: none; 521. width: 100%; 522.} 523. 524.table.contentpaneopen { 525. border: none; 526. border-collapse: collapse; 527. border-spacing: 0; 528.} 529. 530.table.contenttoc { 531. margin: 0 0 10px 10px; 532. padding: 0; 533. width: 35%; 534. float: right; 535.} 536. 537.table.contenttoc a { 538. text-decoration: none; 539.} 540. 541.table.contenttoc td { 542. padding: 1px 5px 1px 25px; 543. background: url(../images/bullet-list.gif) no-repeat 5% 50%; 544.} 545. 546.table.contenttoc th { 547. padding: 0 0 3PX; 548. border-bottom: 1px solid #CCCCCC; 549. text-indent: 5px; 550.} 551. 552.table.poll { 553. padding: 0; 554. width: 100%; 555. border-collapse: collapse; 556.} 557. 558.table.pollstableborder { 559. padding: 0; 560. width: 100%; 561. border: none; 562. text-align: left; 563.}
564. 565.table.pollstableborder img { 566. vertical-align: baseline; 567.} 568. 569.table.pollstableborder td { 570. padding: 4px!important; 571. border-collapse: collapse; 572. border-spacing: 0; 573.} 574. 575.table.pollstableborder tr.sectiontableentry1 td { 576. background: #ECECEC; 577.} 578. 579.table.searchintro { 580. padding: 10px 0; 581. width: 100%; 582.} 583. 584.table.searchintro td { 585. padding: 5px!important; 586.} 587. 588.table.adminform { 589.} 590. 591..adminform .inputbox { 592.} 593. 594..blog_more { 595. padding: 10px 0; 596. background: url(../images/hdot.gif) repeat-x top; 597.} 598. 599..blog_more strong { 600. margin: 0 0 5px; 601. display: block; 602. font-size: 125%; 603.} 604. 605..blog_more ul { 606. margin: 0; 607. padding: 0; 608.} 609. 610..blog_more ul li { 611. margin: 0; 612. padding: 0 0 0 17px; 613. background: url(../images/bullet.gif) no-repeat 6px 8px; 614.} 615. 616..category { 617. font-weight: bold; 618.} 619. 620.h1.componentheading, .componentheading { 621. padding: 5px 0 15px; 622. margin: 0 0 10px; 623. background: url(../images/hdot.gif) repeat-x bottom; 624.} 625. 626..componentheading { 627. font-size: 200%;
628. font-weight: bold; 629.} 630. 631..contentdescription { 632. padding-bottom: 30px; 633.} 634. 635.h2.contentheading, .contentheading { 636. padding: 5px 0 8px; 637. margin: 0; 638. font-weight: normal; 639.} 640. 641.table.blog .contentheading { 642. font-size: 150%; 643.} 644. 645..contentheading { 646. font-size: 200%; 647.} 648. 649.a.contentpagetitle, 650.a.contentpagetitle:hover, 651.a.contentpagetitle:active, 652.a.contentpagetitle:focus { 653. text-decoration: none !important; 654.} 655. 656.a.readon { 657. float: left; 658. margin-top: 10px; 659. padding: 1px 5px 1px 14px; 660. border: 1px solid #F6F6F6; 661. display: block; 662. background: url(../images/arrow.png) no-repeat 5px 48%; 663. color: #006699; 664. font-weight: bold; 665. text-decoration: none; 666. text-transform: uppercase; 667.} 668. 669.a.readon:hover, a.readon:active, a.readon:focus { 670. border: 1px solid #ECECEC; 671. background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF; 672.} 673. 674.table.contentpaneopen td, table.contentpane td { 675.} 676. 677.table.contentpaneopen, table.contentpane, table.blog { 678. width: 100%; 679.} 680. 681..moduletable { 682. padding: 0; 683.} 684. 685.ul.pagination { 686. margin: 15px auto; 687. padding: 10px 0; 688. background: url(../images/hdot.gif) repeat-x top; 689.} 690. 691.ul.pagination li {
692. margin: 0; 693. padding: 0; 694. display: inline; 695. background: none; 696.} 697. 698.ul.pagination li span{ 699. padding: 2px 5px; 700.} 701. 702.ul.pagination a { 703. padding: 2px 5px; 704. border: 1px solid #F6F6F6; 705.} 706. 707.ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus { 708. border: 1px solid #ECECEC; 709. background: #FFFFFF; 710.} 711. 712..pagenavbar { 713. padding-left: 14px; 714.} 715. 716..pagenavcounter { 717. padding: 8px 14px 0 14px; 718.} 719. 720..sectiontableheader { 721. padding: 8px 5px; 722. background: #444444; 723. color: #FFFFFF; 724.} 725. 726..sectiontableheader a { 727. color: #FFFFFF; 728.} 729. 730.tr.sectiontableentry1 td { 731. padding: 8px 5px; 732. background: url(../images/hdot2.gif) repeat-x bottom; 733.} 734. 735.tr.sectiontableentry2 td { 736. padding: 8px 5px; 737. background: url(../images/hdot2.gif) repeat-x bottom #ECECEC; 738.} 739. 740.tr.sectiontableentry1:hover td, 741.tr.sectiontableentry2:hover td { 742. background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC; 743.} 744. 745..smalldark { 746. text-align: left; 747.} 748. 749.div.syndicate div { 750. text-align: center; 751.} 752. 753..pollstableborder tr.sectiontableentry1 td, 754..pollstableborder tr.sectiontableentry2 td { 755. background: none;
756.} 757. 758./* META 759.--------------------------------------------------------- */ 760..article-tools { 761. border-top: 1px solid #DDDDDD; 762. width: 100%; 763. float: left; 764. clear: both; 765. margin-bottom: 15px; 766. display: block; 767. background: #ECECEC; 768.} 769. 770..article-meta { 771. padding: 5px; 772. width: 80%; 773. float: left; 774.} 775. 776..createby { 777. padding: 3px 3px 3px 20px; 778. background: url(../images/icon-user.gif) no-repeat 0 2px; 779.} 780. 781..createdate { 782. padding: 3px 3px 3px 20px; 783. background: url(../images/icon-date.gif) no-repeat 0 2px; 784.} 785. 786..modifydate { 787. width: 100%; 788. float: left; 789.} 790. 791.div.buttonheading { 792. float: right; 793. width: 15%; 794.} 795. 796..buttonheading img { 797. margin: 7px 5px 0 0; 798. border: 0; 799. float: right; 800.} 801. 802./* MAIN LAYOUT DIVS 803.--------------------------------------------------------- */ 804.#ja-wrapper { 805. width: 100%; 806. margin: 0; 807. background: #F2F2F2; 808.} 809. 810.#ja-containerwrap { 811. background: url(../images/cw-bg1.gif) repeat-y 50% 0; 812.} 813. 814.#ja-containerwrap2 { 815. background: url(../images/cw-bg2.gif) no-repeat 50% 0; 816.} 817. 818.#ja-container { 819. background: url(../images/c-bg1.gif) repeat-y 18% 0;
820.} 821. 822.#ja-container2 { 823. padding: 20px 0; 824. background: url(../images/c-bg2.gif) no-repeat 18% 0; 825.} 826. 827.#ja-mainbody-fr #ja-col1 { 828. width: 20%; 829.} 830. 831.#ja-mainbody-fr #ja-contentwrap { 832. width: 80%; 833.} 834. 835.#ja-mainbody, #ja-mainbody-fl { 836. float: left; 837. width: 80%; 838.} 839. 840.#ja-mainbody #ja-contentwrap { 841. float: right; 842. width: 75%; 843.} 844. 845.#ja-mainbody-fl #ja-contentwrap { 846. float: left; 847. width: 100%; 848.} 849. 850.#ja-mainbody-f, #ja-mainbody-fr { 851. float: none; 852. width: 100%; 853.} 854. 855.#ja-mainbody-fr #ja-contentwrap { 856. width: 74.8%; 857. float: right; 858.} 859. 860.#ja-mainbody-fr #ja-col1 { 861. width: 20%; 862. float: left; 863.} 864. 865.#ja-mainbody-fr #ja-contentwrap { 866. width: 80%; 867.} 868. 869.#ja-content { 870. padding: 0 20px 0 40px; 871.} 872.#ja-contentwrap { 873. min-height: 300px; 874. height: auto; 875.} 876.* html #ja-contentwrap { 877. height: 300px; 878.} 879.#ja-mainbody-fl #ja-content { 880. padding-left: 0; 881.} 882. 883.#ja-mainbody-f #ja-content {
884. padding: 0; 885.} 886. 887./* Full */ 888.#ja-containerwrap-f { 889. background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6; 890.} 891. 892.#ja-containerwrap-f #ja-containerwrap2 { 893. background: none; 894.} 895. 896.#ja-containerwrap-f #ja-container, 897.#ja-containerwrap-f #ja-container2 { 898. background: none; 899.} 900. 901./* Full left */ 902.#ja-containerwrap-fl { 903. background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6; 904.} 905. 906.#ja-containerwrap-fl #ja-containerwrap2, 907.#ja-containerwrap-fl #ja-container, 908.#ja-containerwrap-fl #ja-container2 { 909. background: none; 910.} 911. 912./* Full right */ 913.#ja-containerwrap-fr { 914. background: url(../images/cw-bg1.gif) repeat-y 50% 0; 915.} 916. 917.#ja-containerwrap-fr #ja-containerwrap2 { 918. background: url(../images/cw-bg2.gif) no-repeat 50% 0; 919.} 920. 921./* HEADER 922.--------------------------------------------------------- */ 923.#ja-headerwrap { 924. background: #333333; 925. color: #CCCCCC; 926. line-height: normal; 927. height: 80px; 928.} 929. 930.#ja-header { 931. position: relative; 932. height: 80px; 933.} 934. 935..ja-headermask { 936. width: 602px; 937. display: block; 938. background: url(../images/header-mask.png) no-repeat top right; 939. height: 80px; 940. position: absolute; 941. top: 0; 942. right: -1px; 943.} 944. 945.#ja-header a { 946. color: #CCCCCC; 947.}
948. 949.h1.logo, h1.logo-text { 950. margin: 0 0 0 5px; 951. padding: 0; 952. font-size: 180%; 953. text-transform: uppercase; 954.} 955. 956.h1.logo a { 957. width: 208px; 958. display: block; 959. background: url(../images/logo.png) no-repeat; 960. height: 80px; 961. position: relative; 962. z-index: 100; 963.} 964. 965.h1.logo a span { 966. position: absolute; 967. top: -1000px; 968.} 969. 970.h1.logo-text a { 971. color: #CCCCCC !important; 972. text-decoration: none; 973. outline: none; 974. position: absolute; 975. bottom: 40px; 976. left: 5px; 977.} 978. 979.p.site-slogan { 980. margin: 0; 981. padding: 0; 982. padding: 2px 5px; 983. color: #FFFFFF; 984. background: #444444; 985. font-size: 92%; 986. position: absolute; 987. bottom: 20px; 988. left: 0; 989.} 990. 991./* Search */ 992.#ja-search { 993. padding-left: 20px; 994. background: url(../images/icon-search.gif) no-repeat center left; 995. position: absolute; 996. bottom: 15px; 997. right: 0; 998.} 999. 1000.#ja-search .inputbox { 1001. width: 120px; 1002. border: 1px solid #333333; 1003. padding: 3px 5px; 1004. color: #999999; 1005. background: #444444; 1006. font-size: 92%; 1007.} 1008. 1009./* MAIN NAVIGATION 1010.--------------------------------------------------------- */ 1011.
1012.#ja-pathway { 1013. font-size: 92%; 1014.} 1015. 1016.#ja-pathway strong { 1017. margin-right: 5px; 1018. font-weight: normal; 1019.} 1020. 1021.#ja-pathway a { 1022. text-decoration: none; 1023.} 1024. 1025.#ja-pathway img { 1026. margin: 1px 5px; 1027.} 1028. 1029./* MODULE 1030.--------------------------------------------------------- */ 1031.div.moduletable, 1032.div.moduletable_menu, 1033.div.moduletable_text { 1034. padding: 0 0 20px; 1035. margin-bottom: 15px; 1036. background: url(../images/hdot.gif) repeat-x bottom; 1037.} 1038. 1039.div.moduletable h3, 1040.div.moduletable_menu h3, 1041.div.moduletable_text h3 { 1042. padding: 0 0 8px; 1043. margin: 0; 1044. color: #7BA566; 1045. font-size: 125%; 1046. font-weight: bold; 1047. text-transform: uppercase; 1048.} 1049. 1050./* Module rounded */ 1051.div.module h3 { 1052. margin: 0 -15px 10px; 1053. padding: 8px 15px 5px; 1054. border-bottom: 2px solid #F6F6F6; 1055. color: #7BA566; 1056. font-size: 125%; 1057. font-weight: bold; 1058. text-transform: uppercase; 1059.} 1060. 1061.div.module_black, 1062.div.module_green, 1063.div.module_blue, 1064.div.module_red, 1065.div.module { 1066. margin-bottom: 20px; 1067. float: left; 1068. clear: both; 1069. width: 100%; 1070. background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF; 1071.} 1072. 1073.div.module div { 1074. background: url(../images/b-bl.gif) no-repeat bottom left; 1075.}
1076. 1077.div.module div div { 1078. background: url(../images/b-tr.gif) no-repeat top right; 1079.} 1080. 1081.div.module div div div { 1082. padding: 0 15px 10px; 1083. background: url(../images/b-tl.gif) no-repeat top left; 1084.} 1085. 1086.div.module_black div div div div, 1087.div.module_green div div div div, 1088.div.module_blue div div div div, 1089.div.module_red div div div div, 1090.div.module_text div div div div, 1091.div.module div div div div { 1092. margin: 0; 1093. padding: 0; 1094. float: none; 1095. width: 99%; 1096. background: none; 1097.} 1098. 1099.div.module_text h3 { 1100. margin: 0 0 10px; 1101. width: 100%; 1102. clear: both; 1103. display: block; 1104. overflow: hidden; 1105.} 1106. 1107.div.module_text span { 1108. padding: 0 3px 0 0; 1109. float: left; 1110. clear: both; 1111. display: block; 1112. background: #F6F6F6; 1113. font-weight: bold; 1114.} 1115. 1116.div.module_text { 1117. margin-bottom: 20px; 1118. padding: 0; 1119. float: left; 1120. clear: both; 1121. width: 100%; 1122. background: url(../images/bt-br.gif) no-repeat bottom right #F6F6F6; 1123.} 1124. 1125.div.module_text div { 1126. background: url(../images/bt-bl.gif) no-repeat bottom left; 1127.} 1128. 1129.div.module_text div div { 1130. background: url(../images/bt-tr.gif) no-repeat top right; 1131.} 1132. 1133.div.module_text div div div { 1134. padding: 0 15px 10px; 1135. display: block; 1136. background: url(../images/bt-tl.gif) no-repeat top left; 1137.} 1138. 1139.div.banneritem_text {
1140. padding: 5px 0 !important; 1141.} 1142. 1143./* red */ 1144.div.module_black h3, 1145.div.module_green h3, 1146.div.module_blue h3, 1147.div.module_red h3 { 1148. margin: 0 -15px 10px; 1149. padding: 8px 15px 5px; 1150. border-bottom: 1px solid #F6F6F6; 1151. color: #FFFFFF; 1152. font-size: 125%; 1153. font-weight: bold; 1154. text-transform: uppercase; 1155.} 1156. 1157.div.module_red { 1158. background: url(../images/br-br.gif) 1159. color: #FFFFFF; 1160.} 1161. 1162.div.module_red div { 1163. background: url(../images/br-bl.gif) 1164.} 1165. 1166.div.module_red div div { 1167. background: url(../images/br-tr.gif) 1168.} 1169. 1170.div.module_red div div div { 1171. padding: 0 15px 10px; 1172. background: url(../images/br-tl.gif) 1173.} 1174. 1175./* blue */ 1176.div.module_blue { 1177. background: url(../images/bb-br.gif) 1178. color: #FFFFFF; 1179.} 1180. 1181.div.module_blue div { 1182. background: url(../images/bb-bl.gif) 1183.} 1184. 1185.div.module_blue div div { 1186. background: url(../images/bb-tr.gif) 1187.} 1188. 1189.div.module_blue div div div { 1190. padding: 0 15px 10px; 1191. background: url(../images/bb-tl.gif) 1192.} 1193. 1194./* green */ 1195.div.module_green { 1196. background: url(../images/bg-br.gif) 1197. color: #FFFFFF; 1198.} 1199. 1200.div.module_green div { 1201. background: url(../images/bg-bl.gif) 1202.} 1203.
no-repeat bottom right #BF0000;
no-repeat top left;
no-repeat bottom right #006699;
no-repeat top left;
no-repeat bottom right #7BA566;
1204.div.module_green div div { 1205. background: url(../images/bg-tr.gif) 1206.} 1207. 1208.div.module_green div div div { 1209. padding: 0 15px 10px; 1210. background: url(../images/bg-tl.gif) 1211.} 1212. 1213./* black */ 1214.div.module_black { 1215. background: url(../images/bl-br.gif) 1216. color: #FFFFFF; 1217.} 1218. 1219.div.module_black div { 1220. background: url(../images/bl-bl.gif) 1221.} 1222. 1223.div.module_black div div { 1224. background: url(../images/bl-tr.gif) 1225.} 1226. 1227.div.module_black div div div { 1228. padding: 0 15px 10px; 1229. background: url(../images/bl-tl.gif) 1230.} 1231. 1232.div.module_blue ul, 1233.div.module_blue ol, 1234.div.module_red ul, 1235.div.module_red ol, 1236.div.module_black ul, 1237.div.module_black ol, 1238.div.module_green ul, 1239.div.module_green ol { 1240. margin: 0; 1241. padding: 0; 1242.} 1243. 1244.div.module_blue li, 1245.div.module_red li, 1246.div.module_black li, 1247.div.module_green li { 1248. margin-left: 20px; 1249. padding: 0; 1250. line-height: 150%; 1251.} 1252. 1253.div.module_blue a, 1254.div.module_red a, 1255.div.module_black a, 1256.div.module_green a { 1257. color: #FFFFFF; 1258.} 1259. 1260.div.advs { 1261. float: left; 1262. width: 100%; 1263. clear: both; 1264. display: block; 1265.} 1266. 1267./* LEFT COLUMN + RIGHT COLUMN
no-repeat top left;
no-repeat bottom right #333333;
no-repeat top left;
1268.--------------------------------------------------------- */ 1269.#ja-col1 { 1270. float: left; 1271. width: 24.99%; 1272. padding-top: 10px; 1273. overflow: hidden; 1274.} 1275. 1276.#ja-col2 { 1277. float: right; 1278. width: 20%; 1279. overflow: hidden; 1280.} 1281. 1282.#ja-col1 table, 1283.#ja-col2 table { 1284. border-collapse: collapse; 1285. border-spacing: 0; 1286.} 1287. 1288.#ja-col1 ul li, 1289.#ja-col2 ul li { 1290. padding-left: 15px; 1291. margin: 0; 1292. background: url(../images/bullet.gif) no-repeat 5px 50%; 1293.} 1294. 1295.#ja-col1 ul, #ja-col2 ul { 1296. margin: 0; 1297.} 1298. 1299.#ja-col1 ol, #ja-col2 ol { 1300. margin-left: 5px; 1301.} 1302. 1303.#ja-col1 .article_separator, 1304.#ja-col2 .article_separator { 1305. display: none; 1306.} 1307. 1308./* SPOTLIGHT 1309.--------------------------------------------------------- */ 1310./* Spotlight Box Style */ 1311..ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right { 1312. float: left; 1313. overflow: hidden; 1314.} 1315. 1316..ja-box-left div.moduletable, 1317..ja-box-full div.moduletable { 1318. padding-right: 30px; 1319. background: none; 1320.} 1321. 1322..ja-box-right div.moduletable { 1323. padding-left: 30px; 1324. background: url(../images/vdot2.gif) repeat-y left; 1325.} 1326. 1327..ja-box-center div.moduletable { 1328. padding: 0 30px; 1329. background: url(../images/vdot2.gif) repeat-y left; 1330.} 1331.
1332.#ja-botsl h3 { 1333. background: none; 1334.} 1335. 1336.#ja-botslwrap { 1337. border-top: 5px solid #CCCCCC; 1338. background: #444444; 1339. color: #CCCCCC; 1340.} 1341. 1342.#ja-botsl { 1343. padding: 15px 0; 1344.} 1345. 1346.#ja-botsl div.moduletable { 1347. padding-top: 0; 1348. padding-bottom: 0; 1349. margin: 0; 1350.} 1351. 1352.#ja-botsl h3 { 1353. margin: 0 0 12px; 1354. padding: 0; 1355. color: #FFFFFF; 1356.} 1357. 1358.#ja-botsl a { 1359. color: #CCCCCC; 1360.} 1361. 1362.#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus { 1363. color: #FFFFFF; 1364.} 1365. 1366.#ja-botsl ul, #ja-botsl p, #ja-botsl ol { 1367. padding: 0; 1368. margin: 0 !important; 1369.} 1370. 1371.#ja-botsl ul li { 1372. padding: 0 0 0 15px; 1373. margin: 0; 1374. background: url(../images/bullet2.gif) no-repeat 3px 8px; 1375.} 1376. 1377.#ja-botsl ol li { 1378. margin-left: 25px; 1379. padding: 0 !important; 1380.} 1381. 1382.#ja-botsl td { 1383. padding: 0; 1384.} 1385. 1386.#ja-botsl .article_separator { 1387. display: none; 1388.} 1389. 1390.#ja-botsl table { 1391. border-spacing: 0; 1392. border-collapse: collapse; 1393.} 1394. 1395./* FOOTER
1396.--------------------------------------------------------- */ 1397.#ja-footerwrap { 1398. border-top: 5px solid #CCCCCC; 1399. padding: 20px 0 30px; 1400. clear: both; 1401. background: url(../images/grad3.gif) repeat-x bottom #F6F6F6; 1402.} 1403. 1404.#ja-footer { 1405. padding: 0; 1406. color: #666666; 1407. background: url(../images/vdot.gif) repeat-y 22% 0; 1408. position: relative; 1409.} 1410. 1411.#ja-footer .copyright { 1412. clear: both; 1413. display: block; 1414. padding-left: 25%; 1415. color: #666666; 1416. font-style: normal; 1417. font-size: 92%; 1418.} 1419. 1420.#ja-footnav { 1421. padding-left: 25%; 1422.} 1423. 1424.#ja-footer ul { 1425. margin: 0 0 5px; 1426. padding: 0; 1427.} 1428. 1429.#ja-footer li { 1430. margin: 0; 1431. padding: 0; 1432. display: inline; 1433. background: none; 1434.} 1435. 1436.#ja-footer li a { 1437. padding: 0 15px 0 0; 1438. display: inline; 1439. color: #666666; 1440. font-weight: bold; 1441. font-size: 92%; 1442. line-height: normal; 1443. text-decoration: none; 1444. text-transform: uppercase; 1445.} 1446. 1447.#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus { 1448. color: #333333; 1449. text-decoration: none; 1450.} 1451. 1452..ja-cert { 1453. font-size: 92%; 1454. position: absolute; 1455. right: 0; 1456. top: 18px; 1457.} 1458. 1459..ja-cert a {
1460. margin: 0 0 0 5px; 1461. padding: 0; 1462. border: none; 1463. border: none; 1464. text-decoration: none; 1465.} 1466. 1467..ja-cert a span { 1468. display: none; 1469.} 1470. 1471..ja-cert a img { 1472. border: none; 1473.} 1474. 1475..banneritem { 1476. display: block; 1477. margin-top: 15px; 1478.} 1479. 1480./* MISCELLANOUS 1481.----------------------------------------------------------- */ 1482.ul.accessibility { 1483. position: absolute; 1484. top: -100%; 1485.} 1486. 1487./*usertool*/ 1488.ul.ja-usertools-font { 1489. font-size: 11px; 1490. position: absolute; 1491. top: 8px; 1492. right: 70px; 1493.} 1494. 1495.ul.ja-usertools-font li { 1496. padding: 0; 1497. margin: 0; 1498. display: inline; 1499. background: none; 1500.} 1501. 1502./*collapsible h3*/ 1503.h3.show { 1504. background: url(../images/arrow2.png) no-repeat 90% 60%; 1505. cursor: pointer; 1506.} 1507. 1508.h3.hide { 1509. background: url(../images/arrow3.png) no-repeat 90% 60%; 1510. cursor: pointer; 1511.} 1512. 1513./*others*/ 1514.#ja-banner { 1515. margin: 15px 0; 1516. text-align: center; 1517.} 1518. 1519.div.back_button a, 1520.div.back_button a:hover, 1521.div.back_button a:active { 1522. margin: 10px 0; 1523. display: block;
1524. background: none!important; 1525. text-decoration: none!important; 1526.} 1527. 1528.#form-login p { 1529. margin: 0 0 5px; 1530.} 1531. 1532.#form-login ul { 1533. margin: 10px 0 0; 1534.} 1535. 1536.#form-login .inputbox { 1537. width: 90%; 1538.} 1539. 1540..clr { 1541. clear: both; 1542.} 1543. 1544..hasTip img { 1545. margin: 10px 5px 0 0; 1546. border: none; 1547.} 1548. 1549./* Tooltips */ 1550..tool-tip { 1551. float: left; 1552. border: 1px solid #D4D5AA; 1553. padding: 5px; 1554. background: #FFFFCC; 1555. max-width: 200px; 1556.} 1557. 1558..tool-title { 1559. padding: 0; 1560. margin: 0; 1561. margin-top: -15px; 1562. padding-top: 15px; 1563. padding-bottom: 5px; 1564. background: url(../../system/images/selector-arrow.png) no-repeat; 1565. font-size: 100%; 1566. font-weight: bold; 1567.} 1568. 1569..tool-text { 1570. margin: 0; 1571. font-size: 100%; 1572.} 1573. 1574.#system-message dd.message ul, 1575.#system-message dd.error ul, 1576.#system-message dd.notice ul { 1577. padding: 0; 1578. margin: 0; 1579.} 1580. 1581.#system-message dd.message ul li, 1582.#system-message dd.error ul li, 1583.#system-message dd.notice ul li { 1584. background: none; 1585. padding: 5px; 1586. margin: 0; 1587. color: #FFFFFF;
1588.} 1589. 1590./* System Standard Messages */ 1591.#system-message dd.message ul { 1592. background: #006699; 1593. border: none; 1594.} 1595. 1596./* System Error Messages */ 1597.#system-message dd.error ul { 1598. background: #BF0000; 1599. border: none; 1600.} 1601. 1602./* System Notice Messages */ 1603.#system-message dd.notice ul { 1604. background: #EE9600; 1605. border: none; 1606.} 1607. 1608./* Clearfix */ 1609..clearfix:after { 1610. clear: both; 1611. display: block; 1612. content: "."; 1613. height: 0; 1614. visibility: hidden; 1615.} 1616. 1617.* html > body .clearfix { 1618. width: 100%; 1619. display: block; 1620.} 1621. 1622.* html .clearfix { 1623. height: 1%; 1624.} 1625. 1626./* Firefox Scrollbar Hack - Do not remove */ 1627.html { 1628. margin-bottom: 1px; 1629. height: 100%!important; 1630. height: auto; 1631.}
1. /* COMMON STYLE 2. --------------------------------------------------------- */ 3. html { 4. direction: rtl; 5. } 6. 7. ul li { 8. padding-right: 30px; 9. background-position: 98% 8px; 10.} 11. 12.ol li { 13. margin-right: 35px; 14. margin-left: -35px; 15. padding: 0; 16.} 17.
18.th { 19. text-align: right; 20.} 21. 22./* JOOMLA STYLE 23.--------------------------------------------------------24.td.sectiontableheader { 25. border-left: 1px solid #fff; 26. border-right: none; 27.} 28. 29.table.contenttoc { 30. float:left; 31. margin: 0 10px 10px 0px; 32.} 33. 34.table.contenttoc td { 35. padding: 1px 25px 1px 5px; 36. background-position: 95% 50%; 37.} 38. 39.table.pollstableborder { 40. text-align: right; 41.} 42. 43..blog_more ul li { 44. padding: 0 17px 0 0; 45. background-position: 98% 8px; 46.} 47. 48.a.readon { 49. float: right; 50. padding: 1px 14px 1px 5px; 51. background: url(../images/rtl/arrow.png) no-repeat 95% 52.} 53. 54.a.readon:hover, a.readon:active, a.readon:focus { 55. background: url(../images/rtl/arrow.png) no-repeat 95% 56.} 57. 58.ul.pagination li span{ 59. padding: 0; 60.} 61. 62..pagenavbar { 63. padding-right: 14px; 64. background-position: center right; 65.} 66. 67..pagenavcounter { 68. padding: 8px 14px 0 14px; 69. background-position: 0 11px; 70.} 71. 72..smalldark { 73. text-align: right; 74.} 75. 76./* META 77.--------------------------------------------------------78..article-tools { 79. float: right; 80.} 81.
*/
48%;
48% #FFFFFF;
*/
82..article-meta { 83. float: right; 84.} 85. 86..createby { 87. padding: 3px 20px 3px 3px; 88. background-position: 100% 5px; 89. float: right; 90.} 91. 92..createdate { 93. padding: 3px 20px 3px 3px; 94. background-position: 100% 5px; 95. float: right; 96.} 97. 98..buttonheading img { 99. margin: 7px 0 0 5px; 100. float: left; 101.} 102. 103./* MAIN LAYOUT DIVS 104.--------------------------------------------------------- */ 105.#ja-containerwrap { 106. background: url(../images/rtl/cw-bg12.gif) repeat-y 50% 0; 107.} 108. 109.#ja-containerwrap-fr { 110. background: url(../images/rtl/cw-bg12.gif) repeat-y 50% 0; 111.} 112. 113.#ja-containerwrap2 { 114. background: url(../images/rtl/cw-bg2.gif) no-repeat 50% 0; 115.} 116. 117.#ja-container { 118. background: url(../images/rtl/c-bg1.gif) repeat-y 82% 0; 119. padding: 0; 120.} 121. 122.#ja-container2 { 123. background: url(../images/rtl/c-bg2.gif) no-repeat 82% top; 124. padding: 20px 0; 125.} 126. 127.#ja-mainbody, #ja-mainbody-fl { 128. float: right; 129.} 130. 131.#ja-mainbody #ja-contentwrap, 132.#ja-mainbody-fr #ja-contentwrap, 133.#ja-mainbody-fl #ja-contentwrap { 134. float: left; 135.} 136. 137.#ja-mainbody-fl #ja-contentwrap #ja-content { 138. padding-left: 20px; 139.} 140. 141.#ja-mainbody-f, #ja-mainbody-fr { 142. float: right; 143.} 144. 145.#ja-content {
146. padding: 0 40px 0 20px; 147.} 148..OPE #ja-content { 149. padding-left: 40px; 150.} 151..OPE #ja-mainbody #ja-content { 152. padding-right: 20px; 153.} 154.#ja-mainbody-fl #ja-content { 155. padding-right: 0; 156.} 157. 158./* Full */ 159.#ja-containerwrap-f { 160. background: url(../images/rtl/cwf-bg.gif) repeat-x top right #F6F6F6; 161.} 162. 163./* Full right */ 164.#ja-containerwrap-fl { 165. background: url(../images/rtl/cwf-bg.gif) repeat-x top right #F6F6F6; 166.} 167. 168.#ja-containerwrap-fr #ja-containerwrap2 { 169. background: url(../images/rtl/cw-bg2.gif) no-repeat 50% 0; 170.} 171. 172./* HEADER 173.--------------------------------------------------------- */ 174..ja-headermask { 175. background-position: top left; 176. left: -1px; 177. right: auto; 178.} 179. 180.h1.logo-text a { 181. right: 5px; 182. left: auto; 183.} 184. 185.p.site-slogan { 186. right: 0; 187. left: auto; 188.} 189. 190./* Search */ 191.#ja-search { 192. background-position: center right; 193. left: 0; 194. right: auto; 195.} 196. 197./* MAIN NAVIGATION 198.--------------------------------------------------------- */ 199. 200./* MODULE 201.--------------------------------------------------------- */ 202.div.module_black, 203.div.module_green, 204.div.module_blue, 205.div.module_red, 206.div.module { 207. float: right; 208.} 209.
210.div.module_black div div div div, 211.div.module_green div div div div, 212.div.module_blue div div div div, 213.div.module_red div div div div, 214.div.module_text div div div div, 215.div.module div div div div { 216. float: none; 217.} 218. 219.div.module_text span { 220. float: right; 221.} 222. 223.div.module_text { 224. float: right; 225.} 226. 227.div.module_blue li, 228.div.module_red li, 229.div.module_black li, 230.div.module_green li { 231. margin-right: 20px; 232. margin-left: auto; 233.} 234. 235.div.advs { 236. float: right; 237.} 238. 239./* PATHWAY 240.--------------------------------------------------------241.#ja-pathway { 242.} 243. 244./* right COLUMN + left COLUMN 245.--------------------------------------------------------246.#ja-col1 { 247. float: right; 248.} 249. 250.#ja-col2 { 251. float: left; 252.} 253. 254.#ja-col1 ul li, 255.#ja-col2 ul li { 256. padding-right: 15px; 257. background-position: 100% 10px; 258.} 259. 260.#ja-col1 ol, #ja-col2 ol, 261.#ja-col1 ul, #ja-col2 ul 262.{ 263. margin-right: 5px; 264.} 265.ul.menu li.active a span { 266. background: none; 267.} 268. 269./* SPOTLIGHT 270.--------------------------------------------------------271./* Spotlight Box Style */ 272..ja-box-full, .ja-box-right, .ja-box-center, .ja-box-left 273. float: right;
*/
*/
*/ {
274.} 275. 276..ja-box-left div.moduletable, 277..ja-box-full div.moduletable { 278. padding-left: 30px; 279.} 280. 281..ja-box-right div.moduletable { 282. padding-left: 30px; 283. padding-right: 30px; 284. background-position: right; 285.} 286. 287..ja-box-center div.moduletable { 288. background-position: right; 289.} 290. 291.#ja-botsl ul li { 292. padding: 0 15px 0 0; 293. background-position: 99% 8px; 294.} 295. 296.#ja-botsl ol li { 297. margin-right: 25px; 298.} 299. 300./* FOOTER 301.--------------------------------------------------------- */ 302.#ja-footer { 303. background-position: 78% 0; 304.} 305. 306.#ja-footer .copyright { 307. padding-right: 25%; 308.} 309. 310.#ja-footnav { 311. padding-right: 25%; 312.} 313. 314.#ja-footnav li{ 315. float: right; 316. direction: ltr; 317.} 318. 319.#ja-footer li a { 320. padding: 0 0 0 15px; 321.} 322. 323..ja-cert { 324. left: 0; 325. right: auto; 326.} 327. 328..ja-cert a { 329. margin: 0 5px 0 0; 330.} 331. 332..banneritem { 333. display: block; 334. margin-top: 15px; 335.} 336. 337./* MISCELLANOUS
338.----------------------------------------------------------- */ 339./*usertool*/ 340.ul.ja-usertools-font { 341. left: 70px; 342. right: auto; 343.} 344. 345./*collapsible h3*/ 346.h3.show { 347. background-position: 10% 60%; 348.} 349. 350.h3.hide { 351. background-position: 10% 60%; 352.} 353. 354..hasTip img { 355. margin: 10px 0 0 5px; 356.} 357. 358./* Tooltips */ 359..tool-tip { 360. float: right; 361.} 362. 363..breadcrumbs { 364.} 365. 366..breadcrumbs a { 367. float: right; 368.} 369. 370..breadcrumbs img { 371. float: right; 372. margin-top: 10px; 373. padding-top: 5px; 374.} 375. 376./* MainNav 377.--------------------------------------------------------- */ 378.#ja-mainnav{ 379. direction: ltr; 380.} 381. 382.#ja-mainnav li a { 383. direction: rtl; 384.} 385. 386.#ja-cssmenu { 387. float: right; 388.} 389. 390.#ja-cssmenu li { 391. float: right; 392.} 393. 394.#ja-cssmenu li ul { 395. right: 0; 396.} 397. 398.#ja-cssmenu li ul ul { 399. margin: -1.5em 14em 0 0; /* third-and-above-level lists */ 400.} 401.
402.#ja-cssmenu li li { 403. padding: 0 0 0 1em; 404.} 405. 406./* STYLING THE MENU 407.-----------------------------------*/ 408./* 1st level */ 409.#ja-cssmenu li ul a { 410. border-left: none; 411.} 412. 413.#ja-cssmenu li.havesubchild, 414.#ja-cssmenu li.havesubchild-active { 415. background-position: 6% 50%; 416.} 417. 418.body.IE6 #ja-cssmenu li ul, 419.body.IE7 #ja-cssmenu li ul, 420.body.OPE #ja-cssmenu li ul { 421. left: auto; 422. top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 423.} 424. 425.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, 426.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, 427.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, 428.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, 429.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, 430.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 { 431. left: auto; 432. left: auto; 433. top: -999em; 434.} 435. 436./* This "unhides" the sub-menus (left: -999em is what hides them) */ 437.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, 438.body.IE6 #ja-cssmenu li li.sfhover ul, body.IE6 #ja-cssmenu li li.havesubchildsfhover ul, body.IE6 #ja-cssmenu li li.havesubchildactivesfhover ul, body.IE6 #ja-cssmenu li li.activesfhover ul, 439.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.havesubchildactivesfhover ul, body.IE6 #ja-cssmenu li li li.activesfhover ul, 440.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, 441.body.IE7 #ja-cssmenu li li.sfhover ul, body.IE7 #ja-cssmenu li li.havesubchildsfhover ul, body.IE7 #ja-cssmenu li li.havesubchildactivesfhover ul, body.IE7 #ja-cssmenu li li.activesfhover ul, 442.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.havesubchildactivesfhover ul, body.IE7 #ja-cssmenu li li li.activesfhover ul, 443.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, 444.body.OPE #ja-cssmenu li li.sfhover ul, body.OPE #ja-cssmenu li li.havesubchildsfhover ul, body.OPE #ja-cssmenu li li.havesubchildactivesfhover ul, body.OPE #ja-cssmenu li li.activesfhover ul, 445.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.havesubchildactivesfhover ul, body.OPE #ja-cssmenu li li li.activesfhover ul { 446. top: auto; 447.} 448. 449./* TYPOGRAPY FIX FOR RTL */ 450.pre, .code { 451. border-right: 5px solid #999999; 452. border-left: none; 453.} 454. 455.blockquote { 456. padding: 1em 40px 1em 15px; 457.} 458. 459.blockquote span.open { 460. float: right; 461. padding: 0 20px 0 0; 462. background-position: right top; 463.} 464. 465.blockquote span.close { 466. padding: 0 0 0 20px; 467. background-position: bottom left; 468.} 469. 470./* Small quote */ 471..small-quote span.open-quote { 472. padding-left: 20px; 473. background-position: center left; 474.} 475. 476..small-quote span.close-quote { 477. padding-right: 20px; 478. background-position: center right; 479.} 480. 481..small-quote span.author { 482. padding: 2px 20px 2px 5px; 483. background-position: 99% 4px; 484.} 485. 486./* Dropcap */ 487..dropcap { 488. float: right; 489. padding: 4px 0 0 8px; 490.} 491. 492./* Note Style */ 493.p.stickynote { 494. padding: 10px 40px 10px 0; 495. background-position: 99% 50%; 496.} 497. 498.p.download {
499. padding: 10px 40px 10px 0; 500. background-position: 99% 50%; 501.} 502. 503..blocknumber { 504. clear: both; 505. padding: 5px 15px 10px; 506. position: relative; 507.} 508. 509./* Check list */ 510.ul.checklist { 511. list-style: none; 512.} 513. 514.ul.checklist li { 515. margin-right: 15px; 516. padding: 0 20px 5px 0px; 517. background-position: right 3px; 518.} 519./* Small checklist */ 520.ul.small-checklist { 521. list-style: none; 522.} 523. 524.ul.small-checklist li { 525. margin-right: 15px; 526. padding: 0 20px 5px 0; 527. background-position: right 3px; 528.} 529. 530./* Check list */ 531.ul.stars { 532. list-style: none; 533.} 534. 535.ul.stars li { 536. margin-right: 15px; 537. padding: 0px 20px 5px 0; 538. background-position: right 3px; 539.} 540. 541..IE7 ul li, 542..IE7 ul.checklist li, 543..IE7 ul.small-checklist li, 544..IE7 ul.stars li 545.{ 546. padding-right: 40px; 547.} 548. 549./* Tips, Error, Message, Hightlight*/ 550.p.error { 551. padding-right: 25px; 552. background-position: top right; 553.} 554. 555.p.message { 556. padding-right: 25px; 557. background-position: top right; 558.} 559. 560.p.tips { 561. padding-right: 25px; 562. background-position: top right;
563.} 564. 565./* Bignumber */ 566..bignumber { 567. float: right; 568. margin-left: 8px; 569. padding: 6px 7px; 570. display: block; 571. background-position: top right; 572.} 573. 574./* Talking box. Thinking box. */ 575.div.bubble1 span.author, 576.div.bubble2 span.author, 577.div.bubble3 span.author, 578.div.bubble4 span.author { 579. padding-right: 15px; 580. margin-right: 15px; 581. background-position: center right; 582. float: right; 583.} 584. 585.div.bubble1 div { 586. background: url(../images/rtl/bub12-br.gif) 587.} 588. 589.div.bubble1 div div { 590. background: url(../images/rtl/bub12-bl.gif) 591.} 592. 593.div.bubble1 div div div { 594. background: url(../images/rtl/bub12-tr.gif) 595.} 596. 597.div.bubble1 div div div div { 598. background: url(../images/rtl/bub12-tl.gif) 599.} 600. 601.div.bubble2 div { 602. background: url(../images/rtl/bub22-br.gif) 603.} 604. 605.div.bubble2 div div { 606. background: url(../images/rtl/bub22-bl.gif) 607.} 608. 609.div.bubble2 div div div { 610. background: url(../images/rtl/bub22-tr.gif) 611.} 612. 613.div.bubble2 div div div div { 614. background: url(../images/rtl/bub22-tl.gif) 615.} 616. 617.div.bubble3 div { 618. background: url(../images/rtl/bub32-br.gif) 619.} 620. 621.div.bubble3 div div { 622. background: url(../images/rtl/bub32-bl.gif) 623.} 624. 625.div.bubble3 div div div { 626. background: url(../images/rtl/bub32-tr.gif)
no-repeat top left;
no-repeat top left;
no-repeat top left;
627.} 628. 629.div.bubble3 div div div div { 630. background: url(../images/rtl/bub32-tl.gif) 631.} 632. 633.div.bubble4 div { 634. background: url(../images/rtl/bub42-br.gif) 635.} 636. 637.div.bubble4 div div { 638. background: url(../images/rtl/bub42-bl.gif) 639.} 640. 641.div.bubble4 div div div { 642. background: url(../images/rtl/bub42-tr.gif) 643.} 644. 645.div.bubble4 div div div div { 646. background: url(../images/rtl/bub42-tl.gif) 647.} 648. 649./* Legend */ 650..legend-title { 651. display: block; 652. float: left; 653. right: 7px; 654. left: auto; 655.}
no-repeat top left;
JaPurity enable hornav submenu

If you installed the sample data during the Joomla install then you can simply modify the Main Menu from the Administration area using the Module Manager. If you don't have the sample data installed just follow the procedure for creating a menu and then set all the settings below.
1. 2. 3. 4. 5.
Select the Main Menu module (or menu of your choice) from the Module Manager screen Click the Edit button Change the Position setting to hornav in the Details section Change the Menu Style setting to List in the Module Parameters section Change the Always show sub-menu items setting to Yes in the Module Parameters section
6. Delete any values in the Menu Class Suffix and Module Class Suffix settings in the Advanced Parameters section
7. Save the changes and you should see the Horizontal Menu on the front end
Replace the JA Purity Joomla! Logo

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, logo.gif (used for PNG transparency problems) and logo.png, are in the following directory:
templates/ja_purity images/ logo.gif logo.png
templates/my_japurity images/
logo.gif logo.png
1. Create an new image, width: 207 pixels , height: 80 pixels using any graphics editor such as Gimp. 2. Save the image as both a PNG and a Gif to the template images directory. Make sure you overwrite the existing logo.gif and logo.png files. 3. Edit, Save, Test till you are satisfied with your new logo. If you change the size of the logo you'll need to change the size of the header area and edit the relevant style sheet, template.css which is in the following directory:
templates/ja_purity css/ template.css
If you've been following the tutorial version then the directory is:
templates/my_japurity css/ template.css
You can edit the CSS file directly in your choice of plain text editors such as VI or Notepad or you can use the CSS Editor provided in the Joomla Administration area. 1. To use the Joomla editor just log into the Administration area of your site 2. Open the Template Manager
3. Click on your version of the JA purity template or 4. Click the Edit button
5. Click the CSS Editor icon in the upper right
6. Click the template.css radio button
7. Click the Edit button to begin editing template.css 8. Near line 956 you will find: h1.logo a { width: 208px; <--- EDIT THIS ---<< display: block; background: url(../images/logo.png) no-repeat; height: 80px; <--- EDIT THIS ---<< position: relative; z-index: 100; } 9. Change the above values to the desired height and width of the logo.
10.Finished Retrieved from "http://docs.joomla.org/Replace_the_JA_Purity_Joomla%21_Logo"
Ja Purity Change position of your logo

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 file, template.css is in the following directory:
7. Click the Edit button to begin editing template.css 8. Near line 957 you will find: h1.logo a { width: 208px; display: block; background: url(../images/logo.png) no-repeat; height: 80px; position: absolute; <---- EDIT THIS top: 10px; <---- ADD THIS left: 10px; <---- ADD THIS z-index: 100; }
9. In the line you added place the logo image in the position you prefer. 10.Next you'll also want to modify the position of the text version of your logo... 11. Near line 957 you will find: h1.logo-text a { color: #CCCCCC !important; text-decoration: none; outline: none; position: absolute; bottom: 40px; <---- EDIT THIS left: 5px; <---- EDIT THIS } p.site-slogan { margin: 0; padding: 0; padding: 2px 5px; color: #FFFFFF; background: #444444; font-size: 92%; position: absolute; bottom: 20px; <---- EDIT THIS left: 0; <---- EDIT THIS } 12.Edit the lines above to place the image in the position your prefer 13.Finished
Use single image for header in ja purity

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:
templates/ja_purity index.php styles/ header/ blue/ style.css green/ style.css
templates/ja_purity index.php styles/ header/ blue/ style.css green/ style.css
1. First modify index.php to eliminate the random image code on line 112 110. 111. <div id="ja-headerwrap"> 112. <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';?>;"> 2. It should look like the following when done 110. 111.<div id="ja-headerwrap"> 112. <div id="ja-header" class="clearfix">
3. Modify style.css to the following (you'll want to do this same edit in both green and blue themes). 6. .ja-headermask { 7. width: 602px; 8. display: block; 9. background: url(images/myheader-image.png) no-repeat top right; 10. height: 80px; 11. position: absolute; 12. top: 0; 13. right: 0; 14.} 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.
Replace the header pictures in JA Purity

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, header1.jpg, header2.jpg and header3.jpg, are in the following directory:
templates/ja_purity images/ header/ header1.jpg header2.jpg header3.jpg
templates/my_japurity images/ header/ header1.jpg header2.jpg header3.jpg
1. Create an new image, width: 600 pixels , height: 80 pixels using any graphics editor such as Gimp. 2. Save the image as a JPG to the template images/header directory. Make sure you overwrite the existing headerX.jpg files. 3. Edit, Save, Test till you are satisfied with your new header. If you decide later to change the size of the header area then you'll want to change the size of your images to match. If you do change the size of the header images you'll need to update one more file, header-mask.png, in each of the color styles. These files are located in the following directory:
templates/ja_purity images/ header-mask.png styles/ header/ blue/ header-mask.png green/ header-mask.png
If you're following the tutorial version the directory starts in:

templates/my_japurity
All you need to do is change the size of the file to match the height of your header image and be 2 pixels wider than your header images. The default mask size is width: 602 pixels, height: 80 pixels. So if you changed your header image to be 400 by 141 then the mask image would be 402 by 141. The mask can be recreated using a simple gradient tool in any graphics editor. Set the color of the gradient to match the color of the header.
Ja Purity resize header

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 file, template.css is in the following directory:
7. Click the Edit button to begin editing template.css 8. Near line 921 you will find: /* HEADER --------------------------------------------------------- */ #ja-headerwrap { background: #333333; color: #CCCCCC; line-height: normal; height: 80px; <---- EDIT THIS } #ja-header { position: relative; height: 80px; <---- EDIT THIS } .ja-headermask { width: 602px;
display: block; background: url(../images/header-mask.png) no-repeat top right; height: 80px; <---- EDIT THIS position: absolute; top: 0; right: -1px; } 9. Change the above values to the desired height of the header. 10.Finished Now that you've changed the size of the header you probably want to update the header pictures and the logo to match the new size. If you prefer to keep the current size of your logo you may want to change it's position.
Add or change JA Purity header colour scheme

(Redirected from Add or change header color scheme) 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, userdecrease.png, user-reset.png and header-mask.png are in the following directories:
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
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
1. To add a color scheme first create a directory styles/header, named for your new color scheme such as white or grey. 2. Copy the contents of one of the other colors scheme directories such as blue to your new directory. 3. Copy the three user-XXXX.png files from templates/ja_purity/images to templates/ja_purity/styles/grey/images for a grey scheme. If you're using the tutorial version the directory is my_japurity. 4. 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): 5. Change all instances of #006699 to #CCCCCC (near lines 2,37,115 )
6. Change all instances of #C3DFED to #444444 (near lines 3,11,15,28,38,50,83,90,107,116) 7. Change all instances of #1E7CAB to #BBBBBB (near lines 19,29) 8. Add the following to the style.css file to color the Spotlight h3 tags #ja-botsl h3 { color: #000000; } 9. 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. 10.Modify the other graphics, vdot2.gif, user-XXXXX.png and icon-search.gif for readability in your new scheme 11. Lastly you'll need to hack the ja_templatetools.php file to change the genToolsMenu method to look like the following 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 } } 12.Go to the Joomla Administration for your site and select the new color for your header in the Template Manager 13.You should get something similar to this when finished...
Remember to refresh. reload, etc. to get the colors to show up. Note: If you enable Horizontal Menus then you'll need to change the color of the Horizontal Menus as well.
Changing the site favicon

1. Create a 16x16 pixel image. You may use graphic software such as Photoshop, Gimp or Windows Paint or an online tool such as http://antifavicon.com/ 2. Convert to ico format using free online sites such as: http://converticon.com/ http://www.favicongenerator.com/ http://www.htmlkit.com/services/favicon/ http://tools.dynamicdrive.com/favicon/ http://www.favicon.cc/ 3. The file you created in this way will have the extension .ico. Copy the file to the /joomla/templates/<your template> directory and name it favicon.ico. 4. Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) wont help. So you need to refresh more thoroughly: Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac); IE: hold Ctrl while clicking Refresh, or press Ctrl-F5; Konqueror: simply click the Reload button, or press F5; Opera users may need to completely clear their cache in ToolsPreferences. If this doesn't work you will need to delete the temporary internet files and the history and then open your page again. Some templates contain code that redirects the browser to another directory or another icon file. To determine where your new favicon should be, examine http://yoursite.com/templates/your_template/index.php and look for code that contains the text <link rel="shortcut icon". There you will find the directory and the name of the icon file. Copy your icon to that place and give it the the name that link is pointing to (you might want to backup the old file). Make sure you set the security correctly such that you webserver has access to that file. Look at the example below.
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/favicon.ico" />
If you don't want to just change the favicon.ico file in its respective template directory you can find the reference to the favicon.ico file in the html.php document. The path is "........\libraries\joomla\document\html\html.php". This should prevent the icon from toggling if you use
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/youricon.ico" />
in the template html and you don't remove the favicon.ico file. (why call the icon twice?) From the html.php // Try to find a favicon by checking the template and root folder $path = $directory . DS; $dirs = array( $path, JPATH_BASE . DS ); foreach ($dirs as $dir ) { $icon = $dir . 'favicon.ico'; if (file_exists( $icon )) { $path = str_replace( JPATH_BASE . DS, , $dir ); $path = str_replace( '\\', '/', $path ); $this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' ); break;
JaPurity how to center hornav

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 ja-sosdmenu.css are in the following directories:
templates/ja_purity index.php css/ ja-sosdmenu.css
templates/my_japurity index.php css/ ja-sosdmenu.css
You can edit the file directly in your choice of plain text editors such as VI or Notepad or you can use the HTML Editor provided in the Joomla Administration area. 1. To use the Joomla editor just log into the Administration area of your site 2. Open the Template Manager
5. Click the HTML Editor icon in the upper right
6. Near line 93 you will find: <style type="text/css"> #ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;} #ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;} </style> 7. Change the class #ja-mainnav to #ja-mainnavwrap in the style section above 8. Save and close the HTML file 9. Click the CSS Editor icon in the upper right
10.Click the ja-sosdmenu.css radio button 11. Click the Edit button to begin editing ja-sosdmenu.css 12.Near line 12 you will find: #ja-mainnav, #ja-mainnav ul { padding: 0; margin: 0; line-height: 20px; } 13.Add the following before line 12 #ja-mainnavwrap { max-width: 960px; <--- EDIT THIS margin: 0; } 14.Change the above line to suit max width 15.You will probably also want to add the same line to the ja-sosdmenu-rtl.css file as well 16.Finished Retrieved from "http://docs.joomla.org/JaPurity_how_to_center_hornav"
Modify horizontal menu color in ja purity

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 style.css and arrow2.png are in the following directories depending on the header scheme you're using for the template:
templates/ja_purity images/ arrow2.png styles/ header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) style.css
templates/my_japurity images/ arrow2.png styles/ header/XXXXXX ( XXXXXX is replaced with a color such as green or
blue ) style.css
1. 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 blue style.css): 2. Change all instances of #1374A5 to #999999 (near lines 57,70,75,82) 3. Change all instances of #4394BD to #BBBBBB (near lines 56,76,95,97) 4. Change all instances of #005A87 to #555555 (near lines 77,98) 5. Change all instances of #2A84B1 to #AAAAAA (near lines 89,103) 6. Modify the style for #ja-mainnavwrap to the following: #ja-mainnavwrap { border-top: 1px solid #BBBBBB; border-right: 1px solid #CCCCCC; <--- Add This border-left: 1px solid #BBBBBB; <--- Add This border-bottom: 1px solid #555555; background: #999999; } 7. Modify the style for #ja-mainnav > ul to the following: #ja-mainnav > ul { background-color: #999999; border-left: 1px solid #BBBBBB; <--- Add This padding-left: 20px; } 8. Add the following style: #ja-mainnav ul.menu li > a { border-left: 1px solid #BBBBBB; } 9. Add the following styles: /* Handles initial top-level active items */ #ja-mainnav ul.menu li.active a { background: #CCCCCC url(images/arrow2.png) no-repeat bottom center; border-left: 1px solid #BBBBBB; color: #FFFFFF; } #ja-mainnav ul.menu li.active a span{ color: #FFFFFF; } #ja-mainnav ul.menu li.active a:hover, #ja-mainnav ul.menu li.active a:active, #ja-mainnav ul.menu li.active a:focus { background: #DDDDDD url(images/arrow2.png) no-repeat bottom center; color: #FFFFFF; } /* Handles top-level hover/active/focus items */ #ja-mainnav ul.menu li a:hover, #ja-mainnav ul.menu li a:active, #ja-mainnav ul.menu li a:focus{ background: #DDDDDD url(images/arrow2.png) no-repeat bottom center; } #ja-mainnav ul.menu li a:hover span, #ja-mainnav ul.menu li a:active span, #ja-mainnav ul.menu li a:focus span{ background: #DDDDDD; color: #FFFFFF; } #ja-mainnav ul.menu li:hover, #ja-mainnav ul.menu li.sfhover, #ja-mainnav ul.menu li.parentsfhover, #ja-mainnav ul.menu li.parent-activesfhover { background: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
} #ja-mainnav ul.menu li.parent ul > li, #ja-mainnav ul.menu li.parent ul li > a, #ja-mainnav ul.menu li.parent ul li a > span { background: transparent; } #ja-mainnav ul.menu li.parent > a { border-left: 1px solid #BBBBBB; } #ja-mainnav ul.menu li.parent ul > li:hover, #ja-mainnav ul.menu li.parent ul > li.sfhover, #ja-mainnav ul.menu li.parent ul > li.parentsfhover, #ja-mainnav ul.menu li.parent ul > li.parent-activesfhover { background: #DDDDDD url(images/arrow2.png) no-repeat bottom center; color: #FFFFFF; } 10.Copy the arrow2.png file from main template images directory to your color scheme's images directory for example styles/XXXX/images where XXXX is blue or green or your own custom color scheme. 11. Modify that file to suit your scheme 12.Finish Here's the result...
Modify horizontal menu background in ja purity

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 style.css and arrow2.png are in the following directories depending on the header scheme you're using for the template:
templates/ja_purity images/ arrow2.png styles/
header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) style.css
templates/my_japurity images/ arrow2.png styles/ header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) style.css
Before trying this tutorial you might want to follow the previous tutorial about changing the color of the menus. 1. Create a new gradient image with a color scheme to match your desired scheme. The image only needs to be 1 pixel wide by 40 pixels tall. Save this image in the styles/header/XXXXXX/images directory (XXXXXX is replaced with a color such as green or blue). 2. Copy the arrow2.png file to the styles/header/XXXXX/images directory. Modify the arrow2.png to suit your scheme. 3. 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, style.css, directly in your choice of plain text editors such as VI or Notepad. 4. Modify the style.css to the following: /*--------------------------- VISUAL ----------------------------*/ /* -------- All levels -------- */ #ja-mainnavwrap { border-top: 1px solid #CCCC99 !important; border-right: 1px solid #BFB050 !important; border-bottom: 1px solid #BFB050 !important; border-left: 1px solid #FFFF93 !important; background: transparent url(images/menubg_m.png) repeat-x !important; background-color: inherit; } #ja-mainnav ul, #ja-mainnav ul li { background: transparent url(images/menubg_m.png) repeat-x !important; list-style: none; } #ja-mainnav span.separator { display:none; } #ja-mainnav span{ color: #000000; } #ja-mainnav > ul { padding-left: 20px; } /* Handles initial top-level active items */ #ja-mainnav ul.menu li.active a { background: transparent url(images/arrow2.png) no-repeat bottom center !important; color: #FFFFFF; } #ja-mainnav ul.menu li.active a span{ color: #FFFFFF; } /* Handles top-level hover/active/focus items */ #ja-mainnav ul.menu li a:hover, #ja-mainnav ul.menu li a:active, #ja-mainnav ul.menu li a:focus{ background: transparent url(images/arrow2.png) no-repeat bottom center; } #ja-mainnav ul.menu li a:hover span, #ja-mainnav ul.menu li a:active span, #ja-mainnav ul.menu li a:focus span{ background: transparent; color: #FFFFFF;
} #ja-mainnav ul.menu li:hover, #ja-mainnav ul.menu li.sfhover, #ja-mainnav ul.menu li.parentsfhover, #ja-mainnav ul.menu li.parent-activesfhover { background: transparent url(images/arrow2.png) no-repeat bottom center; } #ja-mainnav ul.menu li.parent ul > li, #ja-mainnav ul.menu li.parent ul li > a, #ja-mainnav ul.menu li.parent ul li a > span { background: transparent; } #ja-mainnav ul.menu li.parent ul > li:hover, #ja-mainnav ul.menu li.parent ul > li.sfhover, #ja-mainnav ul.menu li.parent ul > li.parentsfhover, #ja-mainnav ul.menu li.parent ul > li.parent-activesfhover { background: transparent url(images/arrow2.png) no-repeat bottom center; } 5. Finish Here's the result...
Enable rtl horizontal menu in ja purity

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: 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.
templates/ja_purity index.php templateDetails.xml css/ ja-sosdmenu-rtl.css
If you've been following the tutorial you can download a tutorial version of the template that installs to the following directory: Note: The tutorial version of the template should include the ja-sosdmenu-rtl.css file but doesn't install it.
templates/ja_purity index.php templateDetails.xml css/ ja-sosdmenu-rtl.css
1. Modify index.php starting at line XXX 47. 48.<?php if ($this->countModules('hornav')): ?> 49. <?php if ($tmpTools->getParam('horNavType') == 'css'): ?> 50. <?php if($this->direction == 'rtl') : ?> 51.<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ? >/css/ja-sosdmenu-rtl.css" type="text/css" /> 52. <?php else: ?> 53.<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ? >/css/ja-sosdmenu.css" type="text/css" /> 54. <?php endif; ?> 55.<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script> 56. <?php else: ?> 57. <?php if($this->direction == 'rtl') : ?> 58.<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ? >/css/ja-sosdmenu-rtl.css" type="text/css" /> 59. <?php else: ?> 60.<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ? >/css/ja-sosdmenu.css" type="text/css" /> 61. <?php endif; ?> 62.<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script> 63. <?php endif; ?> 64.<?php endif; ?> 2. Change the ja-sosdmenu-rtl.css file to look like the following: 1. /* Son of Suckerfish Dropdowns 2. --------------------------------------------------------3. Originally developed by Patrick Griffiths and Dan Webb 4. http://www.htmldog.com/articles/suckerfish/dropdowns/ 5. --------------------------------------------------------6. NOTE: After a deep research, we decide to divide this 7. CSS into 2 parts. The first part will define the layout. 8. The second part will define the visual look for this menu. 9. ---------------------------------------------------------*/ 10. 11.#ja-mainnav { 12. margin: 0; /* all lists */ 13. padding: 0; 14. float: none; 15. text-align: right; 16. border-left: 1px solid #555555; 17.} 18. 19.#ja-mainnav ul { 20. text-align: right; 21. margin: 0; /* all lists */ 22. padding: 0; 23.} 24. 25.#ja-mainnav li ul { 26. float: right; 27.}
28.#ja-mainnav li { 29. margin: 0; /* all list items */ 30. padding: 0; 31. float: right; 32. display: block; 33. background: none; 34. cursor: pointer; 35. position: relative; 36.} 37. 38.#ja-mainnav li ul { 39. width: 16.4em; 40. position: absolute; /* second-level lists */ 41. z-index: 99; 42. top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 43. height: auto; 44. w\idth: 15.9em; 45. right: 0; 46.} 47. 48.#ja-mainnav li ul ul { 49. margin: -1.5em 0 0 14em; /* third-and-above-level lists */ 50.} 51. 52.#ja-mainnav li li { 53. padding: 0 1em 0 0; 54. margin: 0; 55. width: 14.9em; 56.} 57. 58.#ja-mainnav ul a { 59. width: 14.8em; 60. w\idth: 10.8em; 61.} 62. 63.#ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul, 64.#ja-mainnav li.sfhover ul ul, #ja-mainnav li.havechildsfhover ul ul, #jamainnav li.havechild-activesfhover ul ul, #ja-mainnav li.activesfhover ul ul, 65.#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 { 66. top: -999em; 67.} 68. 69./* This "unhides" the sub-menus (left: -999em is what hides them) */ 70.#ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul, 71.#ja-mainnav li.sfhover ul, #ja-mainnav li.havechildsfhover ul, #ja-mainnav li.havechild-activesfhover ul, #ja-mainnav li.activesfhover ul, 72.#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, 73.#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 { 74. top: auto; 75.} 76. 77./* STYLING THE MENU 78.-----------------------------------*/ 79./* 1st level */ 80.#ja-mainnav li a {
81. margin: 0; 82. padding: 10px 20px; 83. border-right: 1px solid #555555; 84. border-left: 1px solid #333333; 85. display: block; 86. color: #CCCCCC; 87. font-weight: bold; 88. line-height: normal; 89. text-decoration: none; 90.} 91. 92.#ja-mainnav li a:hover, 93.#ja-mainnav li a:active, 94.#ja-mainnav li a:focus { 95. background: url(../../images/arrow2.png) no-repeat bottom center #555555; 96. color: #FFFFFF; 97.} 98. 99.#ja-mainnav li { 100. margin: 0; 101.} 102. 103.#ja-mainnav li:hover, 104.#ja-mainnav li.sfhover, 105.#ja-mainnav li.havechildsfhover, 106.#ja-mainnav li.havechild-activesfhover { 107. background: url(../../images/arrow2.png) no-repeat bottom center #555555; 108. color: #FFFFFF; 109.} 110. 111.#ja-mainnav li a.active, 112.#ja-mainnav li a.active:hover, 113.#ja-mainnav li a.active:active, 114.#ja-mainnav li a.active:focus { 115. background: url(../../images/arrow2.png) no-repeat bottom center #333333; 116. color: #FFFFFF; 117.} 118. 119./* 2nd level and above */ 120.#ja-mainnav li ul { 121. border: 1px solid #555555; 122. background: url(../../images/opaque.png); 123.} 124. 125.#ja-mainnav li ul li { 126. border-top: 1px solid #777777; 127. border-bottom: 1px solid #444444; 128. background: none; 129.} 130. 131.#ja-mainnav li ul a { 132. border-left: none; 133. margin: 0; 134. padding: 7px 10px; 135. background: none; 136. color: #CCCCCC; 137. font-weight: normal; 138. line-height: normal; 139. text-transform: none; 140.} 141.
142.#ja-mainnav li.havesubchild, 143.#ja-mainnav li.havesubchild-active { 144. background: url(../../images/bullet2.gif) no-repeat 94% 50%; 145.} 146. 147.#ja-mainnav li ul a:hover, 148.#ja-mainnav li ul a:active, 149.#ja-mainnav li ul a:focus, 150.#ja-mainnav ul li:hover, 151.#ja-mainnav ul li.sfhover, 152.#ja-mainnav ul li.havesubchildsfhover, 153.#ja-mainnav ul li.havesubchild-activesfhover, 154.#ja-mainnav ul ul li:hover, 155.#ja-mainnav ul ul li.sfhover, 156.#ja-mainnav ul ul li.havesubchildsfhover, 157.#ja-mainnav ul ul li.havesubchild-activesfhover { 158. background: #333333; 159. color: #CCCCCC; 160.} 161. 162.#ja-mainnav ul li a.active, 163.#ja-mainnav ul li a.active:hover, 164.#ja-mainnav ul li a.active:active, 165.#ja-mainnav ul li a.active:focus { 166. background: none !important; 167. color: #FFFFFF; 168. font-weight: bold; 169.} Here's the result...
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
http://forum.joomla.org/viewforum.php?f=541

Custom Is Ing The JA Purity Template

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Custom Is Ing The JA Purity Template

Загружено:

Авторское право:

Доступные форматы

Tutorial:Customising the JA Purity template

Before You Start

Customise Module Position and Content

Customise the Logo

Customise the Header

Customise the Favicon

Customise Horizontal Navigation Menus

Known Issues and Bugs

Ja purity template body

HTML and PHP Files

Ja purity template header

HTML and PHP Files

1005. background: #444444; 1006. font-size: 92%; 1007.}

Ja purity template header logo

logo.png js/ iepngfix.htc ja.script.js styles/header blue/ style.css green/ style.css

HTML and PHP Files

Ja purity template header search

HTML and PHP Files

Ja purity template header search user4

Ja purity template horizontal navigation

Ja purity template spotlight top

Image Files Javascript Files ja_purity/js/XXXXX.js

Ja purity template left

HTML and PHP Files

Ja purity template right

HTML and PHP Files

Ja purity template content

Image Files Javascript Files: ja_purity/js/XXXXX.js

Ja purity template content breadcrumb

Ja purity template content banner

Ja purity template spotlight

HTML and PHP Files

Ja purity template spotlight user1

Ja purity template spotlight user2

Ja purity template spotlight top

Ja purity template spotlight user5

Ja purity template footer user3

Ja purity template footer syndication

Ja purity template footer

HTML and PHP Files

grad3.gif Javascript: Files ja_purity/js/XXXXX.js

Ja purity css template css

no-repeat bottom left;

no-repeat top right;

no-repeat top left;

no-repeat bottom right;

no-repeat bottom left;

no-repeat top right;

no-repeat top left;

no-repeat bottom right;

no-repeat bottom left;

no-repeat top right;

no-repeat top left;

no-repeat bottom right #BF0000;

no-repeat bottom left;

no-repeat top right;

no-repeat top left;

no-repeat bottom right #006699;

no-repeat bottom left;

no-repeat top right;

no-repeat top left;

no-repeat bottom right #7BA566;