Actions

J1.5

Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
Revision as of 00:30, 27 June 2009 by Jwwicks (Talk | contribs)

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


Quill icon.png
Page Actively Being Edited!

This j1.5 page is actively undergoing a major edit for a short while.
As a courtesy, please do not edit this page while this message is displayed. The user who added this notice will be listed in the page history. This message is intended to help reduce edit conflicts; please remove it between editing sessions to allow others to edit the page. If this page has not been edited for several hours, please remove this template, or replace it with {{underconstruction}} or {{incomplete}}.

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
  1. <!-- Added right to left check -->
    
  2. <?php if ($this->countModules('hornav')): ?>
    
  3.  <?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
    
  4.   <?php  if($this->direction == 'rtl') : ?>
    
  5. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
    
  6.   <?php else: ?>
    
  7. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
    
  8.   <?php endif; ?>
    
  9. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
    
  10.  <?php else: ?>
    
  11.   <?php  if($this->direction == 'rtl') : ?>
    
  12. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
    
  13.   <?php else: ?>
    
  14. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
    
  15.   <?php endif; ?>
    
  16. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
    
  17.  <?php endif; ?>
    
  18. <?php endif; ?>
    
  1. 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, #ja-mainnav 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. }