J1.5

Difference between revisions of "Customising the JA Purity template/customisations/Modifying the horizontal menu colour"

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
m (Added Categories)
m (clean up - archiving)
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
+
{{:Customising the JA Purity template/tutorialtemplate|style.css and arrow2.png|<pre>
The relevant files styles.css and arrow2.png are in the following directories depending on the header scheme you're using for the template:<br />
+
     <location of template>/
<pre>
+
        images/
     templates/ja_purity
+
            arrow2.png
                images/
+
        styles/
                    arrow2.png
+
            header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )  
                styles/
+
                style.css
                    header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )
+
</pre>}}
                                styles.css
 
</pre>
 
 
 
If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
 
<pre>
 
    templates/my_japurity
 
                images/
 
                    arrow2.png
 
                styles/
 
                    header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )  
 
                                styles.css
 
</pre>
 
  
 
#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 directly in your choice of plain text editors such as VI or Notepad. Edit the style.css file to match your new color scheme.  For instance the following changes will make a readable set of colors for a grey scheme (using the blue style.css):
 
#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 directly in your choice of plain text editors such as VI or Notepad. Edit the style.css file to match your new color scheme.  For instance the following changes will make a readable set of colors for a grey scheme (using the blue style.css):
Line 104: Line 92:
 
#Finish
 
#Finish
  
Here's the result...<br />
+
Here's the result...
 +
 
 
[[Image:JA Purity Tutorial Horizontal Menu Grey.png|640px]]
 
[[Image:JA Purity Tutorial Horizontal Menu Grey.png|640px]]
 
+
[[Category:Archived JA Purity]]
<noinclude>
 
[[Category:Beginners]]
 
[[Category:JA Purity template]]
 
[[Category:Tutorials]]
 
</noinclude>
 

Revision as of 14:36, 26 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, 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
  1. 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 directly in your choice of plain text editors such as VI or Notepad. Edit the style.css file to match your new color scheme. For instance the following changes will make a readable set of colors for a grey scheme (using the blue style.css):
  2. Change all instances of #1374A5 to #999999 (near lines 57,70,75,82)
  3. Change all instances of #4394BD to #BBBBBB (near lines 56,76,95,97)
  4. Change all instances of #005A87 to #555555 (near lines 77,98)
  5. Change all instances of #2A84B1 to #AAAAAA (near lines 89,103)
  6. Modify the style for #ja-mainnavwrap to the following:
    #ja-mainnavwrap {
    border-top: 1px solid #BBBBBB;
    border-right: 1px solid #CCCCCC; <--- Add This
    border-left: 1px solid #BBBBBB; <--- Add This
    border-bottom: 1px solid #555555;
    background: #999999;
    }
  7. Modify the style for #ja-mainnav > ul to the following:
    #ja-mainnav > ul {
    background-color: #999999;
    border-left: 1px solid #BBBBBB; <--- Add This
    padding-left: 20px;
    }
  8. Add the following style:
    #ja-mainnav ul.menu li > a {
    border-left: 1px solid #BBBBBB;
    }
  9. Add the following styles:
    /* Handles initial top-level active items */
    #ja-mainnav ul.menu li.active a {
    background: #CCCCCC url(images/arrow2.png) no-repeat bottom center;
    border-left: 1px solid #BBBBBB;
    color: #FFFFFF;
    }
    #ja-mainnav ul.menu li.active a span{
    color: #FFFFFF;
    }
    #ja-mainnav ul.menu li.active a:hover,
    #ja-mainnav ul.menu li.active a:active,
    #ja-mainnav ul.menu li.active a:focus {
    background: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
    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: #DDDDDD 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: #DDDDDD;
    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: #DDDDDD 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 > a {
    border-left: 1px solid #BBBBBB;
    }
    #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: #DDDDDD url(images/arrow2.png) no-repeat bottom center;
    color: #FFFFFF;
    }
  10. Copy the arrow2.png file from main template images directory to your color scheme's images directory for example styles/XXXX/images where XXXX is blue or green or your own custom color scheme.
  11. Modify that file to suit your scheme
  12. Finish

Here's the result...

JA Purity Tutorial Horizontal Menu Grey.png