Presentation/Workshop on Create / Modification of templates for Joomla!

1. Saurabh Shah
Front-End Developer @ CloudAccess.net
Joomla! Events Team Member / Joomla! Social Network Team Member
Create / Modification of templates for Joomla!
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

2. CloudAccess.net Intro
- Official host for Joomla! Demo site http://www.demo.joomla.org/
- Launches more than 22,000 Demo sites per month.
- Launch as many Demo sites as you want.
- Also offers
a. Virtual Private Memory Cloud(VPMC) - You needed a secure enterprise cloud
platform, and we built one. We've bolted together the Joomla! VPMC to give you the world's
fastest dedicated Joomla! server.
b. Compliant Cloud Backup & Disaster Recovery - We will backup your
server, computer, data center, or business to our data centers as a service.
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

3. Useful Tools
Browser Specific:
Firebug : https://getfirebug.com/
Colorpicker :
Firefox : http://www.colorzilla.com/firefox/
Chrome : http://www.colorzilla.com/chrome/
PageSpeed : https://developers.google.com/speed/pagespeed/
YSlow : http://developer.yahoo.com/yslow/
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

4. Useful Tools (Conti…)
Photoshop / Design Tool Specific:
Color Theory : http://www.smashingmagazine.com/tag/color-theory/
http://kuler.adobe.com/
http://colorschemedesigner.com/
CSS3PS : http://css3ps.com/
CSSHat : http://csshat.com/ (Commercial)
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

5. Useful Tools (Conti…)
Image Optimization :
http://www.imageoptimizer.net/Pages/Home.aspx
http://imageoptim.com/ (Only Mac)
Coding Specific :
http://code.google.com/p/zen-coding/
http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf
Coda2 / SublimeText2 / Notepad++
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

6. Available Frameworks
*All framework status and links are added on 15th Sept. 2012 , It may change in the future.
Gantry - RocketTheme - http://www.gantry-framework.org/
Warp - YooTheme - http://www.yootheme.com/themes/warp-framework
T3 - JoomlArts - http://t3.joomlart.com/ (Coming soon)/
http://www.joomlart.com/forums/downloads.php?do=cat&id=316
Vertex - Shape5 - http://www.shape5.com/joomla/framework/vertex_framework.html
Wright - Joomlashack - http://wright.joomlashack.com/
Zen Grid - Joomlabamboo - http://www.joomlabamboo.com/joomla-templates/zen-grid-framework
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

7. Available Frameworks
*All framework status and links are added on 15th Sept. 2012 , It may change in the future.
Morph – JoomlaJunkie - http://getmorph.org/
JV – Joomlavi - http://www.joomlavi.com/joomla-extensions/jv-framework.html
Construct - betweenbrain.com - http://joomlaengineering.com/
Halix - JoomShaper - http://helix.joomshaper.com/
YJ Simple Grid - yoojoomla - http://yjsimplegrid.com/
Motif Cory Webb Media - http://themeables.com/motif/
Expose - Themexpert - http://www.themexpert.com/expose
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

8. Bootstrap Templates
http://hwdmediashare.co.uk/joomla-templates/116-strapped
http://blank.vc/blog/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.html
http://bootla.org/
https://github.com/ivanramosnet/H5BPTB
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

9. Create Templates
There are 3 Ways to create it.
1. By copying an existing template and modify it
2. Install a theme and modify it.
3. Creating a template from scratch.
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

10. Create Template From Scratch
1. Create index.php & templateDetails.xml
2. Add language files - en-GB.tpl_YOURTEMPLATE.ini & en-
GB.tpl_YOURTEMPLATE.sys.ini
3. Add directory & files – Css, Javascript , language etc. And create a Zip file.
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

11. Demo
Let’s see it in action
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

12. Adding/Creating Bootstrap Template
1. Current bootstrap version : 2.1.1
Download the zip files : http://twitter.github.com/bootstrap/ and unzip the package
2. Copy the folders /assets into the /template/yourtemplate folder
3. Enabling responsive features (Add meta , css and icon files etc.)
Turn on responsive CSS in your project by including the proper meta tag and additional
stylesheet within the <head> of your document. If you've compiled Bootstrap from the
Customize page, you need only include the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
4. Main body section can be copied from fluid.html
5. Add javascript files
6. Add html overrides to take most advantages of bootstrap (strapped/bootla/ H5BPTB)
7. Add suffix for Dropdown. I use the default Joomla example data and put the Main Menu
Module to position top-menu. To match the correct CSS class I need to add " nav-
dropdown" in the Menu Class Suffix (Extensions -> Module Manager -> Main Menu -> Edit -
> Advanced Options)
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

13. Demo
Let’s see it in action
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

14. Demo
Modifying the Gantry Based Template
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

15. Conclusion
I hope, you are now able to decide whether you want to go
more into Joomla templating with the Twitter Bootstrap
framework or just choose with a ready made template/
template framework.
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

16. Thank you
Twitter : @saurabhshah
Email : saurabh.ds16@gmail.com
Work : saurabh@cloudaccess.net
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah