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
-
<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
-
<!-- Added right to left check -->
-
<?php if ($this->countModules('hornav')): ?>
-
<?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
-
<?php if($this->direction == 'rtl') : ?>
-
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
-
<?php else: ?>
-
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
-
<?php endif; ?>
-
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
-
<?php else: ?>
-
<?php if($this->direction == 'rtl') : ?>
-
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
-
<?php else: ?>
-
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
-
<?php endif; ?>
-
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
-
<?php endif; ?>
-
<?php endif; ?>
- Change the ja-sosdmenu-rtl.css file to look like the following:
-
-
/* Son of Suckerfish Dropdowns -
--------------------------------------------------------- -
Originally developed by Patrick Griffiths and Dan Webb -
http://www.htmldog.com/articles/suckerfish/dropdowns/ -
--------------------------------------------------------- -
NOTE: After a deep research, we decide to divide this -
CSS into 2 parts. The first part will define the layout. -
The second part will define the visual look for this menu. -
---------------------------------------------------------*/ -
-
#ja-mainnav {
-
margin: 0; /* all lists */
-
padding: 0;
-
float: none;
-
text-align: right;
-
border-left: 1px solid #555555;
-
} -
-
#ja-mainnav ul {
-
text-align: right;
-
margin: 0; /* all lists */
-
padding: 0;
-
} -
-
#ja-mainnav li ul {
-
float: right;
-
} -
#ja-mainnav li {
-
margin: 0; /* all list items */
-
padding: 0;
-
float: right;
-
display: block;
-
background: none;
-
cursor: pointer;
-
position: relative;
-
} -
-
#ja-mainnav li ul {
-
width: 16.4em;
-
position: absolute; /* second-level lists */
-
z-index: 99;
-
top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
-
height: auto;
-
w\idth: 15.9em;
-
right: 0;
-
} -
-
#ja-mainnav li ul ul {
-
margin: -1.5em 0 0 14em; /* third-and-above-level lists */
-
} -
-
#ja-mainnav li li {
-
padding: 0 1em 0 0;
-
margin: 0;
-
width: 14.9em;
-
} -
-
#ja-mainnav ul a {
-
width: 14.8em;
-
w\idth: 10.8em;
-
} -
-
#ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul,
-
#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,
-
#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 {
-
top: -999em;
-
} -
-
/* This "unhides" the sub-menus (left: -999em is what hides them) */ -
#ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul,
-
#ja-mainnav li.sfhover ul, #ja-mainnav li.havechildsfhover ul, #ja-mainnav li.havechild-activesfhover ul, #ja-mainnav li.activesfhover ul,
-
#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,
-
#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 {
-
top: auto;
-
} -
-
/* STYLING THE MENU -
-----------------------------------*/ -
/* 1st level */ -
#ja-mainnav li a {
-
margin: 0;
-
padding: 10px 20px;
-
border-right: 1px solid #555555;
-
border-left: 1px solid #333333;
-
display: block;
-
color: #CCCCCC;
-
font-weight: bold;
-
line-height: normal;
-
text-decoration: none;
-
} -
-
#ja-mainnav li a:hover,
-
#ja-mainnav li a:active,
-
#ja-mainnav li a:focus {
-
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
-
color: #FFFFFF;
-
} -
-
#ja-mainnav li {
-
margin: 0;
-
} -
-
#ja-mainnav li:hover,
-
#ja-mainnav li.sfhover,
-
#ja-mainnav li.havechildsfhover,
-
#ja-mainnav li.havechild-activesfhover {
-
background: url(../../images/arrow2.png) no-repeat bottom center #555555;
-
color: #FFFFFF;
-
} -
-
#ja-mainnav li a.active,
-
#ja-mainnav li a.active:hover,
-
#ja-mainnav li a.active:active,
-
#ja-mainnav li a.active:focus {
-
background: url(../../images/arrow2.png) no-repeat bottom center #333333;
-
color: #FFFFFF;
-
} -
-
/* 2nd level and above */ -
#ja-mainnav li ul {
-
border: 1px solid #555555;
-
background: url(../../images/opaque.png);
-
} -
-
#ja-mainnav li ul li {
-
border-top: 1px solid #777777;
-
border-bottom: 1px solid #444444;
-
background: none;
-
} -
-
#ja-mainnav li ul a {
-
border-left: none;
-
margin: 0;
-
padding: 7px 10px;
-
background: none;
-
color: #CCCCCC;
-
font-weight: normal;
-
line-height: normal;
-
text-transform: none;
-
} -
-
#ja-mainnav li.havesubchild,
-
#ja-mainnav li.havesubchild-active {
-
background: url(../../images/bullet2.gif) no-repeat 94% 50%;
-
} -
-
#ja-mainnav li ul a:hover,
-
#ja-mainnav li ul a:active,
-
#ja-mainnav li ul a:focus,
-
#ja-mainnav ul li:hover,
-
#ja-mainnav ul li.sfhover,
-
#ja-mainnav ul li.havesubchildsfhover,
-
#ja-mainnav ul li.havesubchild-activesfhover,
-
#ja-mainnav ul ul li:hover,
-
#ja-mainnav ul ul li.sfhover,
-
#ja-mainnav ul ul li.havesubchildsfhover,
-
#ja-mainnav ul ul li.havesubchild-activesfhover {
-
background: #333333;
-
color: #CCCCCC;
-
} -
-
#ja-mainnav ul li a.active,
-
#ja-mainnav ul li a.active:hover,
-
#ja-mainnav ul li a.active:active,
-
#ja-mainnav ul li a.active:focus {
-
background: none !important;
-
color: #FFFFFF;
-
font-weight: bold;
-
}
-
Here's the result...
