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

  • 6,261 views
Uploaded on

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

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

More in: Technology , Travel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,261
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
69
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Joomla! & Bootstrap 3 Building a Joomla! Template with Bootstrap Version 3 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 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. A Comprehensive, Ready-to-go Joomla! Hosting Platform. Point, Click, Go! Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 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. Network Joomla! Backups Hosting Compliance CloudMail Joomla!Day™ Spain 2013 Training Domains 3rd Party Apps Twitter: @saurabhshah September 28th, 2013
  • 6. Who has built a custom Joomla! template before? Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 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. 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. Bootstrap V3 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 10. Step-by-step process of building a Joomla! Template Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 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. 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. Step 3 •  Thumbnail images, component.php file, favicon Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 14. Step 4 •  Create folder images, css, fonts, LESS and JS Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 15. Step 5 •  Language folder with description and files .ini, .sys.ini Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 16. Step 6 •  Zip the file and it is ready to install. Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 17. You’re ready to go ! Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 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/960x300 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 19. Are you a ninja now? Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013
  • 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