J1.5

Customising the JA Purity template/customisations/Replacing the Joomla! Logo: Difference between revisions

From Joomla! Documentation

< J1.5:Customising the JA Purity template | customisations
← Older editNewer edit →
Sybil (talk | contribs)
16 edits
No edit summary
Bino87 (talk | contribs)
31 edits
No edit summary
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 16:10, 22 September 2008

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. 

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

  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. 

  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. 

  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. 

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

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

  7. finished

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