J1.5:Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu

From Joomla! Documentation
Jump to: navigation, search
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.

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, templateDetails.xml and ja-sosdmenu-rtl.css, can be found in templates/ja_purity. If you've been following the tutorial, you can download a tutorial version of the template that installs to the templates/my_japurity folder. Inside the folder of the template, the files are located as follows: 

    <location of template
        index.php
        templateDetails.xml
        css/
            ja-sosdmenu-rtl.css

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.

2 modifications need to be made to index.php

  1. should be at top of your template index.php after the doc type 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

second modification to index.php

  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; ?>
  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, #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. }

Here's the result...

JA Purity Tutorial Right2LeftMenu.png

Retrieved from "http://docs.joomla.org/index.php?title=J1.5:Customising_the_JA_Purity_template/customisations/Enabling_RTL_in_the_horizontal_menu&oldid=85948"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox