Actions

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 (Started edit session)
m
Line 2: Line 2:
 
{{inuse}}
 
{{inuse}}
 
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
 
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 file styles.css is in one of the following directories depending on the header scheme you're using for the template:<br />
+
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 />
 
<pre>
 
<pre>
 
     templates/ja_purity
 
     templates/ja_purity
 +
                images/
 +
                    arrow2.png
 
                 styles/
 
                 styles/
 
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )  
 
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )  
Line 13: Line 15:
 
<pre>
 
<pre>
 
     templates/my_japurity
 
     templates/my_japurity
 +
                images/
 +
                    arrow2.png
 
                 styles/
 
                 styles/
 
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )  
 
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue )  
 
                                 styles.css
 
                                 styles.css
 
</pre>
 
</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):
 +
#Change all instances of #1374A5 to #999999 (near lines 57,70,75,82)
 +
#Change all instances of #4394BD to #BBBBBB (near lines 56,76,95,97)
 +
#Change all instances of #005A87 to #555555 (near lines 77,98)
 +
#Change all instances of #2A84B1 to #AAAAAA (near lines 89,103)
 +
#Modify the style for #ja-mainnavwrap to the following:
 +
#:<pre>
 +
#: #ja-mainnavwrap {
 +
#: border-top: 1px solid #BBBBBB;
 +
#: border-right: 1px solid #CCCCCC;
 +
#: border-left: 1px solid #BBBBBB;
 +
#: border-bottom: 1px solid #555555;
 +
#: background: #999999;
 +
#:}
 +
#:</pre>

Revision as of 11:50, 12 June 2009

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.


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 styles.css and arrow2.png are in the following directories depending on the header scheme you're using for the template:

    templates/ja_purity
                 images/
                     arrow2.png
                 styles/
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) 
                                styles.css

If you've been following the tutorial you can download a tutorial version of the template that installs to the following directory:

    templates/my_japurity
                 images/
                     arrow2.png
                 styles/
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) 
                                styles.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;
    border-left: 1px solid #BBBBBB;
    border-bottom: 1px solid #555555;
    background: #999999;
    }