J1.5:Customising the JA Purity template/header/logo

From Joomla! Documentation
< J1.5:Customising the JA Purity template | header(Difference between revisions)
Jump to: navigation, search
m (Starting edit session)
m (Applied tutorial template and removed categories)
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{stub}}
 
{{stub}}
−
{{inuse}}
+
{{:Customising the JA Purity template/tutorialtemplate|index.php, template.css, template_rtl.css, logo.png, logo.gif, ja.script.js, iepngfix.htc and style.css (green and blue versions)|<pre>
−
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
+
     <location of template>/
−
The relevant files, XXXXX and XXXX, are in the following directories:<br />
+
        index.php
−
<pre>
+
        css/
−
     templates/ja_purity
+
            template.css
−
                XXXXX.php
+
            template_rtl.css
−
                css/
+
        images/
−
                    XXXXX.css
+
            logo.gif
−
</pre>
+
            logo.png
 +
        js/
 +
            iepngfix.htc
 +
            ja.script.js
 +
        styles/header
 +
            blue/
 +
                style.css
 +
            green/
 +
                style.css
 +
</pre>}}
  
−
If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
 
−
<pre>
 
−
    templates/my_japurity
 
−
                XXXXX
 
−
                css/
 
−
                    XXXXXX
 
−
</pre>
 
 
==HTML and PHP Files==
 
==HTML and PHP Files==
−
===ja_purity/XXXXX.php===
+
===ja_purity/index.php===
−
<source lang="php" line start="">
+
<source lang="php" line start="116">
 +
<?php
 +
$siteName = $tmpTools->sitename();
 +
if ($tmpTools->getParam('logoType')=='image'): ?>
 +
<h1 class="logo">
 +
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
 +
</h1>
 +
<?php else:
 +
$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
 +
$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
 +
<h1 class="logo-text">
 +
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
 +
</h1>
 +
<p class="site-slogan"><?php echo $sloganText;?></p>
 +
<?php endif; ?>
 
</source>
 
</source>
 
==CSS Files==
 
==CSS Files==
−
===ja_purity/css/XXXXX.css===
+
===ja_purity/css/template.css===
−
<source lang="css" line start="">
+
<source lang="css" line start="949">
 +
h1.logo, h1.logo-text {
 +
margin: 0 0 0 5px;
 +
padding: 0;
 +
font-size: 180%;
 +
text-transform: uppercase;
 +
}
 +
 
 +
h1.logo a {
 +
width: 208px;
 +
display: block;
 +
background: url(../images/logo.png) no-repeat;
 +
height: 80px;
 +
position: relative;
 +
z-index: 100;
 +
}
 +
 
 +
h1.logo a span {
 +
position: absolute;
 +
top: -1000px;
 +
}
 +
 
 +
h1.logo-text a {
 +
color: #CCCCCC !important;
 +
text-decoration: none;
 +
outline: none;
 +
position: absolute;
 +
bottom: 40px;
 +
left: 5px;
 +
}
 +
 
 +
p.site-slogan {
 +
margin: 0;
 +
padding: 0;
 +
padding: 2px 5px;
 +
color: #FFFFFF;
 +
background: #444444;
 +
font-size: 92%;
 +
position: absolute;
 +
bottom: 20px;
 +
left: 0;
 +
}
 +
</source>
 +
===ja_purity/css/template_rtl.css===
 +
<source lang="css" line start="180">
 +
h1.logo-text a {
 +
right: 5px;
 +
left: auto;
 +
}
 +
 
 +
p.site-slogan {
 +
right: 0;
 +
left: auto;
 +
}
 +
</source>
 +
===ja_purity/styles/header/blue/style.css===
 +
<source lang="css" line start="14">
 +
h1.logo-text a {
 +
color: #C3DFED !important;
 +
}
 +
 
 +
p.site-slogan {
 +
background: #1E7CAB;
 +
}
 +
</source>
 +
===ja_purity/styles/header/green/style.css===
 +
<source lang="css" line start="14">
 +
h1.logo-text a {
 +
color: #E4EFDF !important;
 +
}
 +
 
 +
p.site-slogan {
 +
background: #9DBF8C;
 +
}
 
</source>
 
</source>
 
==Image Files==
 
==Image Files==
 +
===ja_purity/images/logo.gif===
 +
[[Image:JA Purity Tutorial logo.gif]]
 +
===ja_purity/images/logo.png===
 +
[[Image:JA Purity Tutorial logo.png]]
 
==Javascript Files==
 
==Javascript Files==
−
===ja_purity/js/XXXXX.js===
+
===ja_purity/js/ja.script.js===
−
<source lang="javascript" line start="">
+
<source lang="javascript" line start="4">
 +
function fixIEPNG(el, bgimgdf, sizingMethod, type, offset){
 +
var objs = el;
 +
if(!objs) return;
 +
if ($type(objs) != 'array') objs = [objs];
 +
if(!sizingMethod) sizingMethod = 'crop';
 +
if(!offset) offset = 0;
 +
var blankimg = siteurl + 'images/blank.png';
 +
objs.each(function(obj) {
 +
var bgimg = bgimgdf;
 +
if (obj.tagName == 'IMG') {
 +
//This is an image
 +
if (!bgimg) bgimg = obj.src;
 +
if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return;
 +
 
 +
obj.setStyle('height',obj.offsetHeight);
 +
obj.setStyle('width',obj.offsetWidth);
 +
obj.src = blankimg;
 +
obj.setStyle ('visibility', 'visible');
 +
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
 +
}else{
 +
//Background
 +
if (!bgimg) bgimg = obj.getStyle('backgroundImage');
 +
var pattern = new RegExp('url\s*[\(\"\']*([^\'\"\)]*)[\'\"\)]*');
 +
if ((m = pattern.exec(bgimg))) bgimg = m[1];
 +
if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return;
 +
if (!type)
 +
{
 +
obj.setStyle('background', 'none');
 +
//if(!obj.getStyle('position'))
 +
if(obj.getStyle('position')!='absolute' && obj.getStyle('position')!='relative') {
 +
obj.setStyle('position', 'relative');
 +
}
 +
 
 +
//Get all child
 +
var childnodes = obj.childNodes;
 +
for(var j=0;j<childnodes.length;j++){
 +
if((child = $(childnodes[j]))) {
 +
if(child.getStyle('position')!='absolute' && child.getStyle('position')!='relative') {
 +
child.setStyle('position', 'relative');
 +
}
 +
child.setStyle('z-index',2);
 +
}
 +
}
 +
//Create background layer:
 +
var bgdiv = new Element('IMG');
 +
bgdiv.src = blankimg;
 +
bgdiv.width = obj.offsetWidth - offset;
 +
bgdiv.height = obj.offsetHeight - offset;
 +
bgdiv.setStyles({
 +
'position': 'absolute',
 +
'top': 0,
 +
'left': 0
 +
});
 +
 
 +
bgdiv.className = 'TransBG';
 +
 
 +
bgdiv.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
 +
bgdiv.inject(obj, 'top');
 +
//alert(obj.innerHTML + '\n' + bgdiv.innerHTML);
 +
} else {
 +
obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
 +
}
 +
}
 +
}.bind(this));
 +
 
 +
}
 +
</source>
 +
===ja_purity/js/iepngfix.htc===
 +
<source lang="javascript" line >
 +
<public:component>
 +
<public:attach event="onpropertychange" onevent="doFix()" />
 +
 
 +
<script type="text/javascript">
 +
 
 +
// IE5.5+ PNG Alpha Fix v1.0RC4
 +
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
 +
 
 +
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
 +
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
 +
 
 +
 
 +
// This must be a path to a blank image. That's all the configuration you need.
 +
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.png';
 +
 
 +
 
 +
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
 +
 
 +
function filt(s, m)
 +
{
 +
if (filters[f])
 +
{
 +
  filters[f].enabled = s ? true : false;
 +
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 +
}
 +
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
 +
}
 +
 
 +
function doFix()
 +
{
 +
// Assume IE7 is OK.
 +
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
 +
  (event && !/(background|src)/.test(event.propertyName))) return;
 +
 
 +
var bgImg = currentStyle.backgroundImage || style.backgroundImage;
 +
 
 +
if (tagName == 'IMG')
 +
{
 +
  if ((/\.png$/i).test(src))
 +
  {
 +
  if (currentStyle.width == 'auto' && currentStyle.height == 'auto') {
 +
    style.width = offsetWidth + 'px';
 +
    style.height = offsetHeight + 'px';
 +
  }
 +
  filt(src, 'scale');
 +
  src = blankImg;
 +
  }
 +
  else if (src.indexOf(blankImg) < 0) filt();
 +
}
 +
else if (bgImg && bgImg != 'none')
 +
{
 +
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
 +
  {
 +
  var s = RegExp.$1;
 +
  if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
 +
    style.width = offsetWidth + 'px';
 +
  style.backgroundImage = 'none';
 +
  filt(s, 'scale');
 +
  // IE link fix.
 +
  for (var n = 0; n < childNodes.length; n++)
 +
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
 +
  }
 +
  else filt();
 +
}
 +
}
 +
 
 +
doFix();
 +
 
 +
</script>
 +
</public:component>
 
</source>
 
</source>
−
<noinclude>
 
−
[[Category:Beginners]]
 
−
[[Category:JA Purity template]]
 
−
[[Category:Tutorials]]
 
−
</noinclude>
 

Revision as of 15:05, 15 January 2011

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.
Quill icon.png
 This article is a stub and needs to be expanded. If you can provide information or finish this article you're welcome to do so. Please remove this message afterwards or replace with {{inuse}} while making major edits. - Thank you.


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, index.php, template.css, template_rtl.css, logo.png, logo.gif, ja.script.js, iepngfix.htc and style.css (green and blue versions), 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>/
        index.php
        css/
            template.css
            template_rtl.css
        images/
            logo.gif
            logo.png
        js/
            iepngfix.htc
            ja.script.js
        styles/header
            blue/
                style.css
            green/
                style.css

Contents

HTML and PHP Files

ja_purity/index.php

  1.         <?php
  2.                 $siteName = $tmpTools->sitename();
  3.                 if ($tmpTools->getParam('logoType')=='image'): ?>
  4.                 <h1 class="logo">
  5.                         <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
  6.                 </h1>
  7.         <?php else:
  8.                 $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
  9.                 $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');      ?>
  10.                 <h1 class="logo-text">
  11.                         <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
  12.                 </h1>
  13.                 <p class="site-slogan"><?php echo $sloganText;?></p>
  14.         <?php endif; ?>

CSS Files

ja_purity/css/template.css

  1. h1.logo, h1.logo-text {
  2.         margin: 0 0 0 5px;
  3.         padding: 0;
  4.         font-size: 180%;
  5.         text-transform: uppercase;
  6. }
  7.  
  8. h1.logo a {
  9.         width: 208px;
  10.         display: block;
  11.         background: url(../images/logo.png) no-repeat;
  12.         height: 80px;
  13.         position: relative;
  14.         z-index: 100;
  15. }
  16.  
  17. h1.logo a span {
  18.         position: absolute;
  19.         top: -1000px;
  20. }
  21.  
  22. h1.logo-text a {
  23.         color: #CCCCCC !important;
  24.         text-decoration: none;
  25.         outline: none;
  26.         position: absolute;
  27.         bottom: 40px;
  28.         left: 5px;
  29. }
  30.  
  31. p.site-slogan {
  32.         margin: 0;
  33.         padding: 0;
  34.         padding: 2px 5px;
  35.         color: #FFFFFF;
  36.         background: #444444;
  37.         font-size: 92%;
  38.         position: absolute;
  39.         bottom: 20px;
  40.         left: 0;
  41. }

ja_purity/css/template_rtl.css

  1. h1.logo-text a {
  2.         right: 5px;
  3.         left: auto;
  4. }
  5.  
  6. p.site-slogan {
  7.         right: 0;
  8.         left: auto;
  9. }

ja_purity/styles/header/blue/style.css

  1. h1.logo-text a {
  2.         color: #C3DFED !important;
  3. }
  4.  
  5. p.site-slogan {
  6.         background: #1E7CAB;
  7. }

ja_purity/styles/header/green/style.css

  1. h1.logo-text a {
  2.         color: #E4EFDF !important;
  3. }
  4.  
  5. p.site-slogan {
  6.         background: #9DBF8C;
  7. }

Image Files

ja_purity/images/logo.gif

JA Purity Tutorial logo.gif

ja_purity/images/logo.png

JA Purity Tutorial logo.png

Javascript Files

ja_purity/js/ja.script.js

  1. function fixIEPNG(el, bgimgdf, sizingMethod, type, offset){
  2.         var objs = el;
  3.         if(!objs) return;
  4.         if ($type(objs) != 'array') objs = [objs];
  5.         if(!sizingMethod) sizingMethod = 'crop';
  6.         if(!offset) offset = 0;
  7.         var blankimg = siteurl + 'images/blank.png';
  8.         objs.each(function(obj) {
  9.                 var bgimg = bgimgdf;
  10.                 if (obj.tagName == 'IMG') {
  11.                         //This is an image
  12.                         if (!bgimg) bgimg = obj.src;
  13.                         if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return;
  14.  
  15.                         obj.setStyle('height',obj.offsetHeight);
  16.                         obj.setStyle('width',obj.offsetWidth);
  17.                         obj.src = blankimg;
  18.                         obj.setStyle ('visibility', 'visible');
  19.                         obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
  20.                 }else{
  21.                         //Background
  22.                         if (!bgimg) bgimg = obj.getStyle('backgroundImage');
  23.                         var pattern = new RegExp('url\s*[\(\"\']*([^\'\"\)]*)[\'\"\)]*');
  24.                         if ((m = pattern.exec(bgimg))) bgimg = m[1];
  25.                         if (!(/\.png$/i).test(bgimg) || (/blank\.png$/i).test(bgimg)) return;
  26.                         if (!type)
  27.                         {
  28.                                 obj.setStyle('background', 'none');
  29.                                 //if(!obj.getStyle('position'))
  30.                                 if(obj.getStyle('position')!='absolute' && obj.getStyle('position')!='relative') {
  31.                                         obj.setStyle('position', 'relative');
  32.                                 }
  33.  
  34.                                 //Get all child
  35.                                 var childnodes = obj.childNodes;
  36.                                 for(var j=0;j<childnodes.length;j++){
  37.                                         if((child = $(childnodes[j]))) {
  38.                                                 if(child.getStyle('position')!='absolute' && child.getStyle('position')!='relative') {
  39.                                                         child.setStyle('position', 'relative');
  40.                                                 }
  41.                                                 child.setStyle('z-index',2);
  42.                                         }
  43.                                 }
  44.                                 //Create background layer:
  45.                                 var bgdiv = new Element('IMG');
  46.                                 bgdiv.src = blankimg;
  47.                                 bgdiv.width = obj.offsetWidth - offset;
  48.                                 bgdiv.height = obj.offsetHeight - offset;
  49.                                 bgdiv.setStyles({
  50.                                         'position': 'absolute',
  51.                                         'top': 0,
  52.                                         'left': 0
  53.                                 });
  54.  
  55.                                 bgdiv.className = 'TransBG';
  56.  
  57.                                 bgdiv.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
  58.                                 bgdiv.inject(obj, 'top');
  59.                                 //alert(obj.innerHTML + '\n' + bgdiv.innerHTML);
  60.                         } else {
  61.                                 obj.setStyle('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+bgimg+", sizingMethod='"+sizingMethod+"')");
  62.                         }
  63.                 }
  64.         }.bind(this));
  65.  
  66. }

ja_purity/js/iepngfix.htc

  1. <public:component>
  2. <public:attach event="onpropertychange" onevent="doFix()" />
  3.  
  4. <script type="text/javascript">
  5.  
  6. // IE5.5+ PNG Alpha Fix v1.0RC4
  7. // (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
  8.  
  9. // This is licensed under the CC-GNU LGPL, version 2.1 or later.
  10. // For details, see: http://creativecommons.org/licenses/LGPL/2.1/
  11.  
  12.  
  13. // This must be a path to a blank image. That's all the configuration you need.
  14. if (typeof blankImg == 'undefined') var blankImg = 'images/blank.png';
  15.  
  16.  
  17. var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
  18.  
  19. function filt(s, m)
  20. {
  21.  if (filters[f])
  22.  {
  23.   filters[f].enabled = s ? true : false;
  24.   if (s) with (filters[f]) { src = s; sizingMethod = m }
  25.  }
  26.  else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
  27. }
  28.  
  29. function doFix()
  30. {
  31.  // Assume IE7 is OK.
  32.  if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  33.   (event && !/(background|src)/.test(event.propertyName))) return;
  34.  
  35.  var bgImg = currentStyle.backgroundImage || style.backgroundImage;
  36.  
  37.  if (tagName == 'IMG')
  38.  {
  39.   if ((/\.png$/i).test(src))
  40.   {
  41.    if (currentStyle.width == 'auto' && currentStyle.height == 'auto') {
  42.     style.width = offsetWidth + 'px';
  43.     style.height = offsetHeight + 'px';
  44.    }
  45.    filt(src, 'scale');
  46.    src = blankImg;
  47.   }
  48.   else if (src.indexOf(blankImg) < 0) filt();
  49.  }
  50.  else if (bgImg && bgImg != 'none')
  51.  {
  52.   if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  53.   {
  54.    var s = RegExp.$1;
  55.    if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
  56.     style.width = offsetWidth + 'px';
  57.    style.backgroundImage = 'none';
  58.    filt(s, 'scale');
  59.    // IE link fix.
  60.    for (var n = 0; n < childNodes.length; n++)
  61.     if (childNodes[n].style) childNodes[n].style.position = 'relative';
  62.   }
  63.   else filt();
  64.  }
  65. }
  66.  
  67. doFix();
  68.  
  69. </script>
  70. </public:component>
Retrieved from "http://docs.joomla.org/index.php?title=J1.5:Customising_the_JA_Purity_template/header/logo&oldid=35141"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox