J1.5

Difference between revisions of "Customising the JA Purity template/customisations/Enabling RTL in the horizontal menu"

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
(Started edit session)
 
(Completed tutorial)
Line 22: Line 22:
 
</pre>
 
</pre>
  
 +
#Modify index.php starting at line XXX
 +
:<source lang="php" line start="47">
 +
<!-- 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; ?>
 +
</source>
 +
#<li value=2>Change the ja-sosdmenu-rtl.css file to look like the following:
 +
:<source lang="css" line>
 +
/* 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;
 +
}
 +
</source>
  
 
<noinclude>
 
<noinclude>

Revision as of 00:30, 27 June 2009

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.

Quill icon.png
 This article is a stub and needs to be expanded. If you can provide information or finish this article you're welcome to do so. Please remove this message afterwards or replace with {{inuse}} while making major edits. - Thank you.


Quill icon.png
Page Actively Being Edited!

This j1.5 page is actively undergoing a major edit for a short while.
As a courtesy, please do not edit this page while this message is displayed. The user who added this notice will be listed in the page history. This message is intended to help reduce edit conflicts; please remove it between editing sessions to allow others to edit the page. If this page has not been edited for several hours, please remove this template, or replace it with {{underconstruction}} or {{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, index.php, templateDetails.xml and ja-sosdmenu-rtl.css are in the following directories:
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. 

    templates/ja_purity
                 index.php
                 templateDetails.xml
                 css/
                     ja-sosdmenu-rtl.css

If you've been following the tutorial you can download a tutorial version of the template that installs to the following directory:
Note: The tutorial version of the template should include the ja-sosdmenu-rtl.css file but doesn't install it. 

    templates/ja_purity
                 index.php
                 templateDetails.xml
                 css/
                     ja-sosdmenu-rtl.css
  1. 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; ?>
  2. 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;
}
Retrieved from "https://docs.joomla.org/index.php?title=J1.5:Customising_the_JA_Purity_template/customisations/Enabling_RTL_in_the_horizontal_menu&oldid=14777"