J1.5

Customising the JA Purity template/body

From Joomla! Documentation

< J1.5:Customising the JA Purity template
Revision as of 12:09, 25 April 2013 by JoomlaWikiBot (talk | contribs) (clean up)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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.

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 and template.css, 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

HTML and PHP Files[edit]

ja_purity/index.php[edit]

<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
	<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
	<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
	<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
	<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>

<div id="ja-wrapper">

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
	<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

	<div class="ja-headermask">&nbsp;</div>

	<?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; ?>

	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

	<?php if($this->countModules('user4')) : ?>
		<div id="ja-search">
			<jdoc:include type="modules" name="user4" />
		</div>
	<?php endif; ?>

	</div>
</div>
<!-- END: HEADER -->

<!-- BEGIN: MAIN NAVIGATION -->
<?php if ($this->countModules('hornav')): ?>
<div id="ja-mainnavwrap">
	<div id="ja-mainnav" class="clearfix">
	<jdoc:include type="modules" name="hornav" />
	</div>
</div>
<?php endif; ?>
<!-- END: MAIN NAVIGATION -->

<div id="ja-containerwrap<?php echo $divid; ?>">
<div id="ja-containerwrap2">
	<div id="ja-container">
	<div id="ja-container2" class="clearfix">

		<div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">

		<!-- BEGIN: CONTENT -->
		<div id="ja-contentwrap">
		<div id="ja-content">

			<jdoc:include type="message" />

			<?php if(!$tmpTools->isFrontPage()) : ?>
			<div id="ja-pathway">
				<jdoc:include type="module" name="breadcrumbs" />
			</div>
			<?php endif ; ?>

			<jdoc:include type="component" />

			<?php if($this->countModules('banner')) : ?>
			<div id="ja-banner">
				<jdoc:include type="modules" name="banner" />
			</div>
			<?php endif; ?>

		</div>
		</div>
		<!-- END: CONTENT -->

		<?php if ($this->countModules('left')): ?>
		<!-- BEGIN: LEFT COLUMN -->
		<div id="ja-col1">
			<jdoc:include type="modules" name="left" style="xhtml" />
		</div><br />
		<!-- END: LEFT COLUMN -->
		<?php endif; ?>

		</div>

		<?php if ($this->countModules('right')): ?>
		<!-- BEGIN: RIGHT COLUMN -->
		<div id="ja-col2">
			<jdoc:include type="modules" name="right" style="jarounded" />
		</div><br />
		<!-- END: RIGHT COLUMN -->
		<?php endif; ?>

	</div>
	</div>
</div>
</div>

<?php
$spotlight = array ('user1','user2','top','user5');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>
<!-- BEGIN: BOTTOM SPOTLIGHT -->
<div id="ja-botslwrap">
	<div id="ja-botsl" class="clearfix">

	  <?php if( $this->countModules('user1') ): ?>
	  <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
			<jdoc:include type="modules" name="user1" style="xhtml" />
	  </div>
	  <?php endif; ?>

	  <?php if( $this->countModules('user2') ): ?>
	  <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
			<jdoc:include type="modules" name="user2" style="xhtml" />
	  </div>
	  <?php endif; ?>

	  <?php if( $this->countModules('top') ): ?>
	  <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
			<jdoc:include type="modules" name="top" style="xhtml" />
	  </div>
	  <?php endif; ?>

	  <?php if( $this->countModules('user5') ): ?>
	  <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
			<jdoc:include type="modules" name="user5" style="xhtml" />
	  </div>
	  <?php endif; ?>

	</div>
</div>
<!-- END: BOTTOM SPOTLIGHT -->
<?php endif; ?>

<!-- BEGIN: FOOTER -->
<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

	<div id="ja-footnav">
		<jdoc:include type="modules" name="user3" />
	</div>

	<div class="copyright">
		<jdoc:include type="modules" name="footer" />
	</div>

	<div class="ja-cert">
		<jdoc:include type="modules" name="syndicate" />
    <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
		<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
		</a>
		<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
		<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
		</a>
	</div>

	<br />
</div>
</div>
<!-- END: FOOTER -->

</div>

<jdoc:include type="modules" name="debug" />

</body>

CSS Files[edit]

ja_purity/css/template.css[edit]

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
	margin: 0;
	padding: 0;
}

body {
	color: #000000;
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 150%;
}

body#bd {
	color: #333333;
	background: #F2F2F2;
}

body.contentpane {
	width: auto; /* Printable Page */
	margin: 1em 2em;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #333;
}

body.fs1 {
	font-size: 10px;
}

body.fs2{
	font-size: 11px;
}

body.fs3{
	font-size: 12px;
}

body.fs4{
	font-size: 13px;
}

body.fs5{
	font-size: 14px;
}

body.fs6{
	font-size: 15px;
}

Image Files[edit]

Javascript Files[edit]