Actions

J1.5

Difference between revisions of "Customising the JA Purity template/spotlight"

From Joomla! Documentation

< J1.5:Customising the JA Purity template
m (New page: {{stub}} <noinclude> Category:Beginners Category:JA Purity template Category:Tutorials </noinclude>)
 
m (Applied tutorial template and removed categories)
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{stub}}
 
{{stub}}
<noinclude>
+
{{:Customising the JA Purity template/tutorialtemplate|index.php, template.css and vdot2.gif|<pre>
[[Category:Beginners]]
+
    <location of template>/
[[Category:JA Purity template]]
+
        index.php
[[Category:Tutorials]]
+
        css/
</noinclude>
+
            template.css
 +
        images/
 +
            vdot2.gif
 +
</pre>}}
 +
==HTML and PHP Files==
 +
===ja_purity/index.php===
 +
<source lang="php" line start="207">
 +
<?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; ?>
 +
</source>
 +
==CSS Files==
 +
===ja_purity/css/template.css===
 +
<source lang="css" line start="1308">
 +
/* SPOTLIGHT
 +
--------------------------------------------------------- */
 +
/* Spotlight Box Style */
 +
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
 +
float: left;
 +
overflow: hidden;
 +
}
 +
 
 +
.ja-box-left div.moduletable,
 +
.ja-box-full div.moduletable {
 +
padding-right: 30px;
 +
background: none;
 +
}
 +
 
 +
.ja-box-right div.moduletable {
 +
padding-left: 30px;
 +
background: url(../images/vdot2.gif) repeat-y left;
 +
}
 +
 
 +
.ja-box-center div.moduletable {
 +
padding: 0 30px;
 +
background: url(../images/vdot2.gif) repeat-y left;
 +
}
 +
 
 +
#ja-botsl h3 {
 +
background: none;
 +
}
 +
 
 +
#ja-botslwrap {
 +
border-top: 5px solid #CCCCCC;
 +
background: #444444;
 +
color: #CCCCCC;
 +
}
 +
 
 +
#ja-botsl {
 +
padding: 15px 0;
 +
}
 +
 
 +
#ja-botsl div.moduletable {
 +
padding-top: 0;
 +
padding-bottom: 0;
 +
margin: 0;
 +
}
 +
 
 +
#ja-botsl h3 {
 +
margin: 0 0 12px;
 +
padding: 0;
 +
color: #FFFFFF;
 +
}
 +
 
 +
#ja-botsl a {
 +
color: #CCCCCC;
 +
}
 +
 
 +
#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
 +
color: #FFFFFF;
 +
}
 +
 
 +
#ja-botsl ul, #ja-botsl p, #ja-botsl ol {
 +
padding: 0;
 +
margin: 0 !important;
 +
}
 +
 
 +
#ja-botsl ul li {
 +
padding: 0 0 0 15px;
 +
margin: 0;
 +
background: url(../images/bullet2.gif) no-repeat 3px 8px;
 +
}
 +
 
 +
#ja-botsl ol li {
 +
margin-left: 25px;
 +
padding: 0 !important;
 +
}
 +
 
 +
#ja-botsl td {
 +
padding: 0;
 +
}
 +
 
 +
#ja-botsl .article_separator {
 +
display: none;
 +
}
 +
 
 +
#ja-botsl table {
 +
border-spacing: 0;
 +
border-collapse: collapse;
 +
}
 +
</source>
 +
==Image Files==
 +
* vdot2.gif
 +
==Javascript Files==
 +
===ja_purity/js/XXXXX.js===
 +
<source lang="javascript" line start="">
 +
</source>

Revision as of 15:25, 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.


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 and vdot2.gif, 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
        images/
            vdot2.gif

Contents

HTML and PHP Files

ja_purity/index.php

  1. <?php
  2. $spotlight = array ('user1','user2','top','user5');
  3. $botsl = $tmpTools->calSpotlight ($spotlight,99,22);
  4. if( $botsl ) :
  5. ?>
  6. <!-- BEGIN: BOTTOM SPOTLIGHT -->
  7. <div id="ja-botslwrap">
  8.         <div id="ja-botsl" class="clearfix">
  9.  
  10.           <?php if( $this->countModules('user1') ): ?>
  11.           <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
  12.                         <jdoc:include type="modules" name="user1" style="xhtml" />
  13.           </div>
  14.           <?php endif; ?>
  15.  
  16.           <?php if( $this->countModules('user2') ): ?>
  17.           <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
  18.                         <jdoc:include type="modules" name="user2" style="xhtml" />
  19.           </div>
  20.           <?php endif; ?>
  21.  
  22.           <?php if( $this->countModules('top') ): ?>
  23.           <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
  24.                         <jdoc:include type="modules" name="top" style="xhtml" />
  25.           </div>
  26.           <?php endif; ?>
  27.  
  28.           <?php if( $this->countModules('user5') ): ?>
  29.           <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
  30.                         <jdoc:include type="modules" name="user5" style="xhtml" />
  31.           </div>
  32.           <?php endif; ?>
  33.  
  34.         </div>
  35. </div>
  36. <!-- END: BOTTOM SPOTLIGHT -->
  37. <?php endif; ?>

CSS Files

ja_purity/css/template.css

  1. /* SPOTLIGHT
  2. --------------------------------------------------------- */
  3. /* Spotlight Box Style */
  4. .ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
  5.         float: left;
  6.         overflow: hidden;
  7. }
  8.  
  9. .ja-box-left div.moduletable,
  10. .ja-box-full div.moduletable {
  11.         padding-right: 30px;
  12.         background: none;
  13. }
  14.  
  15. .ja-box-right div.moduletable {
  16.         padding-left: 30px;
  17.         background: url(../images/vdot2.gif) repeat-y left;
  18. }
  19.  
  20. .ja-box-center div.moduletable {
  21.         padding: 0 30px;
  22.         background: url(../images/vdot2.gif) repeat-y left;
  23. }
  24.  
  25. #ja-botsl h3 {
  26.         background: none;
  27. }
  28.  
  29. #ja-botslwrap {
  30.         border-top: 5px solid #CCCCCC;
  31.         background: #444444;
  32.         color: #CCCCCC;
  33. }
  34.  
  35. #ja-botsl {
  36.         padding: 15px 0;
  37. }
  38.  
  39. #ja-botsl div.moduletable {
  40.         padding-top: 0;
  41.         padding-bottom: 0;
  42.         margin: 0;
  43. }
  44.  
  45. #ja-botsl h3 {
  46.         margin: 0 0 12px;
  47.         padding: 0;
  48.         color: #FFFFFF;
  49. }
  50.  
  51. #ja-botsl a {
  52.         color: #CCCCCC;
  53. }
  54.  
  55. #ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
  56.         color: #FFFFFF;
  57. }
  58.  
  59. #ja-botsl ul, #ja-botsl p, #ja-botsl ol {
  60.         padding: 0;
  61.         margin: 0 !important;
  62. }
  63.  
  64. #ja-botsl ul li {
  65.         padding: 0 0 0 15px;
  66.         margin: 0;
  67.         background: url(../images/bullet2.gif) no-repeat 3px 8px;
  68. }
  69.  
  70. #ja-botsl ol li {
  71.         margin-left: 25px;
  72.         padding: 0 !important;
  73. }
  74.  
  75. #ja-botsl td {
  76.         padding: 0;
  77. }
  78.  
  79. #ja-botsl .article_separator {
  80.         display: none;
  81. }
  82.  
  83. #ja-botsl table {
  84.         border-spacing: 0;
  85.         border-collapse: collapse;
  86. }

Image Files

  • vdot2.gif

Javascript Files

ja_purity/js/XXXXX.js

  1.