Actions

J1.5

Difference between revisions of "Customising the JA Purity template/customisations/Adding or changing a header colour scheme"

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
m (Added the hack for ja_templateTools.php and the user-xxxx files)
m (Start Edit Session)
Line 1: Line 1:
 +
{{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 files, ja_templatetools.php, styles.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png and header-mask.png are in the following directories:<br />
 
The relevant files, ja_templatetools.php, styles.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png and header-mask.png are in the following directories:<br />

Revision as of 06: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, ja_templatetools.php, styles.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png and header-mask.png are in the following directories:

    templates/ja_purity
                 ja_templatetools.php
                 images/
                     user-increase.png
                     user-decrease.png
                     user-reset.png
                 styles/
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) 
                                styles.css
                                images/
                                    vdot2.gif
                                    opaque.png
                                    icon-search.gif
                                    header-mask.png

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
                 ja_templatetools.php
                 images/
                     user-increase.png
                     user-decrease.png
                     user-reset.png    
                 styles/
                     header/XXXXXX ( XXXXXX is replaced with a color such as green or blue ) 
                                styles.css
                                images/
                                    vdot2.gif
                                    opaque.png
                                    icon-search.gif
                                    header-mask.png
  1. To add a color scheme first create a directory styles/header, named for your new color scheme such as white or grey.
  2. Copy the contents of one of the other colors scheme directories such as blue to your new directory.
  3. Copy the three user-XXXX.png files from templates/ja_purity/images to templates/ja_purity/styles/grey/images for a grey scheme. If you're using the tutorial version the directory is my_japurity.
  4. 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:
  5. Change all instances of #006699 to #CCCCCC
  6. Change all instances of #C3DFED to #444444
  7. Change all instances of #1E7CAB to #BBBBBB
  8. Modify the header-mask.png to match your color scheme in your favorite graphic editor. You'll want to use a gradient tool from transparent to foreground color.
  9. Modify the other graphics, vdot2.gif, user-XXXXX.png and icon-search.gif for readability in your new scheme
  10. Lastly you'll need to hack the ja_templatetools.php file to change the genToolsMenu method to look like the following
    function genToolMenu($_array_tools=null, $imgext = 'gif'){
    $themedir = $this->templateurl();
    if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
    if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
    if ($this->getParam('theme_header') && $this->getParam('theme_header')!='-1') $themedir = $this->templateurl()."/styles/header/".$this->getParam('theme_header');
    if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
     ?>
    <ul class="ja-usertools-font">
    <li><img style="cursor: pointer;" title="<?php echo JText::_('INCREASE FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('INCREASE FONT SIZE');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
    <li><img style="cursor: pointer;" title="<?php echo JText::_('DEFAULT FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('DEFAULT FONT SIZE');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
    <li><img style="cursor: pointer;" title="<?php echo JText::_('DECREASE FONT SIZE');?>" src="<?php echo $themedir;?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('DECREASE FONT SIZE');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
    </ul>
    <script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
    <?php
    }
    }
  11. Finished

Remember to refresh. reload, etc. to get the colors to show up.