Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Joomla! & Bootstrap 3
Building a Joomla! Template
with Bootstrap Version 3

Joomla!Day™ Spain 2013

Twitter: @saurabhshah
...
I’m Saurabh
● 
● 

● 
● 

From Pune, India
Love Travel & Technology

Front-End Developer @ CloudAccess.net
Marketing, Soci...
A Comprehensive, Ready-to-go
Joomla! Hosting Platform.
Point, Click, Go!

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

S...
Over 8,500 Active Paying Clients
Schools

Small & Medium
Businesses

Enterprises

Nonprofits

Governments
Joomla!Day™ Spain...
Network

Joomla!

Backups

Hosting

Compliance

CloudMail

Joomla!Day™ Spain 2013

Training
Domains

3rd Party
Apps
Twitte...
Who has built a custom
Joomla! template before?

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 2013
Today’s Agenda
1. 
2. 
3. 
4. 

Useful Tools
Files & Directories
Bootstrap
Step-by-step coding with a demo site

Joomla!Da...
Useful Tools
• 
• 
• 
• 

Bootstrap V3 - http://getbootstrap.com/
Bootstrap V2.3.2 - http://getbootstrap.com/2.3.2/
Crunch...
Bootstrap V3

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 2013
Step-by-step process of
building a Joomla! Template

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 2013
Step 1
●  Create templatedetails.xml file – specifies information
about the template, including where the system can
find all...
Step 2
•  Create index.php file
•  The basic file that provides the logic and positioning for
the layout of the components a...
Step 3
•  Thumbnail images, component.php file, favicon

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 201...
Step 4
•  Create folder images, css, fonts, LESS and JS

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 20...
Step 5
•  Language folder with description and files .ini, .sys.ini

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

Septemb...
Step 6
•  Zip the file and it is ready to install.

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 2013
You’re ready to go !

Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 2013
Other useful sites
•  Tool to convert 2.x > 3.x Bootstrap code:
http://upgrade-bootstrap.bootply.com/
•  Bootstrap Upgrade...
Are you a ninja now?
Joomla!Day™ Spain 2013

Twitter: @saurabhshah

September 28th, 2013
Gracias
ध"यवाद
Thank you
Saurabh Shah
Twitter: @saurabhshah
Email: saurabh@cloudaccess.net
saurabh.ds16@gmail.com

Joomla!...
Nächste SlideShare
Wird geladen in …5
×

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

8.249 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Reisen

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

×