How to Design Joomla 3 Templates

Teacher: Vicki Watson

Released: June 6, 2013

Length: 2.02 hours

Level: Intermediate

Certificate: Finish lessons, plus pass quizzes with an average of 70%

Table of Contents

Description

Exercise files

Teacher

Intro

Overview of Joomla 3 TemplatesFree

Introduction to the CourseFree

Resources for this Course (PC)

Resources for this Course (Mac)

Responsive

Thinking Responsively

Introduction to Bootstrap

Joomla 3 Template Intro Quiz

Setup

Setting up Bootstrap

Creating the index.htmlFree

Using Web Development Tools

Adding Layout to the index.html

Adding Site Content For Testing

Adding CSS to the Design

Bootstrap Setup Quiz

Menus

The Horizontal Menu

The Sub-Menu

Making the Menus Responsive

The Vertical Menu

Bootstrap Menus Quiz

Content

Tabbed Content

Buttons

Typography

Icons

The Carousel

Thumbnails

Tables

Template Content Quiz

Template

The index.php file, Part 1

The index.php file, Part 2

The templatedetails.xml File

Template Installation Package

Installing the Template

Joomla 3 Template Files Quiz

Modules

Adding the Joomla Menu

Conditional Module Positions

Collapsing Module Positions

Using Module Class Suffixes

Joomla 3 Modules Quiz

LESS

Understanding Media Queries

Overview of LESS

Using LESS in Joomla

Crunch Compile LESS

LESS Quiz

Conclusion

Template Parameters, Part 1

Template Parameters, Part 2

Template Overrides, Part 1

Template Overrides, Part 2

Favicon and Finish!

Joomla 3 Templates Final Quiz

Our Joomla 3 template class shows you how to use Joomla and the Bootstrap framework to create beautiful designs.

Vicki Watson is going show you how to use Joomla and the Bootstrap framework to create beautiful designs.

We already have templates design classes available for Joomla 1.5 and Joomla 2.5, but this new class is radically different.

Joomla 3 uses the Bootstrap framework which makes designing much easier and quicker.

This class is split into two parts. In the first part, we have over 20 videos that introduce you to Bootstrap. In the second part, we show you to apply your Bootstrap design to Joomla, using advanced features such as LESS and media queries.

Creating a fantastic look and feel for your Joomla site is pretty important. You can buy templates, or even download and use free ones. However, if you really want a unique look, you need to create your own template.

Download the exercise files:

Joomla 3 Template Design - HTML and CSS Files

Joomla 3 Template Design - Photoshop File

Joomla 3 Template Design Final Template

Vicki Watson

Site Email

Vicki is the lead web designer & developer at VWeb Web Design. She specializes in Joomla, custom Joomla templates, search engine optimization, website statistics/analytics, marketing/traffic building strategies and education/training to help you learn to manage your own site.

Vicki holds a B.S. in Computer Science and has taught as an adjunct professor for years.

She is a mom, teacher, author, and horse trainer.

We're excited to have Vicki sharing her expertise with you!

Classes by this teacher

Name

Level

Release Date

GIMP Part 1: Introduction

Beginner

March 22, 2015

GIMP Part 2: Colors, Exposure, Effects

Beginner

March 26, 2015

GIMP Part 3: Selections and Filters

Beginner

March 28, 2015

GIMP Part 4: Tools, Brushes and Masking

Beginner

March 29, 2015

How to Use the Fabrik Extension in Joomla

Intermediate

June 7, 2014

How to Use the SobiPro Extension in Joomla

Intermediate

August 2, 2014

How to Use the UIkit Framework

Advanced

December 23, 2016

How to Use the Zurb Foundation Framework

Intermediate

November 28, 2016

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!