Actions

J1.5

Customising the JA Purity template/header/logo

From Joomla! Documentation

< J1.5:Customising the JA Purity template‎ | header
Revision as of 13:30, 21 April 2013 by Wilsonge (Talk | contribs)

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.


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

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>