J1.5

Customising the JA Purity template/header/logo

< J1.5:Customising the JA Purity template‎ | header(Redirected from Ja purity template header logo)

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

116 	<?php
117 		$siteName = $tmpTools->sitename();
118 		if ($tmpTools->getParam('logoType')=='image'): ?>
119 		<h1 class="logo">
120 			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
121 		</h1>
122 	<?php else:
123 		$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
124 		$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>
125 		<h1 class="logo-text">
126 			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
127 		</h1>
128 		<p class="site-slogan"><?php echo $sloganText;?></p>
129 	<?php endif; ?>

CSS Files

ja_purity/css/template.css

949 h1.logo, h1.logo-text {
950 	margin: 0 0 0 5px;
951 	padding: 0;
952 	font-size: 180%;
953 	text-transform: uppercase;
954 }
955 
956 h1.logo a {
957 	width: 208px;
958 	display: block;
959 	background: url(../images/logo.png) no-repeat;
960 	height: 80px;
961 	position: relative;
962 	z-index: 100;
963 }
964 
965 h1.logo a span {
966 	position: absolute;
967 	top: -1000px;
968 }
969 
970 h1.logo-text a {
971 	color: #CCCCCC !important;
972 	text-decoration: none;
973 	outline: none;
974 	position: absolute;
975 	bottom: 40px;
976 	left: 5px;
977 }
978 
979 p.site-slogan {
980 	margin: 0;
981 	padding: 0;
982 	padding: 2px 5px;
983 	color: #FFFFFF;
984 	background: #444444;
985 	font-size: 92%;
986 	position: absolute;
987 	bottom: 20px;
988 	left: 0;
989 }

ja_purity/css/template_rtl.css

180 h1.logo-text a {
181 	right: 5px;
182 	left: auto;
183 }
184 
185 p.site-slogan {
186 	right: 0;
187 	left: auto;
188 }

ja_purity/styles/header/blue/style.css

14 h1.logo-text a {
15 	color: #C3DFED !important;
16 }
17 
18 p.site-slogan {
19 	background: #1E7CAB;
20 }

ja_purity/styles/header/green/style.css

14 h1.logo-text a {
15 	color: #E4EFDF !important;
16 }
17 
18 p.site-slogan {
19 	background: #9DBF8C;
20 }

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

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

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>
Advertisement