Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013

7,856 views

Published on

Workshop on Joomla! Template with Bootstrap version 3 and showing off pros and cons with current Joomla! version 3.1 compatibility.

Published in: Technology, Travel

Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013

  1. 1. Joomla! & Bootstrap 3 Building a Joomla! Template with Bootstrap Version 3 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  2. 2. I’m Saurabh ●  ●  ●  ●  From Pune, India Love Travel & Technology Front-End Developer @ CloudAccess.net Marketing, Social Media, Sales, Professional Services ●  Joomlaholic Joomla! Events Team Member Joomla! Social Team Member Joomla! User Group Member Joomla! Day India Organizer ●  Mozilla Representative (ReMo) ●  ●  ●  ●  Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  3. 3. A Comprehensive, Ready-to-go Joomla! Hosting Platform. Point, Click, Go! Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  4. 4. Over 8,500 Active Paying Clients Schools Small & Medium Businesses Enterprises Nonprofits Governments Joomla!Day™ Spain 2013 Banks Twitter: @saurabhshah Hospitals September 28th, 2013
  5. 5. Network Joomla! Backups Hosting Compliance CloudMail Joomla!Day™ Spain 2013 Training Domains 3rd Party Apps Twitter: @saurabhshah September 28th, 2013
  6. 6. Who has built a custom Joomla! template before? Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  7. 7. Today’s Agenda 1.  2.  3.  4.  Useful Tools Files & Directories Bootstrap Step-by-step coding with a demo site Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  8. 8. Useful Tools •  •  •  •  Bootstrap V3 - http://getbootstrap.com/ Bootstrap V2.3.2 - http://getbootstrap.com/2.3.2/ Crunch - http://crunchapp.net/ Editor – Coda / Notepad++ / Sublime Text Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  9. 9. Bootstrap V3 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  10. 10. Step-by-step process of building a Joomla! Template Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  11. 11. Step 1 ●  Create templatedetails.xml file – specifies information about the template, including where the system can find all the resources needed for the template. Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  12. 12. Step 2 •  Create index.php file •  The basic file that provides the logic and positioning for the layout of the components and modules; your fundamental template file. Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  13. 13. Step 3 •  Thumbnail images, component.php file, favicon Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  14. 14. Step 4 •  Create folder images, css, fonts, LESS and JS Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  15. 15. Step 5 •  Language folder with description and files .ini, .sys.ini Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  16. 16. Step 6 •  Zip the file and it is ready to install. Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  17. 17. You’re ready to go ! Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  18. 18. Other useful sites •  Tool to convert 2.x > 3.x Bootstrap code: http://upgrade-bootstrap.bootply.com/ •  Bootstrap Upgrader: http://code.divshot.com/bootstrap3_upgrader/ •  PlaceHolder – For creating Images as a placeholder: http://placehold.it/960x300 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  19. 19. Are you a ninja now? Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  20. 20. Gracias ध"यवाद Thank you Saurabh Shah Twitter: @saurabhshah Email: saurabh@cloudaccess.net saurabh.ds16@gmail.com Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013

×