J1.5:Customising the JA Purity template/customisations/Replacing the Joomla! Logo

From Joomla! Documentation
Jump to: navigation, search
Line 1: Line 1:
 
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.  
 
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:====
  
 
# Find the ''logo'' files in your ja_purity folder, it is in the '''''images''''' main directory.
 
# Find the ''logo'' files in your ja_purity folder, it is in the '''''images''''' main directory.
Line 5: Line 8:
 
# Create your image files in the same size, rename them ''logo.png'' and/or ''logo.gif'' in 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'''''.
 
# Load your image logo files into the folder '''''ja_purity/images'''''.
 +
 +
 +
 +
====Your logo has different size:====
 +
: 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:
 +
#: <pre>
 +
#: /* 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;
 +
#: }</pre> </blockquote>
 +
# 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
 +
#: <pre>
 +
#: 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;
 +
#: }</pre> </blockquote>
 +
# 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:
 +
#: <pre>background: url(../images/logo.png) no-repeat center center;</pre>
 +
# 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
 +
  
  

Revision as of 11:10, 22 September 2008

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.

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:

  1. Find the logo files in your ja_purity folder, it is in the images main directory.
  2. Download logo.png and/or logo.gif to see their size, namely 207 x 80 pixels.
  3. Create your image files in the same size, rename them logo.png and/or logo.gif in 207 x 80 pixels.
  4. Load your image logo files into the folder ja_purity/images.


Your logo has different size:

CHANGE LOGO
  1. get an image of your logo eg: imagelogo.bmp
  2. use your graphic editor and save it as logo.gif and logo.png
  3. now you have two files!
  4. copy these two files and paste it in templates\ja_purity\images overwrite the previous files
  5. finished
RESIZE THE HEADER
  1. open with a text editor the file templates\ja_purity\css\template.css
  2. 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;

     } 

    

  3.  change these values with your logo height or more.

  4.  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;

     } 

    

  5.  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;
    

    

  6.  now using your graphic editor you have to resize the heighy of the following files (same height of your header):

    1.  templates\ja_purity\imagesheader-mask.png

    2.  templates\ja_purity\styles\header\blue\images\header-mask.png

    3.  templates\ja_purity\styles\header\green\images\header-mask.png

    

  7.  finished







				
								
				

				Retrieved from "http://docs.joomla.org/index.php?title=J1.5:Customising_the_JA_Purity_template/customisations/Replacing_the_Joomla!_Logo&oldid=10814"				

				
												
								
												

				
								
			

			
		

		
		
		

			



	
Personal tools

	




			

				



	
Namespaces

	








	

		

	
Variants

	

		
    
					

	





			

			

				








	
Actions

	

		
    
					

	










			

		

		
		
			

				
					
				
				



	
Navigation

	

		
	

















	
Joomla! Sites

	

		
	









	
Toolbox