J1.5:Customising the JA Purity template/customisations/Replacing the header pictures

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, template.css, header1.jpg, header2.jpg and header3.jpg, 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>/
        css/
            template.css
        images/
            header/
                header1.jpg
                header2.jpg
                header3.jpg

1. Create an new image, width: 600 pixels , height: 80 pixels using any graphics editor such as Gimp.
2. Save the image as a JPG to the template images/header directory. Make sure you overwrite the existing headerX.jpg files.
3. Edit, Save, Test till you are satisfied with your new header.

If you decide later to change the size of the header area then you'll want to change the size of your images to match.

If you do change the size of the header images you'll need to update one more file, header-mask.png, in each of the color styles. These files are located in the following directory:

   <location of template>/
        images/
            header-mask.png
        styles/
            header/
                blue/
                    header-mask.png
                green/
                    header-mask.png

All you need to do is change the size of the file to match the height of your header image and be 2 pixels wider than your header images. The default mask size is width: 602 pixels, height: 80 pixels. So if you changed your header image to be 400 by 141 then the mask image would be 402 by 141. The mask can be recreated using a simple gradient tool in any graphics editor. Set the color of the gradient to match the color of the header.

Replace Entire Header Background Area with One Image

1. Copy/rename the file templates/ja_purity/images/header-mask.png
2. Save the desired image as templates/ja_purity/images/header-mask.png

Add the following line to the #ja-headerwrap section in templates/ja_purity/css/template.css

<source lang="css">

1. ja-headerwrap {

...

   background: url(../images/header-mask.png);

... }