Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Joomla tempates talk
1. Creating a Joomla
Template
Hi Everyone
!
Thank you so much for coming I really appreciate you coming out for this talk
!
We’re going to talk about creating custom Joomla templates. Custom templates are really special in the joomla world, or any cms. Custom templates are
unique because they provide an alternative to theme clubs and templates you purchase there.
!
This allows for some great creativity to be expressed by developers and designers, which results in users really being engaged in your content and your
sites. Custom templates give sites a level of professionalism which raise the site above similar sites, creating a better user experience and ultimately a
better more useful website.
2. Table of Contents
・Tools & Utilities
・Code Editors
・Localhosts
・Anatomy of Templates
・Index.php - the brain
・Markup - the body
・template.css - look and feel
・templateDetails.xml - Wrapping paper
・Package & Install
I want to go over some tools utilities that we use to build templates. Mostly on the code side, we are not going to talk about design. I’m not a designer
I’m a developer. So we’ll specifically focus on code.
!
I’m going to go over in some pretty deep detail the anatomy of a joomla template. I’ll go over the elements and what they do and how they function.
!
The last thing I’ll show you is how to package and install a template into your Joomla website.
3. Tools of the Trade
Tools of the trade
!
Obviously templates are mostly code, so we are going to look at code editors.
4. Code Editor
This is a screenshot of a code editor called Sublime text. It’s not my number one editor but its one that I use a lot and enjoy.
5. Code Editor: Options
Sublime
Text
Coda PHPStorm Atom Notepad++
Free + Paid Paid Free Free
All Platforms OSX All Platforms All Platforms All Platforms
The first one is sublime text. its capable of editing any form of text like html, css, php, python. It has tons of plugins which make it very powerful. Available
for all platforms.
!
The other one is coda and I’ve used it. I don’t use it anymore - switched to Sublime. Coda 1 is what I used, coda 2 is out. It is a paid app. It’s a very nice
interface application, native application has a great UI and amazing tools built into. It’s created by the same developers who built Transmit.
!
PHP storm is not a regular text editor. It is an IDE, which is a integrated development which includes features like integration with tools like php unit.. This
is my number one editor. It is a paid application. It’s more functional than sublime or coda. It has debugging, break points, syntax error highlighting.
!
$30-40 personal license. It is by far my favorite editor that I love. I will use it forever!
!
The new editor on the block is called Atom. It’s produced by the developers of Github. It’s in beta form. OSX installer is an app. Windows and Linux
requires a build process with the binary. Free, beta status currently.
!
Notepad++ - Had to put this down because I felt like I had to. It’s a standard, go to editor. Many developers use it, many fans out there. Free, lots of
6. A few different languages
Languages
!
Building templates involves using more than one language.
7. Just to build a template!
(X)HTML CSS PHP XML Javascript
Skill
Level
Fluent Fluent Beginner Beginner Beginner
The first language is HTML. Or XHTML in this case. In the HTML world you should be fluent to expert level of understanding markup. You should
understand what HTML is what it does and how it functions.
!
CSS - Other major component of template. You should be fluent in CSS. Understand how selectors work. How an ID is different from a class, chaining, sub
class selectors. Understand how this works!
!
PHP that you will write is mostly copy paste. You won’t have to dream this up or write it from scratch. Copy paste, replace a few things but that’s it.
!
Same goes for XML. There is a minor XML element - specifically installing your template into a Joomla. You need to use XML to install your template.
Nothing crazy or fancy. Many examples of how to do this.
!
There is javascript, this is mostly optional. You don’t need to write. Most templates do have javascript, beginner level. I have done templates with tons of a
javascript and no javascript. Encourage how javascript works so you can debug and work through any issues you encounter.
8. Apache mySQL PHP
To Power Joomla
What do you need to power Joomla. You need a web server, in this case apache. There are other web servers capable of powering Joomla. You could run
Nginx, Litespeed, but Apache is the most popular.
!
Joomla supports multiple databases. You can run postgres and sql server. Most people use Mysql, mysql has been used in Joomla for the longest time.
Most support, least bugs. Use mysql. If you don’t know why you need postgres or sql server don’t use them.
!
PHP of course.
!
You need all this just to power joomla.
9. Localhosts
Homebrew XAMMP MAMP WAMP
Free Free Free+ Free
OSX All Platforms Win / Mac Windows
How can you get mysql and php and a web server on your machine?
!
A localhost is a great free way to do this. These are your options for doing that.
!
All of these apps are packaged server tools. They come as a single package which sets up mysql, php, and the web server on your machine. All of these
Apache. They are all free, MAMP offers a pro version.
!
Homebrew is different than these. Homebrew is a package manager that you install on your mac. It allows you use the command line to install many
applications. Apache, mysql, and php are all services that you install just like you would on a server. Homebrew allows you to do this on your mac. This is a
customized install and a great way to have a customized method.
!
I’ve used all of these methods, Homebrew is my current tool. If I was not using Homebrew I would xampp.
10. Anatomy of a Joomla Template
Those are the tools. Lets talk about the anatomy of a joomla template, the different elements.
11. index.php
template.css images/
templateDetails.xml
We have an index.php file. Images, css and other media.
!
What are these different elements have in terms of contents. We have javascript and compiled css.
Compiled CSS is it’s own topic, but it’s a language which is compiled and the compiler generates a static css. it’s the current trend in the web industry - I
use LESS. Joomla as a project has adopted LESS and compiled CSS. There are great features and benefits to doing this. This isn’t required but it’s a great
aid and tool for writing css.
12. index.php
template.css images/
templateDetails.xml
We have an index.php file. Images, css and other media.
!
What are these different elements have in terms of contents. We have javascript and compiled css.
Compiled CSS is it’s own topic, but it’s a language which is compiled and the compiler generates a static css. it’s the current trend in the web industry - I
use LESS. Joomla as a project has adopted LESS and compiled CSS. There are great features and benefits to doing this. This isn’t required but it’s a great
aid and tool for writing css.
13. index.php
template.css images/
templateDetails.xml
javascript
We have an index.php file. Images, css and other media.
!
What are these different elements have in terms of contents. We have javascript and compiled css.
Compiled CSS is it’s own topic, but it’s a language which is compiled and the compiler generates a static css. it’s the current trend in the web industry - I
use LESS. Joomla as a project has adopted LESS and compiled CSS. There are great features and benefits to doing this. This isn’t required but it’s a great
aid and tool for writing css.
14. index.php
template.css images/
templateDetails.xml
javascript
CompiledCSS
LESS/SCSS
We have an index.php file. Images, css and other media.
!
What are these different elements have in terms of contents. We have javascript and compiled css.
Compiled CSS is it’s own topic, but it’s a language which is compiled and the compiler generates a static css. it’s the current trend in the web industry - I
use LESS. Joomla as a project has adopted LESS and compiled CSS. There are great features and benefits to doing this. This isn’t required but it’s a great
aid and tool for writing css.
15. joomla root
| templates
| | my_template
| | | index.php
| | | templateDetails.xml
| | | favicon.ico
| | | images
| | | | logo.png
| | | css
| | | | template.css
The structure here is this
!
We have Joomla’s root. we have a template directory within that root. Template is adject to other folders like the admin application, the components,
modules, and plugins. Inside of templates we have default Joomla templates. Then you will have the template you’re building which I’ve called
my_template.
!
All our template stuff is stored here in a tiny little package.
16. joomla root
| templates
| | my_template
| | | index.php
| | | templateDetails.xml
| | | favicon.ico
| | | images
| | | | logo.png
| | | css
| | | | template.css
The structure here is this
!
We have Joomla’s root. we have a template directory within that root. Template is adject to other folders like the admin application, the components,
modules, and plugins. Inside of templates we have default Joomla templates. Then you will have the template you’re building which I’ve called
my_template.
!
All our template stuff is stored here in a tiny little package.
17. joomla root
| templates
| | my_template
| | | index.php
| | | templateDetails.xml
| | | favicon.ico
| | | images
| | | | logo.png
| | | css
| | | | template.css
All our template stuff is here
The structure here is this
!
We have Joomla’s root. we have a template directory within that root. Template is adject to other folders like the admin application, the components,
modules, and plugins. Inside of templates we have default Joomla templates. Then you will have the template you’re building which I’ve called
my_template.
!
All our template stuff is stored here in a tiny little package.
18. index.php - responsibilities
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
19. index.php - responsibilities
•Defines Doctype
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
20. index.php - responsibilities
•Defines Doctype
•Mostly HTML
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
21. index.php - responsibilities
•Defines Doctype
•Mostly HTML
•Should include <html>, <head> and <body>
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
22. index.php - responsibilities
•Defines Doctype
•Mostly HTML
•Should include <html>, <head> and <body>
•Some bits of PHP
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
23. index.php - responsibilities
•Defines Doctype
•Mostly HTML
•Should include <html>, <head> and <body>
•Some bits of PHP
•XHTML Keywords / Key-phrases
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
24. index.php - responsibilities
•Defines Doctype
•Mostly HTML
•Should include <html>, <head> and <body>
•Some bits of PHP
•XHTML Keywords / Key-phrases
•Modules
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
25. index.php - responsibilities
•Defines Doctype
•Mostly HTML
•Should include <html>, <head> and <body>
•Some bits of PHP
•XHTML Keywords / Key-phrases
•Modules
•Component
Index.php has a few responsibilities and does most of the work.
!
It is the ENTRY POINT into the template.
!
It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be.
!
Index.php - even though it has a php suffix / extension it is mostly markup.
!
The items that are not HTML I will point out.
It will define the html document, the head and the body are all defined in this file.
The minor bits of php which is copy / pastable into your specific purpose and needs.
!
There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from
26. index.php - Keywords / phrases
<html>
<head>
<jdoc:include type=“head” />
</head>
<body>
<main>
<jdoc:include type=“component” />
</main>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
</body>
</html>
This is a basic entry point - index.php
!
You can see it is mostly HTML. The elements that aren’t HTML are XHTML - these are the xhtml keywords / placeholders.
!
Type=header is the header of the html document
-File includes like css, javascript
-title tag, meta information
Inserted by Joomla’s app into the page.
!
The other xhtml element is the component - the current menu item component that is being loaded by the application.
!
The final element is the type= modules. Modules is different from component and head - it has a name parameter. this element can be used on the page
multiple times. You cannot use component or head multiple times. Modules can be used multiple times.
27. index.php - Keywords / phrases
<html>
<head>
<jdoc:include type=“head” />
</head>
<body>
<main>
<jdoc:include type=“component” />
</main>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
</body>
</html>
This is a basic entry point - index.php
!
You can see it is mostly HTML. The elements that aren’t HTML are XHTML - these are the xhtml keywords / placeholders.
!
Type=header is the header of the html document
-File includes like css, javascript
-title tag, meta information
Inserted by Joomla’s app into the page.
!
The other xhtml element is the component - the current menu item component that is being loaded by the application.
!
The final element is the type= modules. Modules is different from component and head - it has a name parameter. this element can be used on the page
multiple times. You cannot use component or head multiple times. Modules can be used multiple times.
28. index.php - Keywords / phrases
<html>
<head>
<jdoc:include type=“head” />
</head>
<body>
<main>
<jdoc:include type=“component” />
</main>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
</body>
</html>
Will be replaced with HTML
This is a basic entry point - index.php
!
You can see it is mostly HTML. The elements that aren’t HTML are XHTML - these are the xhtml keywords / placeholders.
!
Type=header is the header of the html document
-File includes like css, javascript
-title tag, meta information
Inserted by Joomla’s app into the page.
!
The other xhtml element is the component - the current menu item component that is being loaded by the application.
!
The final element is the type= modules. Modules is different from component and head - it has a name parameter. this element can be used on the page
multiple times. You cannot use component or head multiple times. Modules can be used multiple times.
29. index.php - Keywords / phrases
<html>
<head>
<jdoc:include type=“head” />
</head>
<body>
<main>
<jdoc:include type=“component” />
</main>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
</body>
</html>
Will be replaced with HTML
This is a basic entry point - index.php
!
You can see it is mostly HTML. The elements that aren’t HTML are XHTML - these are the xhtml keywords / placeholders.
!
Type=header is the header of the html document
-File includes like css, javascript
-title tag, meta information
Inserted by Joomla’s app into the page.
!
The other xhtml element is the component - the current menu item component that is being loaded by the application.
!
The final element is the type= modules. Modules is different from component and head - it has a name parameter. this element can be used on the page
multiple times. You cannot use component or head multiple times. Modules can be used multiple times.
30. index.php - Keywords / phrases
<html>
<head>
<jdoc:include type=“head” />
</head>
<body>
<main>
<jdoc:include type=“component” />
</main>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
</body>
</html>
Will be replaced with HTML
This is a basic entry point - index.php
!
You can see it is mostly HTML. The elements that aren’t HTML are XHTML - these are the xhtml keywords / placeholders.
!
Type=header is the header of the html document
-File includes like css, javascript
-title tag, meta information
Inserted by Joomla’s app into the page.
!
The other xhtml element is the component - the current menu item component that is being loaded by the application.
!
The final element is the type= modules. Modules is different from component and head - it has a name parameter. this element can be used on the page
multiple times. You cannot use component or head multiple times. Modules can be used multiple times.
31. index.php - useful PHP
<?php if($this->countModules(‘sidebar’): ?>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
<?php endif; ?>
Here’s where we get in the php.
!
The very first and last line here are PHP statements. The statement says if the count modules method is true print out the contents. When this is true the
module is inserted.
!
If this is false or any other value that is not true, the entire contents gets skipped and processing starts directly after the end of the php if statement.
!
There is another relationship between the PHP and the xhtml we should know about here.
32. index.php - useful PHP
<?php if($this->countModules(‘sidebar’): ?>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
<?php endif; ?>
Here’s where we get in the php.
!
The very first and last line here are PHP statements. The statement says if the count modules method is true print out the contents. When this is true the
module is inserted.
!
If this is false or any other value that is not true, the entire contents gets skipped and processing starts directly after the end of the php if statement.
!
There is another relationship between the PHP and the xhtml we should know about here.
33. index.php - useful PHP
<?php if($this->countModules(‘sidebar’): ?>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
<?php endif; ?>
If countModules() method is true print this out
Here’s where we get in the php.
!
The very first and last line here are PHP statements. The statement says if the count modules method is true print out the contents. When this is true the
module is inserted.
!
If this is false or any other value that is not true, the entire contents gets skipped and processing starts directly after the end of the php if statement.
!
There is another relationship between the PHP and the xhtml we should know about here.
34. index.php - useful PHP
<?php if($this->countModules(‘sidebar’): ?>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
<?php endif; ?>
If countModules() method is true print this out
Here’s where we get in the php.
!
The very first and last line here are PHP statements. The statement says if the count modules method is true print out the contents. When this is true the
module is inserted.
!
If this is false or any other value that is not true, the entire contents gets skipped and processing starts directly after the end of the php if statement.
!
There is another relationship between the PHP and the xhtml we should know about here.
35. index.php - useful PHP
<?php if($this->countModules(‘sidebar’): ?>
<aside>
<jdoc:include
type=“modules” name=“sidebar” />
</aside>
<?php endif; ?>
If countModules() method is true print this out
The module position name is used in both
Here’s where we get in the php.
!
The very first and last line here are PHP statements. The statement says if the count modules method is true print out the contents. When this is true the
module is inserted.
!
If this is false or any other value that is not true, the entire contents gets skipped and processing starts directly after the end of the php if statement.
!
There is another relationship between the PHP and the xhtml we should know about here.
