Customising the JA Purity template/customisations/Replacing the Joomla! Logo
From Joomla! Documentation
< J1.5:Customising the JA Purity template | customisations
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.
JA Purity comes as a *.zip - file. To see what is in it, download it to your computer and unzip it. All files are to be found in the ja_purity directory.
Your logo is 207 x 80 pixels or less:[edit]
- Find the logo files in your ja_purity folder, it is in the images main directory.
- Download logo.png and/or logo.gif to see their size, namely 207 x 80 pixels.
- Create your image files in the same size, rename them logo.png and/or logo.gif in 207 x 80 pixels.
- Load your image logo files into the folder ja_purity/images.
Your logo has different size:[edit]
- CHANGE LOGO
- get an image of your logo eg: imagelogo.bmp
- use your graphic editor and save it as logo.gif and logo.png
- now you have two files!
- copy these two files and paste it in templates\ja_purity\images overwrite the previous files
- finished
- RESIZE THE HEADER
- open with a text editor the file templates\ja_purity\css\template.css
- about at line 921 you will find:
- /* HEADER
- --------------------------------------------------------- */
- #ja-headerwrap {
- background: #333333;
- color: #CCCCCC;
- line-height: normal;
- height: 80px; <---- EDIT THIS
- }
- #ja-header {
- position: relative;
- height: 80px; <---- EDIT THIS
- }
- .ja-headermask {
- width: 602px;
- display: block;
- background: url(../images/header-mask.png) no-repeat top right;
- height: 80px; <---- EDIT THIS
- position: absolute;
- top: 0;
- right: -1px;
- }
- change these values with your logo height or more.
- always in the file templates\ja_purity\css\template.css about at line 957 you will find
- h1.logo a {
- width: 208px; <---- EDIT THIS (same of your logo)
- display: block;
- background: url(../images/logo.png) no-repeat;<---- EDIT THIS (view next step)
- height: 80px; <---- EDIT THIS (same of the header height)
- position: relative;
- z-index: 100;
- }
- now if you have chose the height of your header bigger than the height of your logo you have to add this properties to center vertically your logo:
background: url(../images/logo.png) no-repeat center center;
- now using your graphic editor you have to resize the heighy of the following files (same height of your header):
- templates\ja_purity\imagesheader-mask.png
- templates\ja_purity\styles\header\blue\images\header-mask.png
- templates\ja_purity\styles\header\green\images\header-mask.png
- finished