Responsive Design with Joomla!

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.

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

Table of content

• Introduction
  • Welcome
  • Using the exercise files
  • Course prerequisites
• What’s New with Joomla! 3 Templates
  • Installing the starting state exercise files
  • Exploring template changes in Joomla! 3
  • Discussing CSS and LESS
• 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
• 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
• Installing the Joomla! Template Package File
  • Installing the package file
  • Fixing typical installation problems
  • Assigning modules to the correct positions
  • Fixing image paths
• 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
• 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
• 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
• 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
• 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

Rapidgator.net

1. bit.ly/1jgk6x8
2. bit.ly/SsJqsF
3. bit.ly/1nuydmN