J1.5:Customising the JA Purity template/customisations/Modifying the horizontal menu background

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, 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>/
        images/
            arrow2.png
        styles/
            header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) 
                style.css

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 {

   display:none;

   }

   #ja-mainnav span{

   color: #000000;

   }

   #ja-mainnav > ul {

   padding-left: 20px;

   }

   /* Handles initial top-level active items */

   #ja-mainnav ul.menu li.active a {

   background: transparent url(images/arrow2.png) no-repeat bottom center !important;

   color: #FFFFFF;

   }

   #ja-mainnav ul.menu li.active a span{

   color: #FFFFFF;

   }

   /* Handles top-level hover/active/focus items */

   #ja-mainnav ul.menu li a:hover,

   #ja-mainnav ul.menu li a:active,

   #ja-mainnav ul.menu li a:focus{

   background: transparent url(images/arrow2.png) no-repeat bottom center;

   }

   #ja-mainnav ul.menu li a:hover span,

   #ja-mainnav ul.menu li a:active span,

   #ja-mainnav ul.menu li a:focus span{

   background: transparent;

   color: #FFFFFF;

   }

   #ja-mainnav ul.menu li:hover,

   #ja-mainnav ul.menu li.sfhover,

   #ja-mainnav ul.menu li.parentsfhover,

   #ja-mainnav ul.menu li.parent-activesfhover {

   background: transparent url(images/arrow2.png) no-repeat bottom center;

   }

   #ja-mainnav ul.menu li.parent ul > li,

   #ja-mainnav ul.menu li.parent ul li > a,

   #ja-mainnav ul.menu li.parent ul li a > span {

   background: transparent;

   }

   #ja-mainnav ul.menu li.parent ul > li:hover,

   #ja-mainnav ul.menu li.parent ul > li.sfhover,

   #ja-mainnav ul.menu li.parent ul > li.parentsfhover,

   #ja-mainnav ul.menu li.parent ul > li.parent-activesfhover {

   background: transparent url(images/arrow2.png) no-repeat bottom center;

   }

5. Finish

Here's the result...