CINXE.COM

<!DOCTYPE html> <html class="client-nojs" lang="en" dir="ltr"> <head> <meta charset="UTF-8"/> <title>Portal:Template Development - Joomla! Documentation</title> <script>document.documentElement.className="client-js";RLCONF={"wgBreakFrames":!1,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"6a3e1b161d88d75be0ae4329","wgCSPNonce":!1,"wgCanonicalNamespace":"Portal","wgCanonicalSpecialPageName":!1,"wgNamespaceNumber":100,"wgPageName":"Portal:Template_Development","wgTitle":"Template Development","wgCurRevisionId":187756,"wgRevisionId":187756,"wgArticleId":10758,"wgIsArticle":!0,"wgIsRedirect":!1,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Development","Template Development"],"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Portal:Template_Development","wgRelevantArticleId":10758,"wgIsProbablyEditable":!1,"wgRelevantPageIsProbablyEditable":!1,"wgRestrictionEdit":[],"wgRestrictionMove" :[],"wgMediaViewerOnClick":!0,"wgMediaViewerEnabledByDefault":!0,"wgULSAcceptLanguageList":["en"],"wgULSCurrentAutonym":"English","wgULSPosition":"personal","wgULSisCompactLinksEnabled":!0,"wgTranslatePageTranslation":"source"};RLSTATE={"site.styles":"ready","noscript":"ready","user.styles":"ready","user":"ready","user.options":"loading","ext.translate":"ready","ext.translate.tag.languages":"ready","skins.jforeground.styles":"ready","ext.uls.pt":"ready"};RLPAGEMODULES=["site","mediawiki.page.startup","mediawiki.page.ready","skins.jforeground.js","mmv.head","mmv.bootstrap.autostart","ext.uls.compactlinks","ext.uls.interface","ext.translate.pagetranslation.uls"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.implement("user.options@1hzgi",function($,jQuery,require,module){/*@nomin*/mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); });});</script> <link rel="stylesheet" href="/load.php?lang=en&modules=ext.translate%7Cext.translate.tag.languages%7Cext.uls.pt%7Cskins.jforeground.styles&only=styles&skin=jforeground"/> <script async="" src="/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=jforeground"></script> <meta name="ResourceLoaderDynamicStyles" content=""/> <link rel="stylesheet" href="/load.php?lang=en&modules=site.styles&only=styles&skin=jforeground"/> <meta name="generator" content="MediaWiki 1.35.10"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"/> <link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png"/> <link rel="shortcut icon" href="/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.php" title="Joomla! Documentation (en)"/> <link rel="EditURI" type="application/rsd+xml" href="//docs.joomla.org/api.php?action=rsd"/> <link rel="license" href="/JEDL"/> <link rel="alternate" type="application/atom+xml" title="Joomla! Documentation Atom feed" href="/index.php?title=Special:RecentChanges&feed=atom"/>  </head> <body class="mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-100 ns-subject page-Portal_Template_Development rootpage-Portal_Template_Development skin-jforeground action-view"><div id='navwrapper'>  <div id="top-nav" class="fixed"> <nav id="topnav" class="top-bar top row"> <ul class="title-area"> <li class="name logo"> <a href="/Main_Page"> <img alt="Joomla! Documentation" src="/skins/jforeground/joomla_logo_small.png" style="max-width: 64px;height:auto; max-height:36px; display: inline-block; vertical-align:middle;"></a> </li> <li class="toggle-topbar menu-icon"> <a href="#"><span> </span></a> </li> </ul> <section class="top-bar-section"> <ul id="top-bar-left" class="left"> <li class="has-dropdown active" id="p-sidebar-Joomla"> <a href="#">Joomla!</a> <ul class="dropdown"> <li id="n-sidebar-Main"><a href="https://www.joomla.org"><i class="fa fa-joomla 2x-fa icon"></i>Joomla! Home</a></li> <li id="n-sidebar-What"><a href="https://www.joomla.org/about-joomla.html">What is Joomla?</a></li> <li id="n-sidebar-Benefits"><a href="https://www.joomla.org/core-features.html">Benefits & Features</a></li> <li id="n-sidebar-Leadership"><a href="https://www.joomla.org/about-joomla/the-project.html">Project & Leadership</a></li> <li id="n-sidebar-Trademark"><a href="https://tm.joomla.org">Trademark & Licensing</a></li> <li class="divider"></li> <li id="label"><label>Support Joomla!</label></li> <li id="n-sidebar-Contribute"><a href="https://www.joomla.org/contribute-to-joomla.html">Contribute</a></li> <li id="n-sidebar-Sponsorship"><a href="https://www.joomla.org/sponsor.html">Sponsor</a></li> <li id="n-sidebar-Partner"><a href="https://www.joomla.org/about-joomla/partners.html">Partner</a></li> <li id="n-sidebar-Shop"><a href="https://shop.joomla.org/">Shop</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-Extend"> <a href="#">Download & Extend</a> <ul class="dropdown"> <li id="n-sidebar-JoomlaCode"><a href="https://downloads.joomla.org/">Downloads</a></li> <li id="n-sidebar-Extensions"><a href="https://extensions.joomla.org/">Extensions</a></li> <li id="n-sidebar-Translations"><a href="https://community.joomla.org/translations.html">Languages</a></li> <li id="n-sidebar-Free-Hosted"><a href="https://launch.joomla.org">Get a free site</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-About"> <a href="#">Discover & Learn</a> <ul class="dropdown"> <li id="n-sidebar-Docs"><a href="https://docs.joomla.org">Documentation</a></li> <li id="n-sidebar-Training"><a href="https://training.joomla.org">Training</a></li> <li id="n-sidebar-Certification"><a href="https://certification.joomla.org/">Certification</a></li> <li id="n-sidebar-Showcase"><a href="https://showcase.joomla.org/">Site Showcase</a></li> <li id="n-sidebar-Announcements"><a href="https://www.joomla.org/announcements.html">Announcements</a></li> <li id="n-sidebar-Blogs"><a href="https://community.joomla.org/blogs.html">Blogs</a></li> <li id="n-sidebar-Magazine"><a href="https://magazine.joomla.org/">Magazine</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-News"> <a href="#">Community & Support</a> <ul class="dropdown"> <li id="n-sidebar-Community"><a href="https://community.joomla.org/">Community Portal</a></li> <li id="n-sidebar-Events"><a href="https://events.joomla.org/">Events</a></li> <li id="n-sidebar-JUGs"><a href="https://community.joomla.org/user-groups.html">User Groups</a></li> <li id="n-sidebar-Forum"><a href="https://forum.joomla.org/">Forum</a></li> <li id="n-sidebar-Resources"><a href="https://resources.joomla.org/">Resources Directory</a></li> <li id="n-sidebar-Volunteers"><a href="https://volunteers.joomla.org/">Volunteers Portal</a></li> <li id="n-sidebar-Vel"><a href="https://vel.joomla.org">Vulnerable Extensions List</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-Developers"> <a href="#">Developer Resources</a> <ul class="dropdown"> <li id="n-sidebar-Developers"><a href="https://developer.joomla.org/">Developer Network</a></li> <li id="n-sidebar-Security"><a href="https://developer.joomla.org/security-centre.html">Security Centre</a></li> <li id="n-sidebar-Issues"><a href="https://issues.joomla.org/">Issue Tracker</a></li> <li id="n-sidebar-Github"><a href="https://github.com/joomla">GitHub</a></li> <li id="n-sidebar-API"><a href="https://api.joomla.org/">API Documentation</a></li> <li id="n-sidebar-Framework"><a href="https://framework.joomla.org/">Joomla! Framework</a></li> <li id="n-sidebar-JoomlaCode"><a href="http://joomlacode.org/">JoomlaCode</a></li> </ul> </li> </ul> <ul id="top-bar-right" class="right"> <li class="has-dropdown active"><a href="#"><i class="fa fa-cogs"></i></a> <ul id="toolbox-dropdown" class="dropdown"> <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/Portal:Template_Development" title="A list of all wiki pages that link here [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/Portal:Template_Development" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-specialpages"><a href="/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-print"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">Printable version</a></li><li id="t-permalink"><a href="/index.php?title=Portal:Template_Development&oldid=187756" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-info"><a href="/index.php?title=Portal:Template_Development&action=info" title="More information about this page">Page information</a></li> <li id="n-recentchanges"><a href="/Special:RecentChanges" title="Special:RecentChanges">Recent changes</a></li> <li id="n-help" ><a href="/S:MyLanguage/Help:Contents">Help</a></li> </ul> </li> <li> <a href="/index.php?title=Special:UserLogin&returnto=Portal%3ATemplate+Development">Log in</a> </li> </ul> </section> </nav> </div> <div id="global-header"> <nav class="global-header"> <div class="row"> <div class="large-6 column"> <h1 class="page-title"> <a href="/Main_Page"> <div class="title-name" style="display: inline-block;">Joomla! Documentation<sup>™</sup></div> </a> </h1> </div> <div class="large-6 column hide-for-small"> <ul class="button-group pull-right"> <li><a href="https://downloads.joomla.org/" class="button success radius" target="_blank">Download</a></li> <li><a href="https://launch.joomla.org/" class="button top radius" target="_blank">Launch</a></li> </ul> </div> </div> </nav> </div> <div id="bottom-nav"> <nav id="bottomnav" class="top-bar bottom row"> <ul class="title-area"> <li class="name"> <h1 class="title-name-small"> <a href="/Main_Page"> <div class="title-name" style="display:none;">Joomla! Documentation<sup>™</sup></div> </a> </h1> </li> <li class="toggle-topbar menu-icon"> <a href="#"><span></span></a> </li> </ul> <section class="top-bar-section"> <ul id="top-bar-left" class="left"> <li class="has-dropdown active" id='p-Learn'> <a href="#">Learn</a> <ul class="dropdown"> <li id="n-More-About-Joomla.21"><a href="/Special:MyLanguage/Portal:Learn_More">More About Joomla!</a></li><li id="n-Beginners"><a href="/Portal:Beginners">Beginners</a></li><li id="n-Administrators"><a href="/Portal:Administrators">Administrators</a></li><li id="n-Developers"><a href="/Portal:Developers">Developers</a></li><li id="n-Joomla.21-Get-Involved"><a href="/Portal:Participating_in_the_Community">Joomla! Get Involved</a></li><li id="n-Joomla.21-Code-Contributors"><a href="/Portal:Joomla!_Code_Contributors">Joomla! Code Contributors</a></li><li id="n-Joomla-User-Groups"><a href="/Special:MyLanguage/Portal:Joomla_User_Groups">Joomla User Groups</a></li> </ul> <li class="has-dropdown active" id='p-Browse'> <a href="#">Browse</a> <ul class="dropdown"> <li id="n-CMS-Help-Screens"><a href="/Help_screens">CMS Help Screens</a></li><li id="n-Our-Docs"><a href="/Category:Top_Level">Our Docs</a></li><li id="n-Our-Glossary"><a href="/Glossary">Our Glossary</a></li><li id="n-The-Joomla.21-FAQs"><a href="/Category:FAQ">The Joomla! FAQs</a></li><li id="n-Tips-and-tricks"><a href="/Category:Tips_and_tricks">Tips and tricks</a></li><li id="n-Recent-Changes"><a href="/Special:RecentChanges">Recent Changes</a></li> </ul> <li class="has-dropdown active" id='p-Help'> <a href="#">Help</a> <ul class="dropdown"> <li id="n-Contribute-to-Joomla.21-Docs"><a href="/JDOC:How_to_Contribute_to_Joomla!_Documentation">Contribute to Joomla! Docs</a></li><li id="n-Translate-Joomla.21-Docs"><a href="/JDOC:Documentation_Translators">Translate Joomla! Docs</a></li><li id="n-Editing-Help"><a href="/JHelp:Cheatsheet">Editing Help</a></li><li id="n-Play-in-the-Sandbox"><a href="/Sandbox">Play in the Sandbox</a></li><li id="n-JDOC.27s-Policies"><a href="/JDOC:Wiki_policy">JDOC's Policies</a></li><li id="n-Documentation-License"><a href="/JEDL">Documentation License</a></li><li id="n-More-Help"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents" rel="nofollow" target="_blank">More Help</a></li> </ul> </ul> <ul id="top-bar-right" class="right"> <li class="has-form"> <form action="/index.php" id="searchform" class="mw-search"> <div class="row"> <div class="small-12 columns"> <input type="search" name="search" placeholder="Search Joomla! Documentation" title="Search Joomla! Documentation [f]" accesskey="f" id="searchInput"/> <button type="submit" class="button search main">Search</button> </div> </div> </form> </li> </ul> </section> </nav> </div> </div> <div id="page-content"> <div class="row"> <div class="large-12 columns">   <div class="mw-indicators mw-body-content"> </div>  </div> </div> <div id="mw-js-message" style="display:none;"></div> <div class="row"> <div id="p-cactions" class="large-12 columns"> <h4 class="namespace label">Portal</h4> <article id="content"> <h1 class="title">Template Development</h1> <h3 id="tagline">From Joomla! Documentation</h3> <h5 class="subtitle"></h5> <div id="ad"> <script async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=joomlaorg" id="_carbonads_js"></script> </div> <div class="clear_both"></div> <div class="mw-bodytext"> <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><div class="mw-parser-output"><div class="mw-parser-output"><div class="mw-pt-languages noprint" lang="en" dir="ltr"><div class="mw-pt-languages-label">Other languages:</div><div class="mw-pt-languages-list"><a href="/Portal:Template_Development/de" class="mw-pt-progress mw-pt-progress--complete" title="Template-Entwicklung (100% translated)" lang="de">Deutsch</a> • ‎<span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en">English</span> • ‎<a href="/Portal:Template_Development/nl" class="mw-pt-progress mw-pt-progress--complete" title="Template ontwikkeling (100% translated)" lang="nl">Nederlands</a> • ‎<a href="/Portal:Template_Development/es" class="mw-pt-progress mw-pt-progress--complete" title="Desarrollo de Plantillas (100% translated)" lang="es">español</a> • ‎<a href="/Portal:Template_Development/fr" class="mw-pt-progress mw-pt-progress--complete" title="Développement de templates (100% translated)" lang="fr">français</a> • ‎<a href="/Portal:Template_Development/pt" class="mw-pt-progress mw-pt-progress--complete" title="Desenvolvimento de Modelos (100% translated)" lang="pt">português</a> • ‎<a href="/Portal:Template_Development/ru" class="mw-pt-progress mw-pt-progress--complete" title="Разработка шаблонов (100% translated)" lang="ru">русский</a> • ‎<a href="/Portal:Template_Development/fa" class="mw-pt-progress mw-pt-progress--complete" title="توسعه قالب (90% translated)" lang="fa">فارسی</a> • ‎<a href="/Portal:Template_Development/zh-tw" class="mw-pt-progress mw-pt-progress--complete" title="佈景主題開發 (100% translated)" lang="zh-Hant-TW">中文（台灣）‎</a></div></div> <div class="panel text-center white-bkgd"><icon class="fa fa-list-alt fa-5x" style="color:#5091cd;"></icon><span id="main-portal-heading" style="color:#333;">Template Development</span></div> <p><br /> This page contains many links to selected documentation concerning Template Development for <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> and <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a>. A good place to start is with the <b><a href="#Recommended_Reading">Recommending Reading</a></b> articles below as they provide a good introductory base of knowledge to build on. </p> <div class="panel radius ambox-tip"><div class="subheader-ambox"><icon class="fa fa-lightbulb-o fa-2x" style="color:#000;"></icon><div class="ambox-title">What's a Joomla! Template?<div style="font-size:.7em;float:right"></div></div></div><p class="ambox" style="font-size:.9em;">A template is a type of Joomla! <a href="/Special:MyLanguage/extension" title="Special:MyLanguage/extension">extension</a> that changes the way your site looks. There are two types of templates used by the Joomla! CMS: <a href="/Special:MyLanguage/Template#Front-end_Templates" title="Special:MyLanguage/Template">Front-end Templates</a> and <a href="/Special:MyLanguage/Template#Back-end_Templates" title="Special:MyLanguage/Template">Back-end Templates</a>. The Front-end Template controls the way your website is presented to the user viewing the website's content. The Back-end Template controls the way your website's administrative tasks are presented for controlling management functions by a Joomla! Administrator. These would include common tasks such as: user, menu, article, category, module, component, plugin and template management.<br /> </p><p><b>See also</b>: <a href="/Special:MyLanguage/Component" title="Special:MyLanguage/Component">Component</a>, <a href="/Special:MyLanguage/Module" title="Special:MyLanguage/Module">Module</a>, <a href="/Special:MyLanguage/Plugin" title="Special:MyLanguage/Plugin">Plugin</a> </p> <div style="clear:both;"></div> As a developer, you are probably are more interested in how to create a <b>Front-End Template</b>.<p class="mw-empty-elt"></p></div> <p><br /> </p> <div class="large-6 column"> <div class="panel text-center blue-bkgd"><span id="section-portal-heading"><h2><span class="mw-headline" id="Recommended_Reading"><icon class="fa fa-book fa-lg" style="color:#fff;"></icon> Recommended Reading</span></h2></span></div> <p>Our template development documentation contains many articles, FAQs and tutorials. A first step to developing a template is <a href="/Special:MyLanguage/How_are_templates_executed%3F" title="Special:MyLanguage/How are templates executed?">understanding how templates are executed</a>. </p> <h4><span class="mw-headline" id="Beginners">Beginners</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Portal:Template_Development/Reading_list/en&action=edit&section=T-1" title="Edit section: ">edit</a><span class="mw-editsection-bracket">]</span></span></h4> <ul><li><a href="/Special:MyLanguage/Changing_the_site_favicon" title="Special:MyLanguage/Changing the site favicon">Changing the site favicon</a></li> <li><a href="/Special:MyLanguage/Using_Firebug_With_Your_Joomla_Website" title="Special:MyLanguage/Using Firebug With Your Joomla Website">Using Firebug With Your Joomla Website</a></li> <li><a href="/Special:MyLanguage/J3.x:Joomla_Standard_Icomoon_Fonts" title="Special:MyLanguage/J3.x:Joomla Standard Icomoon Fonts">Using Joomla's Default Icomoon Fonts</a></li></ul> <h4><span class="mw-headline" id="Intermediate">Intermediate</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Portal:Template_Development/Reading_list/en&action=edit&section=T-2" title="Edit section: ">edit</a><span class="mw-editsection-bracket">]</span></span></h4> <ul><li><a href="/Special:MyLanguage/jdoc_statements" title="Special:MyLanguage/jdoc statements">jdoc statements</a></li> <li><a href="/Special:MyLanguage/How_to_cloak_email_addresses" title="Special:MyLanguage/How to cloak email addresses">How to cloak email addresses</a>  <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Understanding_Output_Overrides" title="Special:MyLanguage/Understanding Output Overrides">Understanding Output Overrides</a>  <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/J3.x:Layout_Overrides_in_Joomla" title="Special:MyLanguage/J3.x:Layout Overrides in Joomla">Layout Overrides in Joomla!</a>  <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Creating_clickable_background_images_using_CSS" title="Special:MyLanguage/Creating clickable background images using CSS">Creating clickable background images using CSS</a></li> <li><a href="/Special:MyLanguage/Using_Class_Suffixes" title="Special:MyLanguage/Using Class Suffixes">Using Class Suffixes</a></li></ul> <p><br /> </p> </div> <div class="large-6 column"> <div class="panel text-center blue-bkgd"><span id="section-portal-heading"><h2><span class="mw-headline" id="FAQ"><icon class="fa fa-question fa-lg" style="color:#fff;"></icon> FAQ</span></h2></span></div> <p><br /> <small>List of all articles belonging to the categories "FAQ" AND "Template Development"</small> </p> <ul><li><a href="/Special:MyLanguage/Extensions_GPL_notices" title="Special:MyLanguage/Extensions GPL notices">Extensions GPL notices</a></li> <li><a href="/Special:MyLanguage/Extensions_distribution" title="Special:MyLanguage/Extensions distribution">Extensions distribution</a></li> <li><a href="/Special:MyLanguage/Extensions_name" title="Special:MyLanguage/Extensions name">Extensions name</a></li> <li><a href="/Special:MyLanguage/How_do_you_change_the_favicon%3F" title="Special:MyLanguage/How do you change the favicon?">How do you change the favicon?</a></li> <li><a href="/Special:MyLanguage/How_do_you_change_the_images_in_your_template%3F" title="Special:MyLanguage/How do you change the images in your template?">How do you change the images in your template?</a></li> <li><a href="/Special:MyLanguage/How_do_you_list_your_extension_in_the_extensions_site%3F" title="Special:MyLanguage/How do you list your extension in the extensions site?">How do you list your extension in the extensions site?</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/How_to_add_a_span_element_to_menu_entries" title="Special:MyLanguage/How to add a span element to menu entries">How to add a span element to menu entries</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Category:Template_FAQ" title="Special:MyLanguage/Category:Template FAQ">Template FAQ</a></li></ul> <p><br /> </p> </div> <div style="clear:both;"></div> <div class="large-12 column"><div class="panel text-center blue-bkgd"><span id="section-portal-heading"><h2><span class="mw-headline" id="Template_Development_Tutorials"><icon class="fa fa-magic fa-lg" style="color:#fff;"></icon> Template Development Tutorials</span></h2></span></div> <p><small>Template Developer Tutorials</small> </p> <div class="large-6 column"> <ul><li><a href="/Special:MyLanguage/Add_text_to_an_article_using_template_overrides" class="new" title="Special:MyLanguage/Add text to an article using template overrides (page does not exist)">Add text to an article using template overrides</a></li> <li><a href="/Special:MyLanguage/Adding_custom_fields_to_core_components_using_a_plugin" title="Special:MyLanguage/Adding custom fields to core components using a plugin">Adding custom fields to core components using a plugin</a></li> <li><a href="/Special:MyLanguage/Adding_JavaScript" title="Special:MyLanguage/Adding JavaScript">Adding JavaScript</a></li> <li><a href="/Special:MyLanguage/Adding_stylesheets_for_other_output_devices" title="Special:MyLanguage/Adding stylesheets for other output devices">Adding stylesheets for other output devices</a></li> <li><a href="/Special:MyLanguage/Advanced_topics" title="Special:MyLanguage/Advanced topics">Advanced topics</a></li> <li><a href="/Special:MyLanguage/Amending_the_templateDetails.xml_file" title="Special:MyLanguage/Amending the templateDetails.xml file">Amending the templateDetails.xml file</a></li> <li><a href="/Special:MyLanguage/Changing_the_site_favicon" title="Special:MyLanguage/Changing the site favicon">Changing the site favicon</a></li> <li><a href="/Special:MyLanguage/Collapsing_columns" title="Special:MyLanguage/Collapsing columns">Collapsing columns</a></li> <li><a href="/Special:MyLanguage/J3.x:Converting_A_Previous_Joomla!_Version_Template" title="Special:MyLanguage/J3.x:Converting A Previous Joomla! Version Template">Converting A Previous Joomla! Version Template</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Counting_modules_in_a_given_module_position" title="Special:MyLanguage/Counting modules in a given module position">Counting modules in a given module position</a></li> <li><a href="/Special:MyLanguage/Creating_a_basic_index_file" title="Special:MyLanguage/Creating a basic index file">Creating a basic index file</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Creating_a_basic_Joomla!_template" title="Special:MyLanguage/Creating a basic Joomla! template">Creating a basic Joomla! template</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Creating_a_basic_templateDetails.xml_file" title="Special:MyLanguage/Creating a basic templateDetails.xml file">Creating a basic templateDetails.xml file</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Creating_a_thumbnail_preview_image" title="Special:MyLanguage/Creating a thumbnail preview image">Creating a thumbnail preview image</a></li> <li><a href="/Special:MyLanguage/Creating_clickable_background_images_using_CSS" title="Special:MyLanguage/Creating clickable background images using CSS">Creating clickable background images using CSS</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Custom_error_pages" title="Special:MyLanguage/Custom error pages">Custom error pages</a></li> <li><a href="/Special:MyLanguage/Customising_the_dynamic_page_title" title="Special:MyLanguage/Customising the dynamic page title">Customising the dynamic page title</a></li> <li><a href="/Special:MyLanguage/Customising_the_way_modules_are_displayed" title="Special:MyLanguage/Customising the way modules are displayed">Customising the way modules are displayed</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Declaring_module_positions" title="Special:MyLanguage/Declaring module positions">Declaring module positions</a></li> <li><a href="/Special:MyLanguage/Discover_your_template_css-styles_and_learn_how_to_change_them" title="Special:MyLanguage/Discover your template css-styles and learn how to change them">Discover your template css-styles and learn how to change them</a></li> <li><a href="/Special:MyLanguage/Distributing_Joomla!_templates" title="Special:MyLanguage/Distributing Joomla! templates">Distributing Joomla! templates</a></li></ul> </div> <div class="large-6 column"> <ul><li><a href="/Special:MyLanguage/Extension_Installer" title="Special:MyLanguage/Extension Installer">Extension Installer</a></li> <li><a href="/Special:MyLanguage/File_structure_for_packaging" title="Special:MyLanguage/File structure for packaging">File structure for packaging</a></li> <li><a href="/Special:MyLanguage/J3.x:Getting_Started_with_Templates" title="Special:MyLanguage/J3.x:Getting Started with Templates">Getting Started with Templates</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Giving_the_Front_Page_a_different_style_from_other_pages" title="Special:MyLanguage/Giving the Front Page a different style from other pages">Giving the Front Page a different style from other pages</a></li> <li><a href="/Special:MyLanguage/Hide_column_to_avoid_width_issues" title="Special:MyLanguage/Hide column to avoid width issues">Hide column to avoid width issues</a></li> <li><a href="/Special:MyLanguage/Horizontal_centering" title="Special:MyLanguage/Horizontal centering">Horizontal centering</a></li> <li><a href="/Special:MyLanguage/How_do_you_change_the_images_in_your_template%3F" title="Special:MyLanguage/How do you change the images in your template?">How do you change the images in your template?</a></li> <li><a href="/Special:MyLanguage/How_to_override_the_output_from_the_Joomla!_core" class="new" title="Special:MyLanguage/How to override the output from the Joomla! core (page does not exist)">How to override the output from the Joomla! core</a></li> <li><a href="/Special:MyLanguage/J3.x:Installing_a_template" title="Special:MyLanguage/J3.x:Installing a template">Installing a template</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/JDocumentHTML/countModules" class="new" title="Special:MyLanguage/JDocumentHTML/countModules (page does not exist)">JDocumentHTML/countModules</a></li> <li><a href="/Special:MyLanguage/Making_templates_translatable" title="Special:MyLanguage/Making templates translatable">Making templates translatable</a></li> <li><a href="/Special:MyLanguage/J3.x:Modifying_a_Joomla!_Template" title="Special:MyLanguage/J3.x:Modifying a Joomla! Template">Modifying a Joomla! Template</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/More_advanced_Joomla!_templates" title="Special:MyLanguage/More advanced Joomla! templates">More advanced Joomla! templates</a></li> <li><a href="/Special:MyLanguage/J3.x:Sharing_layouts_across_views_or_extensions_with_JLayout" title="Special:MyLanguage/J3.x:Sharing layouts across views or extensions with JLayout">Sharing layouts across views or extensions with JLayout</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/J3.x:Switching_templates" title="Special:MyLanguage/J3.x:Switching templates">Switching templates</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/J3.x:Templates_supplied_with_Joomla!" title="Special:MyLanguage/J3.x:Templates supplied with Joomla!">Templates supplied with Joomla!</a> <a href="/File:Compat_icon_3_x.png" class="image" title="Joomla 3.x"><img alt="Joomla 3.x" src="/images/4/4d/Compat_icon_3_x.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Migrating_a_Template_from_Joomla_1.5_to_3.x" title="Special:MyLanguage/Migrating a Template from Joomla 1.5 to 3.x">Migrating a Template from Joomla 1.5 to 3.x</a></li> <li><a href="/Special:MyLanguage/Understanding_Joomla!_templates" title="Special:MyLanguage/Understanding Joomla! templates">Understanding Joomla! templates</a></li> <li><a href="/Special:MyLanguage/J2.5:Upgrading_a_Joomla_1.5_template_to_Joomla_2.5" title="Special:MyLanguage/J2.5:Upgrading a Joomla 1.5 template to Joomla 2.5">Upgrading a Joomla 1.5 template to Joomla 2.5</a> <a href="/File:Compat_icon_2_5.png" class="image" title="Joomla 2.5"><img alt="Joomla 2.5" src="/images/5/53/Compat_icon_2_5.png" decoding="async" width="40" height="17" data-file-width="40" data-file-height="17" /></a></li> <li><a href="/Special:MyLanguage/Using_Class_Suffixes" title="Special:MyLanguage/Using Class Suffixes">Using Class Suffixes</a></li></ul> </div> </div>    </div></div></div><div class="printfooter"> Retrieved from "<a dir="ltr" href="https://docs.joomla.org/index.php?title=Portal:Template_Development&oldid=187756">https://docs.joomla.org/index.php?title=Portal:Template_Development&oldid=187756</a>"</div> <div class="clear_both"></div> </div> <div class="group"><div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/Category:Development" title="Category:Development">Development</a></li><li><a href="/Category:Template_Development" title="Category:Template Development">Template Development</a></li></ul></div></div></div> </article> </div> </div> <footer class="row"> <div id="footer"> <div id="footer-left" class="large-8 small-12 columns"> <ul id="footer-left"> <li id="footer-lastmod"> This page was last edited on 2 June 2015, at 12:27.</li> <li id="footer-copyright">Content is available under <a href="/JEDL" title="JEDL">Joomla! EDL</a> unless otherwise noted.<br>Joomla!<sup>®</sup> is a registered trademark of Open Source Matters, Inc.<br>If you are experiencing technical issues with this website, <html><a href="https://github.com/joomla/joomla-websites/issues/new?title=%5Bjdocs%5D%20&body=Please%20describe%20the%20problem%20or%20your%20issue" target="_blank" rel="nofollow">please report it</a> </html>. <br>Notice a content problem? <html><a href="/JDOC:How_to_Contribute_to_Joomla!_Documentation" rel="nofollow">Create an account</a> </html> and fix it.</li> <li id="footer-privacy"><a href="/JDOC:Privacy_policy" title="JDOC:Privacy policy">Privacy policy</a></li> <li id="footer-about"><a href="/JDOC:About" title="JDOC:About">About Joomla! Documentation</a></li> <li id="footer-disclaimer"><a href="/JDOC:General_disclaimer" class="mw-redirect" title="JDOC:General disclaimer">Terms of Service</a></li> </ul> </div> <div id="footer-right-icons" class="large-4 small-12 columns"> <ul id="poweredby"> <li class="copyright"> <a href="https://docs.joomla.org/JEDL" target="_blank"><img src="https://docs.joomla.org/skins/JEDL_icon.png" alt="Joomla! EDL" width="88" height="31" loading="lazy"/></a> </li> <li class="poweredby"> <a href="https://www.mediawiki.org/" target="_blank"><img src="/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"/></a> </li> <li class="rochen"> <a href="https://www.rochen.com/joomla-hosting" target="_blank"><img src="//cdn.joomla.org/rochen/rochen_footer_logo_white.png" alt="Joomla! Hosting by Rochen..." width="88" height="31" loading="lazy"/></a> </li> </ul> </div> </div> </footer> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgPageParseReport":{"limitreport":{"cputime":"0.128","walltime":"0.154","ppvisitednodes":{"value":731,"limit":1000000},"postexpandincludesize":{"value":12964,"limit":2097152},"templateargumentsize":{"value":2333,"limit":2097152},"expansiondepth":{"value":9,"limit":40},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":2181,"limit":5000000},"timingprofile":["100.00% 29.211 1 -total"," 35.19% 10.279 1 Portal:Template_Development/Intro/en"," 19.64% 5.738 1 Portal:Template_Development/Tutorials/en"," 18.42% 5.382 23 Template:JVer"," 15.89% 4.641 1 Template:Tip"," 14.41% 4.210 1 Portal:Template_Development/Reading_list/en"," 13.18% 3.851 1 Template:Top_portal_heading"," 10.24% 2.990 1 Template:AmboxNew"," 9.64% 2.816 3 Template:Section_portal_heading"," 7.13% 2.084 3 Template:JVer/multi"]},"cachereport":{"timestamp":"20241216073447","ttl":86400,"transientcontent":false}}});mw.config.set({"wgBackendResponseTime":345});});</script> </body>  </html>