J1.5

Difference between revisions of "Customising the JA Purity template/customisations/Resizing the header"

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | customisations
Line 24: Line 24:
 
#: top: 0;
 
#: top: 0;
 
#: right: -1px;
 
#: right: -1px;
#: }</pre> </blockquote>
+
#: }</pre>
 
# change these values with the desidered height.
 
# change these values with the desidered height.
 
# always in the file templates\ja_purity\css\template.css about at line 957 you will find
 
# always in the file templates\ja_purity\css\template.css about at line 957 you will find
Line 35: Line 35:
 
#: position: relative;
 
#: position: relative;
 
#: z-index: 100;
 
#: z-index: 100;
#: }</pre> </blockquote>
+
#: }</pre>
 
# now using your graphic editor you have to resize the heighy of the following files (same height of your header):
 
# 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\imagesheader-mask.png''

Revision as of 08:42, 25 September 2008

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.

  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 the desidered height.
  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;
    height: 80px; <---- EDIT THIS (same of your logo)
    position: relative;
    z-index: 100;
    }
  5. 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
  6. If the height of your logo is different of the height of your header you probanly need to look here Change postion of your logo
  7. finished