Kyle Ledbetter, profile picture
Uploaded byKyle Ledbetter
PPT, PDF1,562 views

Joomla Day Austin Part 3

Joomla Day Austin Texas 2011 - Part 3

Embed presentation

Downloaded 47 times
 
 
Template Time! - index.php from index.html - component.php - templateDetails.xml
index.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?> <?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; >
index.php head <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head>
Replace Placeholders w/ Joomla Tags <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-1 active&quot;> <a href=&quot;#&quot;>Home</a> </li> <li class=&quot;item-2&quot;> <a href=&quot;#&quot;>Minis</a> </li> <li class=&quot;item-3&quot;> <a href=&quot;#&quot;>Programs</a> </li> <li class=&quot;item-13&quot;> <a href=&quot;#&quot;>Facebook</a> </li> <li class=&quot;item-14&quot;> <a href=&quot;#&quot;>Twitter</a> </li> </ul><!--End Placeholder--> Becomes: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; />
Module Tag Styles Menus don’t need div wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; /> Banners need the wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; />
Simple Conditionals <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?>
Conent/Component Code <div id=&quot;content&quot; class=&quot;width-65&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;before&quot; style=&quot;xhtml&quot; /> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;after&quot; style=&quot;xhtml&quot; /> <div class=&quot;clr&quot;></div> </div>
Don’t forget debug! Place a debug module position right before the </body> <jdoc:include type=&quot;modules&quot; name=&quot;debug&quot; style=&quot;xhtml&quot; />
Content Conditional If Sidebar “ width-65” will make the content smaller and float left, so only use if there’s a module in sidebar: <div id=&quot;content&quot; class=&quot;width-65&quot;> becomes: <div id=&quot;content&quot; <?php if($this->countModules('sidebar')) : ?> class=&quot;width-65&quot; <?php endif; ?>>
Dynamic Copyright <p>&copy; 2011 Minis and Friends. All rights reserved.</p> becomes: <p>&copy; <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>. All rights reserved.</p>
Useful Variables /* The following 5 lines get current page variables */$option = JRequest::getCmd('option', '');$view = JRequest::getCmd('view', '');$layout = JRequest::getCmd('layout', '');$task = JRequest::getCmd('task', '');$itemid = JRequest::getCmd('Itemid', '');/* The following 6 lines set a variable to true if we're on the site default menu item (home) */$menu = & JSite::getMenu();if ($menu->getActive() == $menu->getDefault()) :$active = &quot;homepage&quot;;else:$active = &quot;subpage&quot;;endif;
component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
Echo Variables as Body Classes <body id=&quot;site&quot; class=&quot;<?php echo $option . &quot; view-&quot; . $view . &quot; layout-&quot; . $layout . &quot; task-&quot; . $task . &quot; itemid-&quot; . $itemid . &quot; &quot; . $active;?>&quot;> which will result in something like: <body id=&quot;site&quot; class=&quot;com_content view-category layout-blog task- itemid-65 homepage&quot;> which can be extremely useful styling hooks when the markup of the page lacks taxonomy
template_preview.png 640x384px .png
template_thumbnail.png 206x150px .png
Language Files create directories: /language/en-GB/ 2 files: en-GB.tpl_ minis .ini (language for template) en-GB.tpl_ minis .sys.ini (language for parameters)
templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> </extension>
templateDetails.xml <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Co pyright 2011 Minis and Friends. All rights reserved.</copyright> <description>Minis and Friends Template</description>
templateDetails.xml <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files>
templateDetails.xml <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages>
templateDetails.xml <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> < these match these >
templateDetails.xml <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config>
Complete templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Copyright 2011 Minis and Frien ds. All rights reserved.</ copyright> <description>Minis and Friends Template</description> <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files> <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages> <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config> </extension>
Create favicon.gif
Favicon Generator
Template Directory
Zip it up!
Install & Cross Fingers
Success!
HTML Template Overrides - Don’t hack the core! - Change views from MVC components
Change a core output I don’t want an edit icon and I want it to float next to the title
Find the view
Copy into your template
Edit to your liking
Andy’s Alternate “Templatization” Start from scratch? Start with a Template Framework? Development Options:
Pros for “Starting from Scratch” “Starting from Scratch” Fast development process if design is simple Don’t need to learn a framework Faster performance No design restrictions
Pros for “Starting with Framework” “ Starting with Framework” Faster development if you are already familiar with the template framework Built in styling taken care off Lots of functionality for free Base template to start from
 
 
index.php
 
templateDetails.xml
template-options.xml
style configuration
 
 

More Related Content

PPT
CSS Technieken Toegelicht
byTweepixels
 
PPT
Joomla Day Austin Part 2
byKyle Ledbetter
 
PPT
Creación aplicación Web base struts2
byPablo Andres Cáceres Ferreira
 
PPT
Manual al-aire
bytoponerae
 
PPT
Ph pmysql
byMhail Djie
 
PDF
Thinking about CSS Architecture
by拓樹 谷
 
ODP
Form refactoring
byManuel Baldassarri
 
PDF
CSS設計の理想と現実
by拓樹 谷
 
CSS Technieken Toegelicht
byTweepixels
 
Joomla Day Austin Part 2
byKyle Ledbetter
 
Creación aplicación Web base struts2
byPablo Andres Cáceres Ferreira
 
Manual al-aire
bytoponerae
 
Ph pmysql
byMhail Djie
 
Thinking about CSS Architecture
by拓樹 谷
 
Form refactoring
byManuel Baldassarri
 
CSS設計の理想と現実
by拓樹 谷
 

What's hot

PDF
Professional Web Development
byJoseph Chiang
 
PPT
Presentation1
byTom Flo
 
PPTX
Html5
byMirko Fichtner
 
PPT
Yurany presentacion
byyurany1016
 
PDF
メンテナブルでありつづけるためのCSS設計
by拓樹 谷
 
DOCX
Valle San Giovanni
byStefano Ulissi
 
PPTX
Taller de PHP + Code Igniter
byCrysfel Villa
 
PPT
Spring Capitulo 04
byDiego Pacheco
 
PDF
CSS Components
by拓樹 谷
 
PDF
Why Sass?
by拓樹 谷
 
PPS
Mario Benedetti. No te rindas
byManuel Gimon
 
PDF
My four preferences in Perl Web practices
byAndrew Shitov
 
ODP
Drupal Theming Hans Rossel
byHans Rossel
 
PPT
databaseapplication.ppt
bywebhostingguy
 
PDF
Basic HTML
byMd Rubel Hossain
 
Professional Web Development
byJoseph Chiang
 
Presentation1
byTom Flo
 
Html5
byMirko Fichtner
 
Yurany presentacion
byyurany1016
 
メンテナブルでありつづけるためのCSS設計
by拓樹 谷
 
Valle San Giovanni
byStefano Ulissi
 
Taller de PHP + Code Igniter
byCrysfel Villa
 
Spring Capitulo 04
byDiego Pacheco
 
CSS Components
by拓樹 谷
 
Why Sass?
by拓樹 谷
 
Mario Benedetti. No te rindas
byManuel Gimon
 
My four preferences in Perl Web practices
byAndrew Shitov
 
Drupal Theming Hans Rossel
byHans Rossel
 
databaseapplication.ppt
bywebhostingguy
 
Basic HTML
byMd Rubel Hossain
 

More from Kyle Ledbetter

PDF
Joomla 3.0 Keynote
byKyle Ledbetter
 
PDF
Bootstrapping Joomla 3.0
byKyle Ledbetter
 
PDF
Projectfork 4.0
byKyle Ledbetter
 
ZIP
Joomla User eXperience - Joomla Day NYC 2011
byKyle Ledbetter
 
PPT
Joomla Day Austin Part 4
byKyle Ledbetter
 
PPT
Joomla Day Austin Part 1
byKyle Ledbetter
 
KEY
JUX - Joomla User eXperience
byKyle Ledbetter
 
PPTX
Making Joomla's Admin Interface Awesome
byKyle Ledbetter
 
PPTX
Mobile Your Joomla Site
byKyle Ledbetter
 
PPTX
Transform Your Joomla Admin
byKyle Ledbetter
 
PPTX
Mobilize Joomla
byKyle Ledbetter
 
PPT
Manage Your Projects Better With Projectfork
byKyle Ledbetter
 
PPT
Web Design Essentials
byKyle Ledbetter
 
Joomla 3.0 Keynote
byKyle Ledbetter
 
Bootstrapping Joomla 3.0
byKyle Ledbetter
 
Projectfork 4.0
byKyle Ledbetter
 
Joomla User eXperience - Joomla Day NYC 2011
byKyle Ledbetter
 
Joomla Day Austin Part 4
byKyle Ledbetter
 
Joomla Day Austin Part 1
byKyle Ledbetter
 
JUX - Joomla User eXperience
byKyle Ledbetter
 
Making Joomla's Admin Interface Awesome
byKyle Ledbetter
 
Mobile Your Joomla Site
byKyle Ledbetter
 
Transform Your Joomla Admin
byKyle Ledbetter
 
Mobilize Joomla
byKyle Ledbetter
 
Manage Your Projects Better With Projectfork
byKyle Ledbetter
 
Web Design Essentials
byKyle Ledbetter
 

Joomla Day Austin Part 3

  • 1.
  • 2.
  • 3.
    Template Time! -index.php from index.html - component.php - templateDetails.xml
  • 4.
    index.php <?php/* Thefollowing line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?> <?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; >
  • 5.
    index.php head <head><!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head>
  • 6.
    Replace Placeholders w/Joomla Tags <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-1 active&quot;> <a href=&quot;#&quot;>Home</a> </li> <li class=&quot;item-2&quot;> <a href=&quot;#&quot;>Minis</a> </li> <li class=&quot;item-3&quot;> <a href=&quot;#&quot;>Programs</a> </li> <li class=&quot;item-13&quot;> <a href=&quot;#&quot;>Facebook</a> </li> <li class=&quot;item-14&quot;> <a href=&quot;#&quot;>Twitter</a> </li> </ul><!--End Placeholder--> Becomes: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; />
  • 7.
    Module Tag StylesMenus don’t need div wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; /> Banners need the wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; />
  • 8.
    Simple Conditionals <?phpif($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?>
  • 9.
    Conent/Component Code <divid=&quot;content&quot; class=&quot;width-65&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;before&quot; style=&quot;xhtml&quot; /> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;after&quot; style=&quot;xhtml&quot; /> <div class=&quot;clr&quot;></div> </div>
  • 10.
    Don’t forget debug!Place a debug module position right before the </body> <jdoc:include type=&quot;modules&quot; name=&quot;debug&quot; style=&quot;xhtml&quot; />
  • 11.
    Content Conditional IfSidebar “ width-65” will make the content smaller and float left, so only use if there’s a module in sidebar: <div id=&quot;content&quot; class=&quot;width-65&quot;> becomes: <div id=&quot;content&quot; <?php if($this->countModules('sidebar')) : ?> class=&quot;width-65&quot; <?php endif; ?>>
  • 12.
    Dynamic Copyright <p>&copy;2011 Minis and Friends. All rights reserved.</p> becomes: <p>&copy; <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>. All rights reserved.</p>
  • 13.
    Useful Variables /*The following 5 lines get current page variables */$option = JRequest::getCmd('option', '');$view = JRequest::getCmd('view', '');$layout = JRequest::getCmd('layout', '');$task = JRequest::getCmd('task', '');$itemid = JRequest::getCmd('Itemid', '');/* The following 6 lines set a variable to true if we're on the site default menu item (home) */$menu = & JSite::getMenu();if ($menu->getActive() == $menu->getDefault()) :$active = &quot;homepage&quot;;else:$active = &quot;subpage&quot;;endif;
  • 14.
    component.php <?php/* Thefollowing line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
  • 15.
    component.php <?php/* Thefollowing line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
  • 16.
    Echo Variables asBody Classes <body id=&quot;site&quot; class=&quot;<?php echo $option . &quot; view-&quot; . $view . &quot; layout-&quot; . $layout . &quot; task-&quot; . $task . &quot; itemid-&quot; . $itemid . &quot; &quot; . $active;?>&quot;> which will result in something like: <body id=&quot;site&quot; class=&quot;com_content view-category layout-blog task- itemid-65 homepage&quot;> which can be extremely useful styling hooks when the markup of the page lacks taxonomy
  • 17.
  • 18.
  • 19.
    Language Files createdirectories: /language/en-GB/ 2 files: en-GB.tpl_ minis .ini (language for template) en-GB.tpl_ minis .sys.ini (language for parameters)
  • 20.
    templateDetails.xml <?xml version=&quot;1.0&quot;encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> </extension>
  • 21.
    templateDetails.xml <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Co pyright 2011 Minis and Friends. All rights reserved.</copyright> <description>Minis and Friends Template</description>
  • 22.
    templateDetails.xml <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files>
  • 23.
    templateDetails.xml <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages>
  • 24.
    templateDetails.xml <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> < these match these >
  • 25.
    templateDetails.xml <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config>
  • 26.
    Complete templateDetails.xml <?xmlversion=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Copyright 2011 Minis and Frien ds. All rights reserved.</ copyright> <description>Minis and Friends Template</description> <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files> <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages> <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config> </extension>
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
    HTML Template Overrides- Don’t hack the core! - Change views from MVC components
  • 34.
    Change a coreoutput I don’t want an edit icon and I want it to float next to the title
  • 35.
  • 36.
  • 37.
  • 38.
    Andy’s Alternate “Templatization”Start from scratch? Start with a Template Framework? Development Options:
  • 39.
    Pros for“Starting from Scratch” “Starting from Scratch” Fast development process if design is simple Don’t need to learn a framework Faster performance No design restrictions
  • 40.
    Pros for “Starting with Framework” “ Starting with Framework” Faster development if you are already familiar with the template framework Built in styling taken care off Lots of functionality for free Base template to start from
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.

Editor's Notes

  • #10 - make sure to include the “message” for system messages - “component” loads your main Joomla component - place modules before and after component for later convenience
  • #11 - this will allow the debug to appear if turned on, and is a great module position for javascript to be executed at the end of the page (like Google analytics)
  • #15 - this is used to load modal windows and for loading the component without the template around it - basically a stripped down version of your index.php
  • #16 - this is used to load modal windows and for loading the component without the template around it - basically a stripped down version of your index.php
  • #22 - don’t use an &amp; sign! must be &amp;amp; or “and”
  • #23 - include entire folders w/ &lt;folder&gt;
  • #28 - must be square - best if transparent gif
  • #29 - generates favicon.ico for you
  • #30 - directories can’t be empty, at least drop in an index.html
  • #31 - recommend BetterZip on OSX to make sure you don’t zip hidden files - zip the files, not the surrounding folder
  • #32 - recommend BetterZip on OSX to make sure you don’t zip hidden files - zip the files, not the surrounding folder
  • #33 - this is after setting up categories, blank articles, menus, and modules