Joomla 3 Super Secret Template Cheat Sheet

Harvard Extension School, February 2017

This is a brief series of steps for creating a custom Joomla template from scratch, working with Joomla 3.6.5.

Bootstrap 2.3.2 Links to an external site. is baked into the Joomla 3 series. You may use the framework for building your templates. This technique is covered in "Templating with Joomla 3 and Bootstrap Links to an external site.". Chapter numbers below refer to the corresponding chapters in the lynda.com course.

If you wish to learn Bootstrap 2, refer to the lynda.com course "Up and Running with Bootstrap 2 Links to an external site."

You are NOT required to build your Joomla template with Bootstrap. If you choose not to do so, there's notes below for any changes... and there aren't many.

Steps for making a Joomla template, in brief:

  1. Create a static HTML page: lynda.com (Chapter 2)
  • Don't spend too much time making it pretty. Get elements broadly in place on the page.
  • Remember that HTML output will change between your static page and Joomla, so style once you're in Joomla.
  • Place CSS file(s) in a folder called css and images in a folder called images.
  • Save your static page as index.php (Chapter 3)
    • index.php is stored in a folder which contains the folders css and images. Call this folder the template folder
    • Change head code to head code below. Make sure paths to CSS files are correct.
    • Insert module positions where they are required
    • Insert component and message codes
    • Change paths to images to be correct for Joomla
    • Save index.php -- you're done
  • Create a favicon Links to an external site., called favicon.ico, save in the template folder (Chapter 3)
  • Create template_thumbnail.png, save in template folder (Chapter 3)
  • Create template_preview.png, save in template folder (Chapter 3)
  • From Beez2, save a copy of templateDetails.xml (Chapter 3)
    • Edit files/folders to reflect your template
    • Edit module positions to match yours
    • Remove sections you're not using
  • Combine all of the items above into a zip (Chapter 3)
  • Install the zip in Joomla via Extensions - Install/Uninstall (Chapter 4)
  • Assign the template style to relevant pages (or make it the default) (Chapter 4)
  • View on the front end
  • Using Firebug/Web Developer Toolbar/your favorite tools, edit the CSS to make it work correctly (chapters 5 and 6)

Secret Joomla Codes

Head code with Bootstrap 2

<?php defined('_JEXEC') or die;
// Add JavaScript Frameworks -- pulls in Bootstrap, jQuery in no conflict mode
   JHtml::_('bootstrap.framework');
// Load Bootstrap CSS
   JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<link href="templates/jenkramer/css/default.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]> <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script> <![endif]--> </head>

Make sure your stylesheet is called screen.css. Otherwise, modify the file path.

Head code without Bootstrap 2

<?php defined('_JEXEC') or die;
// Add JavaScript Frameworks -- pulls in jQuery in no conflict mode.
   JHtml::_('jquery.framework');  // for super advanced javascripty students: if you want jQuery in normal mode, use JHtml::_('jquery.framework', false);

// Do NOT pull in Joomla's copy of bootstrap CSS
   JHtmlBootstrap::loadCss($includeMaincss = false);
?>
<!doctype html>
<html>
<head>
<jdoc:include type="head" />
<link href="templates/jenkramer/css/default.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]> <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script> <![endif]--> </head>

Additional variables which may be called in the head code Links to an external site. (with or without Bootstrap)

Make sure your stylesheet is called screen.css. Otherwise, modify the file path.

Module code

<jdoc:include type="modules" name="left" style="html5" />

Message and component code

<jdoc:include type="message" />  
<jdoc:include type="component" />