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 H3 color for Spolight area to tutorial)
m (Applied tutorial template and removed categories)
(9 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|ja_templatetools.php, style.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png and header-mask.png|<pre>
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 />
+
     <location of template>/
<pre>
+
        ja_templatetools.php
     templates/ja_purity
+
        images/
                ja_templatetools.php
+
            user-increase.png
                images/
+
            user-decrease.png
    user-increase.png
+
            user-reset.png
    user-decrease.png
+
        styles/
    user-reset.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 )
+
            images/
                                styles.css
+
                vdot2.gif
                                images/
+
                opaque.png
                                    vdot2.gif
+
                icon-search.gif
                                    opaque.png
+
                header-mask.png
                                    icon-search.gif
+
</pre>}}
                                    header-mask.png
+
</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
+
                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
+
</pre>
+
  
 
#To add a color scheme first create a directory styles/header, named for your new color scheme such as white or grey.
 
#To add a color scheme first create a directory styles/header, named for your new color scheme such as white or grey.
 
#Copy the contents of one of the other colors scheme directories such as blue to your new directory.
 
#Copy the contents of one of the other colors scheme directories such as blue to your new directory.
#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.  
+
#Copy the three user-XXXX.png files from templates/ja_purity/images to templates/ja_purity/styles/header/grey/images for a grey scheme. If you're using the tutorial version the directory is my_japurity.  
#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:
+
#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 copied blue style.css):
#Change all instances of #006699 to #CCCCCC (near lines 2,32,36,115 )
+
#Change all instances of #006699 to #CCCCCC (near lines 2,37,115 )
 
#Change all instances of #C3DFED to #444444 (near lines 3,11,15,28,38,50,83,90,107,116)
 
#Change all instances of #C3DFED to #444444 (near lines 3,11,15,28,38,50,83,90,107,116)
 
#Change all instances of #1E7CAB to #BBBBBB (near lines 19,29)
 
#Change all instances of #1E7CAB to #BBBBBB (near lines 19,29)
#Add the following to the styles.css file to color the Spotlight h3 tags
+
#Add the following to the style.css file to color the Spotlight h3 tags
 
#:<pre>
 
#:<pre>
 
#: #ja-botsl h3 {
 
#: #ja-botsl h3 {
Line 70: Line 50:
 
#:}
 
#:}
 
#:</pre>
 
#:</pre>
#Finished
+
#Go to the Joomla Administration for your site and select the new color for your header in the Template Manager
 +
#You should get something similar to this when finished...
 +
[[Image:JA Purity Tutorial Header Grey.png|640px]]
  
 
Remember to refresh. reload, etc. to get the colors to show up.
 
Remember to refresh. reload, etc. to get the colors to show up.
  
<noinclude>
+
Note: If you enable Horizontal Menus then you'll need to [[Customising the JA Purity template/customisations/Modifying the horizontal menu colour|change the color of the Horizontal Menus]] as well.
[[Category:Beginners]]
+
[[Category:JA Purity template]]
+
[[Category:Tutorials]]
+
</noinclude>
+

Revision as of 16:27, 15 January 2011

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 JoomlArt.com as a zip but the latest files have been installed along with Joomla. The relevant files, ja_templatetools.php, style.css, vdot2.gif, opaque.png, icon-search.gif, user-increase.png, user-decrease.png, user-reset.png and header-mask.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>/
        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 ) 
                style.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/header/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 (using the copied blue style.css):
  5. Change all instances of #006699 to #CCCCCC (near lines 2,37,115 )
  6. Change all instances of #C3DFED to #444444 (near lines 3,11,15,28,38,50,83,90,107,116)
  7. Change all instances of #1E7CAB to #BBBBBB (near lines 19,29)
  8. Add the following to the style.css file to color the Spotlight h3 tags
    #ja-botsl h3 {
    color: #000000;
    }
  9. 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.
  10. Modify the other graphics, vdot2.gif, user-XXXXX.png and icon-search.gif for readability in your new scheme
  11. 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
    }
    }
  12. Go to the Joomla Administration for your site and select the new color for your header in the Template Manager
  13. You should get something similar to this when finished...

JA Purity Tutorial Header Grey.png

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

Note: If you enable Horizontal Menus then you'll need to change the color of the Horizontal Menus as well.