Downloaded 13 times
Uploaded byCarly Willats
Custom Template for Joomla! 3
This document outlines the process of creating a basic front-end template for Joomla! 3, including fixed module positions and necessary file structures such as CSS and index.php. It provides specific coding instructions and additional resources for further customization like Google Fonts and analytics integration. The creator emphasizes that the template is not responsive and lacks certain advanced features like template overrides and JavaScript enhancements.
More Related Content
Similar to Custom Template for Joomla! 3
Custom Template for Joomla! 3
- 1. Custom Template for Joomla!3 Carly Willats Web Designer at All Things Web
- 2. Get started Let’s getstarted. ● We’re building a basic front-end template for Joomla! 3. ● Fixed module positions. ● Not responsive. ● No template overrides, language files, error page, favicon, template thumbnail preview, print-friendly, fancy jQuery or JavaScript.
- 3.
- 4. Let’s start Set upfolders and files. I’ve used Joomla! Docs as base: https://docs.joomla.org/Creating_a_basic_Joomla!_template templates/ ● mycustomtemplate/ o css/ template.css o images/ logo.png o index.php o templateDetails.xml Demo.zip available at: http://bit.ly/demozip
- 5. templateDetails.xml Markup to suityour site. ● Update with your details ● Include extra positions for your design <positions> <position>header</position> <position>nav</position> <position>sidebar</position> <position>footer</position> </positions>
- 6. index.php Following along withthe Joomla! Docs tutorial … <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> </head>
- 7. index.php Now for the<body> section … <body> <jdoc:include type="modules" name="header" /> <jdoc:include type="modules" name="nav" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="sidebar" /> <jdoc:include type="modules" name="footer" /> </body> Don’t forget to finish off with </html>.
- 8. index.php Add HTML toallow for CSS styles … <div id="page"> <div id="header"><jdoc:include type="modules" name="header" /></div> <div id="nav"><jdoc:include type="modules" name="nav" /></div> <div id="container"> <div id="content"><jdoc:include type="component" /></div> <div id="sidebar"><jdoc:include type="modules" name="sidebar" /></div> <br style="clear: left"> </div> <div id="footer"><jdoc:include type="modules" name="footer" /></div> </div>
- 9. Some extras thatI generally include: ● Google Fonts ● Joomla! user messages (https://docs.joomla.org/Jdoc_statements) ● Google Analytics index.php
- 10. Add styles correspondingto template HTML. #page #header #nav #container #content #sidebar #footer template.css
- 11. In Module Manager,add modules to appear in positions: header nav sidebar footer Modules, Content and Menu
- 12. Resources Joomla! Docs “Creatinga basic Joomla! template” http://docs.joomla.org/Creating_a_basic_Joomla!_template
- 13.
- 14. www.allthingsweb.com.au Tweet about tonightusing #BJUG Tweet me @carlyweb Stay in touch