advertisement

Joomla Template Development

50 %
50 %
advertisement
Information about Joomla Template Development
Technology

Published on February 17, 2009

Author: JoomlaChicago

Source: slideshare.net

Description

How to develop a template using Joomla by Robert Jacobi, ARC Technology Group for JoomlaChicago User Group. February, 2009.
advertisement

TEMPLATE DEVELOPMENT Robert Jacobi, Arc Technology Group Tuesday, February 17, 2009 1

THE PIECES • Directory Structure • templateDetails.xml • params.ini • index.php • style.css Tuesday, February 17, 2009 2

DIRECTORY STRUCTURE • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla %21_template • Template Name for Root • css/ • images/ Tuesday, February 17, 2009 3

DIRECTORY STRUCTURE • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla %21_template • Template Name for Root • css/ • images/ Tuesday, February 17, 2009 3

IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4

IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4

TEMPLATEDETAILS.XML • <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> • <!DOCTYPE install PUBLIC quot;-//Joomla! 1.5//DTD template 1.0//ENquot; quot;http://dev.joomla.org/xml/1.5/template-install.dtdquot;> • <install version=quot;1.5quot; type=quot;templatequot;> Tuesday, February 17, 2009 5

DESCRIPTION ELEMENTS • <name>tba</name> • <creationDate>2009-02-01</creationDate> • <author>Arc Technology Group</author> • <authorEmail>solutions@arctg.com</authorEmail> • <authorUrl>http://www.arctg.com</authorUrl> • <copyright>Arc Technology Group</copyright> Tuesday, February 17, 2009 6

FILES AND POSITIONS • <files><filename>relative_path/file_name</filename></files> • <positions><position>name</position></positions> Tuesday, February 17, 2009 7

PARAMS • http://docs.joomla.org/Tutorial:Template_parameters • <params><param ...>...</param></params> Tuesday, February 17, 2009 8

PARAMS AND PARAMS.INI • <params> • <param name=quot;templateColorquot; type=quot;listquot; default=quot;whitequot; label=quot;Template Colorquot; description=quot;Choose the template color.quot;> <option value=quot;whitequot;>White</option> <option value=quot;blackquot;>Black</option> </param> • </params> Tuesday, February 17, 2009 9

PARAMS AND PARAMS.INI • templateColor=white Tuesday, February 17, 2009 10

PARAMS AND PARAMS.INI • templateColor=white Tuesday, February 17, 2009 10

INDEX.PHP • Restrict access and describe document • <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> • <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtdquot;> • <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;<? php echo $this->language; ?>quot; lang=quot;<?php echo $this- >language; ?>quot; > Tuesday, February 17, 2009 11

INDEX.PHP • Add header code and css • <head> • <jdoc:include type=quot;headquot; /> • <link rel=quot;stylesheetquot; href=quot;<?php echo $this->baseurl ?>/ templates/mynewtemplate/css/style.cssquot; type=quot;text/cssquot; /> • </head> Tuesday, February 17, 2009 12

INDEX.PHP • Add modules and component • <body> <jdoc:include type=quot;modulesquot; name=quot;topquot; /> • <jdoc:include type=quot;componentquot; /> • <jdoc:include type=quot;modulesquot; name=quot;footerquot; /> • • </body></html> Tuesday, February 17, 2009 13

INDEX.PHP • Add modules and component • <body> <jdoc:include type=quot;modulesquot; name=quot;topquot; /> • <jdoc:include type=quot;componentquot; /> • <jdoc:include type=quot;modulesquot; name=quot;footerquot; /> • • </body></html> Tuesday, February 17, 2009 13

ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14

ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14

ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14

TAYLOR BRUCE INDEX.PHP • Header changes from basic template • <link rel=quot;stylesheetquot; href=quot;<?php echo $this->baseurl . '/ templates/' . $this->template . '/css/style.css' ?>quot; type=quot;text/cssquot; /> • <link rel=quot;stylesheetquot; href=quot;<?php $tplColor = $this->params->get( 'templateColor' ); echo $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor . '.css'; ?>quot; type=quot;text/cssquot; /> Tuesday, February 17, 2009 15

TAYLOR BRUCE INDEX.PHP • <?php echo $this->baseurl . '/templates/' . $this->template . '/ images/taylor-bruce-logo.gif' ?> • <?php if($this->countModules('debug')) : ?> <jdoc:include type=quot;modulesquot; name=quot;debugquot; /> <?php endif; ?> • <?php echo JHTML::_('date', 'now', '%Y' ) ?> Tuesday, February 17, 2009 16

TAYLOR BRUCE INDEX.PHP • <?php echo $this->baseurl . '/templates/' . $this->template . '/ images/taylor-bruce-logo.gif' ?> • <?php if($this->countModules('debug')) : ?> <jdoc:include type=quot;modulesquot; name=quot;debugquot; /> <?php endif; ?> • <?php echo JHTML::_('date', 'now', '%Y' ) ?> Tuesday, February 17, 2009 16

ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17

ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17

ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18

ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18

ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18

ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18

ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18

TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19

TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19

ADVANCED TOPICS STYLES • Module Styles • none. Output the raw Module content with no wrapping. • table. Output the module in a table. • horz. Output the module as a table inside an outer table. • xhtml. Output the module wrapped in div tags. • rounded. Output the module wrapped in nested div tags to support rounded corners. Tuesday, February 17, 2009 20

ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21

ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21

ADVANCED TOPICS OUTPUT OVERRIDE • http://developer.joomla.org/tutorials/165-understanding- output-overrides-in-joomla.html • Component Overrides • Module Overrides Tuesday, February 17, 2009 22

THANK YOU Tuesday, February 17, 2009 23

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Portal:Template Development - Joomla! Documentation

A template is a type of Joomla! extension that changes the way your site looks. There are two types of templates used by the Joomla! CMS: Front-end ...
Read more

Category:Template Development - Joomla! Documentation

Pages in category "Template Development" The following 128 pages are in this category, out of 128 total.
Read more

Jextn | Joomla Development Company | Joomla Developer

Jextn, is one of the leading Joomla Development Companies globally. Being a Joomla Development Company we offer various Joomla services to the clients.
Read more

Template Development - Joomla Resources Directory

4Web Inc. creates highly customized websites using the Joomla! platforms. We specialize in creating custom responsive templates by working closely with ...
Read more

Joomla! Developer Network

Announcing the New Developer Relations Program for Joomla! We are thrilled to announce the launch of the new Developer Relations Team for Joomla!
Read more

Joomla (CMS) Web Development Consulting Company in India

Joomla is user friendly and mobile ready open source technology for web development. Hire dedicated Joomla developers for CMS website design and consulting ...
Read more

Joomla Template for Software Development Company ...

Eclipse was created for software or digital product download websites, but its use is not limited to this category only. The template can be used basically ...
Read more

Crash Course: Create a Joomla! Template from Scratch

Crash Course: Create a Joomla! Template from Scratch. By Michael Rohde. ... If you're accustomed to using web development software to create your sites, ...
Read more

Joomla CMS Downloads - Templates und Erweiterungen

Portal zum Joomla Content Management System (CMS). Downloads, Berichte und Kommentare zu aktuellen Entwicklungen zum CMS.
Read more

Custom Joomla Development - Free Joomla Templates - Best ...

I’m a full time web developer since 2008. Have worked with many companies, across Europe and the US, offering custom Joomla development and consultation.
Read more