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

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

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...

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