Customising the JA Purity template/customisations/Modifying the horizontal menu background

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
Revision as of 13:36, 26 April 2013 by JoomlaWikiBot (Talk | contribs)

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

The original JA Purity template was provided from as a zip but the latest files have been installed along with Joomla. The relevant files, style.css and arrow2.png, 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>/
            header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) 

Before trying this tutorial you might want to follow the previous tutorial about changing the color of the menus.

  1. Create a new gradient image with a color scheme to match your desired scheme. The image only needs to be 1 pixel wide by 40 pixels tall. Save this image in the styles/header/XXXXXX/images directory (XXXXXX is replaced with a color such as green or blue).
  2. Copy the arrow2.png file to the styles/header/XXXXX/images directory. Modify the arrow2.png to suit your scheme.
  3. Normally you'd be able to edit the CSS in the Joomla Administration area but that isn't an option in this case. So you'll need to edit the file, style.css, directly in your choice of plain text editors such as VI or Notepad.
  4. Modify the style.css to the following:
    /*--------------------------- VISUAL ----------------------------*/
    /* -------- All levels -------- */
    #ja-mainnavwrap {
    border-top: 1px solid #CCCC99 !important;
    border-right: 1px solid #BFB050 !important;
    border-bottom: 1px solid #BFB050 !important;
    border-left: 1px solid #FFFF93 !important;
    background: transparent url(images/menubg_m.png) repeat-x !important;
    background-color: inherit;
    #ja-mainnav ul, #ja-mainnav ul li {
    background: transparent url(images/menubg_m.png) repeat-x !important;
    list-style: none;
    #ja-mainnav span.separator {
    #ja-mainnav span{
    color: #000000;
    #ja-mainnav > ul {
    padding-left: 20px;
    /* Handles initial top-level active items */
    #ja-mainnav a {
    background: transparent url(images/arrow2.png) no-repeat bottom center !important;
    color: #FFFFFF;
    #ja-mainnav a span{
    color: #FFFFFF;
    /* Handles top-level hover/active/focus items */
    #ja-mainnav li a:hover,
    #ja-mainnav li a:active,
    #ja-mainnav li a:focus{
    background: transparent url(images/arrow2.png) no-repeat bottom center;
    #ja-mainnav li a:hover span,
    #ja-mainnav li a:active span,
    #ja-mainnav li a:focus span{
    background: transparent;
    color: #FFFFFF;
    #ja-mainnav li:hover,
    #ja-mainnav li.sfhover,
    #ja-mainnav li.parentsfhover,
    #ja-mainnav li.parent-activesfhover {
    background: transparent url(images/arrow2.png) no-repeat bottom center;
    #ja-mainnav li.parent ul > li,
    #ja-mainnav li.parent ul li > a,
    #ja-mainnav li.parent ul li a > span {
    background: transparent;
    #ja-mainnav li.parent ul > li:hover,
    #ja-mainnav li.parent ul > li.sfhover,
    #ja-mainnav li.parent ul > li.parentsfhover,
    #ja-mainnav li.parent ul > li.parent-activesfhover {
    background: transparent url(images/arrow2.png) no-repeat bottom center;
  5. Finish

Here's the result...

JA Purity Tutorial Horizontal Menu Gradient.png