Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Saurabh Shah                      Front-End Developer @ CloudAccess.net       Joomla! Events Team Member / Joomla! Social ...
CloudAccess.net Intro      - Official host for Joomla! Demo site http://www.demo.joomla.org/      - Launches more than 22,...
Useful Tools      Browser Specific:        Firebug : https://getfirebug.com/        Colorpicker :           Firefox : http...
Useful Tools (Conti…)      Photoshop / Design Tool Specific:      Color Theory : http://www.smashingmagazine.com/tag/color...
Useful Tools (Conti…)      Image Optimization :      http://www.imageoptimizer.net/Pages/Home.aspx      http://imageoptim....
Available Frameworks      *All framework status and links are added on 15th Sept. 2012 , It may change in the future.     ...
Available Frameworks      *All framework status and links are added on 15th Sept. 2012 , It may change in the future.     ...
Bootstrap Templates      http://hwdmediashare.co.uk/joomla-templates/116-strapped      http://blank.vc/blog/19-blank-templ...
Create Templates      There are 3 Ways to create it.      1. By copying an existing template and modify it      2. Install...
Create Template From Scratch      1. Create index.php & templateDetails.xml      2. Add language files - en-GB.tpl_YOURTEM...
Demo                                   Let’s see it in actionJoomla!Day Spain - Sept 28, 2012                            S...
Adding/Creating Bootstrap Template      1. Current bootstrap version : 2.1.1      Download the zip files : http://twitter....
Demo                                   Let’s see it in actionJoomla!Day Spain - Sept 28, 2012                            S...
Demo                  Modifying the Gantry Based TemplateJoomla!Day Spain - Sept 28, 2012                 Saurabh Shah - @...
Conclusion      I hope, you are now able to decide whether you want to go      more into Joomla templating with the Twitte...
Thank you        Twitter : @saurabhshah        Email : saurabh.ds16@gmail.com        Work : saurabh@cloudaccess.netJoomla!...
Upcoming SlideShare
Loading in …5
×

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

5,826 views

Published on

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

  • I want design site,

    how to?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

  1. 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. 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. Weve bolted together the Joomla! VPMC to give you the worlds 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. 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. 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. 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. 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-frameworkJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
  7. 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/exposeJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
  8. 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/H5BPTBJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
  9. 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. 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. 11. Demo Let’s see it in actionJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
  12. 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 youve 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. 13. Demo Let’s see it in actionJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
  14. 14. Demo Modifying the Gantry Based TemplateJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah
  15. 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. 16. Thank you Twitter : @saurabhshah Email : saurabh.ds16@gmail.com Work : saurabh@cloudaccess.netJoomla!Day Spain - Sept 28, 2012 Saurabh Shah - @saurabhshah

×