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.

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

8,240 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

×