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
m (archiving articles with category removal and addition) |
|||
(2 intermediate revisions by 2 users not shown) | |||
Line 214: | Line 214: | ||
[[Image:JA Purity Tutorial Right2LeftMenu.png|640px]] | [[Image:JA Purity Tutorial Right2LeftMenu.png|640px]] | ||
+ | |||
+ | [[Category:Archived version Joomla! 1.5|{{PAGENAME}}]] |
Latest revision as of 09:25, 29 April 2013
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...