2013
Lynda
Jen Kramer
5:08
English
In 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.
Introduction
Welcome
Using the exercise files
Course prerequisites
1. What's New with Joomla! 3 Templates
Installing the starting state exercise files
Exploring template changes in Joomla! 3
Discussing CSS and LESS
2. Creating the HTML Starting File
Reviewing the graphic designs
Understanding Joomla! template file structures
Configuring a Dreamweaver site and populating it with Bootstrap CSS
Building the grid
Adding the Google font
Adding a custom style sheet
3. Converting the HTML Composition to a Joomla! Template
Understanding the index.php file
Converting from index.html to index.php
Using the module and component insertion code
Creating a template thumbnail and preview
Creating a favicon
Understanding the XML file
Creating a new XML file
Creating the ZIP package install
4. Installing the Joomla! Template Package File
Installing the package file
Fixing typical installation problems
Assigning modules to the correct positions
Fixing image paths
5. Working with CSS, index.php, and Joomla!
Using the Firefox Web Developer Toolbar
Using Firebug
Using ColorZilla
Dreamweaver CS6 and Joomla!: Setup
Dreamweaver CS6 and Joomla!: Workflows
6. Styling Your Joomla! Template for the Desktop
CSS workflows
Fixing the path to custom.css
Styling the header
Incorporating Bootstrap markup in the navigation HTML
Creating and styling a dropdown menu
Styling the navigation bar
Styling the navigation text
Styling the navigation indicator
Styling the navigation dropdowns
Styling the main content area
Styling the testimonials
Styling the breadcrumbs
Styling the search button
Styling the footer
7. Styling Your Template for Tablets and Phones
Styling the tablet and phone menu button
Styling the navigation bar for tablets and phones
Including the mobile logo
Styling the head of the mobile design
Styling the body and footer of the mobile design
8. Advanced Template Features
Assigning "optional regions" in a Joomla! template
Incorporating multiple layouts in a single Joomla! template
Working with template overrides
Layout overrides: Modules
9. Joomla! Template Styles: Creating Color Variations for Your Template
What is a template style?
Editing the XML file
Making changes to index.php for the logo upload
Making changes to index.php for the header background color
Configuring the styles
Conclusion
Next steps
Download File Size:921.8 MB
|
