MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Templating with Joomla! 3 and Bootstrap

Course Summary

Build a custom Joomla! 3 template that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices, leveraging Bootstrap, which ships with Joomla! 3.       

  • +

    Course Syllabus

       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
       Next steps


Course Fee:
USD 19.99

Course Type:


Course Status:



6 - 7 hours / week

This course is listed under Open Source and Development & Implementations Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top