Create / Modification of templates for Joomla! At Joomla! Day Spain 2012

  • Published on
    15-Jan-2015

  • View
    5.039

  • Download
    2

DESCRIPTION

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

Transcript

<ul><li> 1. Saurabh ShahFront-End Developer @ CloudAccess.net Joomla! Events Team Member / Joomla! Social Network Team MemberCreate / Modification of templates for Joomla!Joomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah</li></ul> <p> 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 offersa. Virtual Private Memory Cloud(VPMC) - You needed a secure enterprise cloudplatform, and we built one. Weve bolted together the Joomla! VPMC to give you the worldsfastest dedicated Joomla! server.b. Compliant Cloud Backup &amp; Disaster Recovery - We will backup yourserver, computer, data center, or business to our data centers as a service.Joomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah 3. Useful ToolsBrowser 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.aspxhttp://imageoptim.com/ (Only Mac)Coding Specific :http://code.google.com/p/zen-coding/http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdfCoda2 / 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-frameworkT3 - JoomlArts - http://t3.joomlart.com/ (Coming soon)/http://www.joomlart.com/forums/downloads.php?do=cat&amp;id=316Vertex - Shape5 - http://www.shape5.com/joomla/framework/vertex_framework.htmlWright - Joomlashack - http://wright.joomlashack.com/Zen Grid - Joomlabamboo - http://www.joomlabamboo.com/joomla-templates/zen-grid-frameworkJoomla!Day Spain - Sept 28, 2012Saurabh 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.htmlConstruct - 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/exposeJoomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah 8. Bootstrap Templateshttp://hwdmediashare.co.uk/joomla-templates/116-strappedhttp://blank.vc/blog/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.htmlhttp://bootla.org/https://github.com/ivanramosnet/H5BPTBJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah 9. Create TemplatesThere 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 10. Create Template From Scratch1. Create index.php &amp; templateDetails.xml2. Add language files - en-GB.tpl_YOURTEMPLATE.ini &amp; en- GB.tpl_YOURTEMPLATE.sys.ini3. Add directory &amp; files Css, Javascript , language etc. And create a Zip file.Joomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah 11. Demo Lets see it in actionJoomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah 12. Adding/Creating Bootstrap Template1. Current bootstrap version : 2.1.1Download the zip files : http://twitter.github.com/bootstrap/ and unzip the package2. Copy the folders /assets into the /template/yourtemplate folder3. Enabling responsive features (Add meta , css and icon files etc.)Turn on responsive CSS in your project by including the proper meta tag and additionalstylesheet within the of your document. If youve compiled Bootstrap from theCustomize page, you need only include the meta tag.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 MenuModule to position top-menu. To match the correct CSS class I need to add " nav-dropdown" in the Menu Class Suffix (Extensions -&gt; Module Manager -&gt; Main Menu -&gt; Edit -&gt; Advanced Options)Joomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah 13. Demo Lets see it in actionJoomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah 14. DemoModifying the Gantry Based TemplateJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah 15. ConclusionI hope, you are now able to decide whether you want to gomore into Joomla templating with the Twitter Bootstrapframework or just choose with a ready made template/template framework.Joomla!Day Spain - Sept 28, 2012Saurabh Shah - @saurabhshah 16. Thank youTwitter : @saurabhshahEmail : saurabh.ds16@gmail.comWork : saurabh@cloudaccess.netJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah </p>