2013
Lynda.com
Jen Kramer
5h7m
English
n this course, Jen Kramer shows how to build a custom Joomla! template that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices. This course covers using Joomla! 3 with its built-in Bootstrap framework, and a start-to-finish development strategy that covers everything from converting the wireframe to HTML, to styling the headers and footers. Jen also shows how to incorporate Dreamweaver and the Firefox developer tools into your workflow, and accommodate multiple layouts and color variations in a single template.
Topics include:
- Reviewing the graphic designs
- Creating HTML based on the Bootstrap framework
- Converting the HTML to a Joomla! template
- Installing the custom Joomla! template
- Using Firebug and the Firefox Web Developer Toolbar
- Styling the navigation bars
- Creating a dropdown menu
- Modifying the template for tablets and phones
- Working with advanced template features, like overrides
Introduction 4m 21s
Welcome 39s
Using the exercise files 1m 36s
Course prerequisites 2m 6s
1. What's New with Joomla! 3 Templates 12m 9s
Installing the starting state exercise files 6m 17s
Exploring template changes in Joomla! 3 2m 11s
Discussing CSS and LESS 3m 41s
2. Creating the HTML Starting File 33m 13s
Reviewing the graphic designs 3m 0s
Understanding Joomla! template file structures 5m 22s
Configuring a Dreamweaver site and populating it with Bootstrap CSS 9m 48s
Building the grid 10m 11s
Adding the Google font 2m 50s
Adding a custom style sheet 2m 2s
3. Converting the HTML Composition to a Joomla! Template 36m 58s
Understanding the index.php file 4m 48s
Converting from index.html to index.php 7m 41s
Using the module and component insertion code 7m 26s
Creating a template thumbnail and preview 2m 51s
Creating a favicon 2m 17s
Understanding the XML file 3m 54s
Creating a new XML file 5m 40s
Creating the ZIP package install 2m 21s
4. Installing the Joomla! Template Package File 19m 48s
Installing the package file 4m 5s
Fixing typical installation problems 5m 51s
Assigning modules to the correct positions 6m 7s
Fixing image paths 3m 45s
5. Working with CSS, index.php, and Joomla! 24m 29s
Using the Firefox Web Developer Toolbar 6m 14s
Using Firebug 2m 49s
Using ColorZilla 2m 42s
Dreamweaver CS6 and Joomla!: Setup 7m 21s
Dreamweaver CS6 and Joomla!: Workflows 5m 23s
6. Styling Your Joomla! Template for the Desktop 1h 20m
CSS workflows 6m 1s
Fixing the path to custom.css 2m 16s
Styling the header 5m 21s
Incorporating Bootstrap markup in the navigation HTML 6m 48s
Creating and styling a dropdown menu 6m 14s
Styling the navigation bar 9m 35s
Styling the navigation text 6m 47s
Styling the navigation indicator 2m 48s
Styling the navigation dropdowns 6m 45s
Styling the main content area 9m 8s
Styling the testimonials 7m 50s
Styling the breadcrumbs 1m 32s
Styling the search button 5m 31s
Styling the footer 4m 16s
7. Styling Your Template for Tablets and Phones 33m 48s
Styling the tablet and phone menu button 5m 55s
Styling the navigation bar for tablets and phones 8m 13s
Including the mobile logo 6m 49s
Styling the head of the mobile design 4m 36s
Styling the body and footer of the mobile design 8m 15s
8. Advanced Template Features 31m 22s
Assigning "optional regions" in a Joomla! template 5m 22s
Incorporating multiple layouts in a single Joomla! template 6m 37s
Working with template overrides 9m 55s
Layout overrides: Modules 9m 28s
9. Joomla! Template Styles: Creating Color Variations for Your Template 28m 53s
What is a template style? 5m 38s
Editing the XML file 6m 57s
Making changes to index.php for the logo upload 5m 44s
Making changes to index.php for the header background color 4m 48s
Configuring the styles 5m 46s
Conclusion 1m 59s
Next steps 1m 59s
http://www.lynda.com/Joomla-tutorials/Responsive-Design-Joomla/106699-2.html
Download File Size:809.91 MB
|
