Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu
From Joomla! Documentation
< J1.5:Customising the JA Purity template | customisations(Redirected from 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, 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
- 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
- Modify index.php starting at line XXX
47 <!-- Added right to left check -->
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; ?>
- 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...