Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013
-
Upload
saurabh-shah -
Category
Technology
-
view
6.336 -
download
0
description
Transcript of Joomla! Template with Bootstrap 3 - Joomla!Day Spain 2013
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
Joomla! & Bootstrap 3 Building a Joomla! Template
with Bootstrap Version 3
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
● Joomlaholic ● Joomla! Events Team Member ● Joomla! Social Team Member ● Joomla! User Group Member ● Joomla! Day India Organizer
I’m Saurabh
● Front-End Developer @ CloudAccess.net ● Marketing, Social Media, Sales, Professional Services
● Mozilla Representative (ReMo)
● From Pune, India ● Love Travel & Technology
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
A Comprehensive, Ready-to-go Joomla! Hosting Platform.
Point, Click, Go!
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah Hospitals
Nonprofits
Governments
Small & Medium Businesses
Enterprises
Banks
Schools
Over 8,500 Active Paying Clients
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
Hosting Backups
Network
Compliance
Domains
Training
3rd Party Apps
Joomla!
CloudMail
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
Who has built a custom Joomla! template before?
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
Today’s Agenda 1. Useful Tools 2. Files & Directories 3. Bootstrap 4. Step-by-step coding with a demo site
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
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
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
Bootstrap V3
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
Step-by-step process of building a Joomla! Template
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah September 28th, 2013 Joomla!Day™ Spain 2013
● Create templatedetails.xml file – specifies information about the template, including where the system can find all the resources needed for the template.
Step 1
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
• 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.
Step 2
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
• Thumbnail images, component.php file, favicon
Step 3
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
• Create folder images, css, fonts, LESS and JS
Step 4
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
• Language folder with description and files .ini, .sys.ini
Step 5
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
• Zip the file and it is ready to install.
Step 6
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
You’re ready to go !
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
• 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
Other useful sites
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
Are you a ninja now?
September 28th, 2013 Joomla!Day™ Spain 2013 Twitter: @saurabhshah
Gracias ध"यवाद
Thank you
Saurabh Shah Twitter: @saurabhshah