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
(Started edit session on new tutorial topic)
 
(Completed tutorial)
Line 1: Line 1:
{{stub}}
 
{{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, index.php, style.css are in the following directories:<br />
 
The relevant files, index.php, style.css are in the following directories:<br />
Line 26: Line 24:
 
</pre>
 
</pre>
  
# First modify index.php to eliminate the random image code on line 113
+
# 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">
<!-- BEGIN: HEADER -->
+
<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
+
<div id="ja-headerwrap">
 
<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';?>;">
 
<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';?>;">
 
</source>
 
</source>
#: It should look like the following when done
+
#<li value=2>It should look like the following when done
<source lang="php">
+
::<source lang="php" line start="110">
 
<!-- BEGIN: HEADER -->
 
<!-- BEGIN: HEADER -->
 
<div id="ja-headerwrap">
 
<div id="ja-headerwrap">
 
<div id="ja-header" class="clearfix">
 
<div id="ja-header" class="clearfix">
 
</source>
 
</source>
#  
+
#<li value=3>Modify style.css to the following (you'll want to do this same edit in both green and blue themes).
# Modify style.css
+
::<source lang="css" line start="6">
 +
.ja-headermask {
 +
width: 602px;
 +
display: block;
 +
background: url(images/myheader-image.png) no-repeat top right;
 +
height: 80px;
 +
position: absolute;
 +
top: 0;
 +
right: 0;
 +
}
 +
</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.
  
 
<noinclude>
 
<noinclude>

Revision as of 00:08, 27 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.

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, style.css are in the following directories:

    templates/ja_purity
                 index.php
                 styles/
                     header/
                         blue/
                             style.css
                         green/
                             style.css

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

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