create / modification of templates for joomla! at joomla! day spain 2012
DESCRIPTION
Presentation/Workshop on Create / Modification of templates for Joomla!TRANSCRIPT
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
Saurabh ShahFront-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
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
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
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
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
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
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
Bootstrap Templates
http://hwdmediashare.co.uk/joomla-templates/116-strapped http://blank.vc/blog/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.htmlhttp://bootla.org/ https://github.com/ivanramosnet/H5BPTB
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
Create Templates
There are 3 Ways to create it.
1. By copying an existing template and modify it2. Install a theme and modify it.3. Creating a template from scratch.
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
Create Template From Scratch
1. Create index.php & templateDetails.xml2. Add language files - en-GB.tpl_YOURTEMPLATE.ini & en-
GB.tpl_YOURTEMPLATE.sys.ini3. Add directory & files – Css, Javascript , language etc. And create a Zip file.
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
DemoLet’s see it in action
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
Adding/Creating Bootstrap Template
1. Current bootstrap version : 2.1.1Download 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.html5. Add javascript files6. 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
DemoLet’s see it in action
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
DemoModifying the Gantry Based Template
Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
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
Thank you
Twitter : @saurabhshah
Email : [email protected]
Work : [email protected]