Difference between revisions of "Customising the JA Purity template/header/logo"
From Joomla! Documentation
< J1.5:Customising the JA Purity template | header
(Added generic look for these pages - Probably need to create this as a template) |
m (→ja_purity/js/iepngfix.htc: archiving articles with category removal and addition) |
||
(7 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
− | {{stub}} | + | {{stub/abandoned}} |
− | + | {{: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> | |
− | + | <location of template>/ | |
− | < | + | index.php |
− | + | css/ | |
− | + | template.css | |
− | + | template_rtl.css | |
− | + | images/ | |
− | </pre> | + | logo.gif |
+ | logo.png | ||
+ | js/ | ||
+ | iepngfix.htc | ||
+ | ja.script.js | ||
+ | styles/header | ||
+ | blue/ | ||
+ | style.css | ||
+ | green/ | ||
+ | style.css | ||
+ | </pre>}} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
==HTML and PHP Files== | ==HTML and PHP Files== | ||
− | ===ja_purity/ | + | ===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/ | + | ===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/ | + | ===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> | </source> | ||
− | < | + | ===ja_purity/js/iepngfix.htc=== |
− | [[ | + | <source lang="javascript" line > |
− | [[ | + | <public:component> |
− | [[Category: | + | <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> | ||
+ | |||
+ | [[Category:Archived version Joomla! 1.5|{{PAGENAME}}]] |
Latest revision as of 09:27, 29 April 2013
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.
This article was once a stub and incomplete. It is now archived, PLEASE do not edit it! It references unsupported versions. |
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[edit]
ja_purity/index.php[edit]
<?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; ?>
CSS Files[edit]
ja_purity/css/template.css[edit]
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;
}
ja_purity/css/template_rtl.css[edit]
h1.logo-text a {
right: 5px;
left: auto;
}
p.site-slogan {
right: 0;
left: auto;
}
ja_purity/styles/header/blue/style.css[edit]
h1.logo-text a {
color: #C3DFED !important;
}
p.site-slogan {
background: #1E7CAB;
}
ja_purity/styles/header/green/style.css[edit]
h1.logo-text a {
color: #E4EFDF !important;
}
p.site-slogan {
background: #9DBF8C;
}
Image Files[edit]
ja_purity/images/logo.gif[edit]
ja_purity/images/logo.png[edit]
Javascript Files[edit]
ja_purity/js/ja.script.js[edit]
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));
}
ja_purity/js/iepngfix.htc[edit]
<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>