Actions

J1.5

Difference between revisions of "Customising the JA Purity template/customisations/Using a single image for header and logo"

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
(Completed tutorial)
m (archiving articles with category removal and addition)
 
(8 intermediate revisions by 4 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|index.php and style.css|<pre>
The relevant files, index.php, style.css are in the following directories:<br />
+
     <location of template>/
<pre>
+
        index.php
     templates/ja_purity
+
        styles/
                index.php
+
            header/
                styles/
+
                blue/
                    header/
+
                    style.css
                        blue/
+
                green/
                            style.css
+
                    style.css
                        green/
+
</pre>}}
                            style.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/ja_purity
+
                index.php
+
                styles/
+
                    header/
+
                        blue/
+
                            style.css
+
                        green/
+
                            style.css
+
</pre>
+
  
 +
This edit only takes effect when the template parameters are set to either have the "Header Theme" as Green or Blue. It does not take effect if the "Header Theme" is set to either --User Default or --None Selected.
 
# First modify index.php to eliminate the random image code on line 112
 
# First modify index.php to eliminate the random image code on line 112
 
::<source lang="php" line start="110">
 
::<source lang="php" line start="110">
Line 48: Line 35:
 
}
 
}
 
</source>
 
</source>
#<li value=4>Create an image 602 x 80 in your favorite graphics application and save it in the styles/header/xxxxx/images directory. You'll either want to fade the image to transparent at the edges or ensure it matches the background color for your header.
+
#<li value=4>Create an image 602px x 80px in your favorite graphics application and save it as myheader-image.png, in the styles/header/xxxxx/images directory. You'll either want to fade the image to transparent at the edges or ensure it matches the background color for your header.
  
<noinclude>
+
[[Category:Archived version Joomla! 1.5|{{PAGENAME}}]]
[[Category:Beginners]]
+
[[Category:JA Purity template]]
+
[[Category:Tutorials]]
+
</noinclude>
+

Latest revision as of 09:26, 29 April 2013

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, index.php and style.css, 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>/
        index.php
        styles/
            header/
                blue/
                    style.css
                green/
                    style.css

This edit only takes effect when the template parameters are set to either have the "Header Theme" as Green or Blue. It does not take effect if the "Header Theme" is set to either --User Default or --None Selected.

  1. First modify index.php to eliminate the random image code on line 112
  1.  <!-- BEGIN: HEADER -->
    
  2.  <div id="ja-headerwrap">
    
  3.         <div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">
    
  1. It should look like the following when done
  1. <!-- BEGIN: HEADER -->
    
  2. <div id="ja-headerwrap">
    
  3.         <div id="ja-header" class="clearfix">
    
  1. Modify style.css to the following (you'll want to do this same edit in both green and blue themes).
  1. .ja-headermask {
    
  2.         width: 602px;
    
  3.         display: block;
    
  4.         background: url(images/myheader-image.png) no-repeat top right;
    
  5.         height: 80px;
    
  6.         position: absolute;
    
  7.         top: 0;
    
  8.         right: 0;
    
  9. }
    
  1. Create an image 602px x 80px in your favorite graphics application and save it as myheader-image.png, in the styles/header/xxxxx/images directory. You'll either want to fade the image to transparent at the edges or ensure it matches the background color for your header.