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: | ||
| − | |||
| − | |||
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 | + | # 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> | ||
| − | # | + | #<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). |
| − | + | ::<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
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 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.