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

  • Published on
    23-Jan-2015

  • View
    6.325

  • Download
    0

DESCRIPTION

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

Transcript

  • 1. Joomla! & Bootstrap 3 Building a Joomla! Template with Bootstrap Version 3Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013

2. Im Saurabh From Pune, India Love Travel & TechnologyFront-End Developer @ CloudAccess.net Marketing, Social Media, Sales, Professional ServicesJoomlaholic Joomla! Events Team Member Joomla! Social Team Member Joomla! User Group Member Joomla! Day India OrganizerMozilla Representative (ReMo) Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 3. A Comprehensive, Ready-to-go Joomla! Hosting Platform. Point, Click, Go!Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 4. Over 8,500 Active Paying Clients SchoolsSmall & Medium BusinessesEnterprisesNonprotsGovernments Joomla!Day Spain 2013BanksTwitter: @saurabhshahHospitalsSeptember 28th, 2013 5. NetworkJoomla!BackupsHostingComplianceCloudMailJoomla!Day Spain 2013Training Domains3rd Party Apps Twitter: @saurabhshahSeptember 28th, 2013 6. Who has built a custom Joomla! template before?Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 7. Todays Agenda 1. 2. 3. 4.Useful Tools Files & Directories Bootstrap Step-by-step coding with a demo siteJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 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 TextJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 9. Bootstrap V3Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 10. Step-by-step process of building a Joomla! TemplateJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 11. Step 1 Create templatedetails.xml le species information about the template, including where the system can nd all the resources needed for the template.Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 12. Step 2 Create index.php le The basic le that provides the logic and positioning for the layout of the components and modules; your fundamental template le.Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 13. Step 3 Thumbnail images, component.php le, faviconJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 14. Step 4 Create folder images, css, fonts, LESS and JSJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 15. Step 5 Language folder with description and les .ini, .sys.iniJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 16. Step 6 Zip the le and it is ready to install.Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 17. Youre ready to go !Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 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/960x300Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 19. Are you a ninja now? Joomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013 20. Gracias " Thank you Saurabh Shah Twitter: @saurabhshah Email: saurabh@cloudaccess.net saurabh.ds16@gmail.comJoomla!Day Spain 2013Twitter: @saurabhshahSeptember 28th, 2013