Custom Template for Joomla! 3
•Download as PPTX, PDF•
1 like•868 views
Step by step basics of setting up a custom template for Joomla! 3 CMS for beginners, following along with the Joomla! Docs - Creating a basic Joomla! template tutorial. Template is based on a typical two-column website layout.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Custom Template for Joomla! 3
Similar to Custom Template for Joomla! 3 (20)
Recently uploaded
Recently uploaded (20)
Custom Template for Joomla! 3
- 1. Custom Template for Joomla! 3 Carly Willats Web Designer at All Things Web
- 2. Get started Let’s get started. ● 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.
- 4. Let’s start Set up folders 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 suit your 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 with the 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 to allow 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 that I generally include: ● Google Fonts ● Joomla! user messages (https://docs.joomla.org/Jdoc_statements) ● Google Analytics index.php
- 10. Add styles corresponding to 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 “Creating a basic Joomla! template” http://docs.joomla.org/Creating_a_basic_Joomla!_template
- 13. Questions
- 14. www.allthingsweb.com.au Tweet about tonight using #BJUG Tweet me @carlyweb Stay in touch