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 13:36, 26 April 2013 by JoomlaWikiBot (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.

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

Here's the result...

JA Purity Tutorial Right2LeftMenu.png