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
m |
m |
||
Line 48: | Line 48: | ||
} | } | ||
</source> | </source> | ||
− | #<li value=4>Create an image | + | #<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> | <noinclude> |
Revision as of 14:05, 28 December 2009
The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.
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
- First modify index.php to eliminate the random image code on line 112
<!-- BEGIN: HEADER --> <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';?>;">
- It should look like the following when done
<!-- BEGIN: HEADER --> <div id="ja-headerwrap"> <div id="ja-header" class="clearfix">
- Modify style.css to the following (you'll want to do this same edit in both green and blue themes).
.ja-headermask { width: 602px; display: block; background: url(images/myheader-image.png) no-repeat top right; height: 80px; position: absolute; top: 0; right: 0; }
- 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.