Joomla 3 Template Design

Name: Joomla 3 Template Design
Rating: 3.9 (92 reviews)

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

Created byOS Training LLC

Last updated 11/2013

English

English [Auto],

What you'll learn

By the end of the class, you'll be able to create your own Joomla 3 template using Boostrap

Course content

9 sections • 41 lectures • 3h 25m total length

Overview1:48
Session Note:

Make sure you download the course files from below:
Introduction to the Course2:42
Discover how responsive design uses a single template that automatically adapts to mobile and desktop widths, avoiding separate sites. Learn to apply the Twitter bootstrap framework for this approach.
What You'll Need for this Course (PC)5:31
Explore tools for creating a Joomla template, including graphics editors, code editors, ftp tools, and browser debugging tools to test across browsers.
What You'll Need for this Course (Mac)5:57
Explore essential Mac tools for building a Joomla 3 template, including graphics editors, code editors, FTP clients, and browser debugging tools, with notes on free options and pricing.

Setting up Bootstrap6:27
Learn to build a Joomla 3 template layout with a Bootstrap 12-column grid, starting at 1170px wide (or 940-960px design area) and using spans and offsets to arrange content.
Creating the index.html7:21
Using Web Development Tools10:37
Adding Layout to the index.html8:11
Visualize a site layout with the Twitter Bootstrap grid, building a skeleton in HTML using container, row, and span classes for 12, 6, and 3 columns.
Adding Site Content For Testing3:08
Adding CSS to the Design8:07

The Horizontal Menu6:15
Create a horizontal site menu using a Bootstrap nav bar, an unordered list with anchors, and basic CSS tweaks while inspecting spacing with dev tools to improve layout.
The Sub-Menu3:56
Learn to build a bootstrap dropdown submenu in a Joomla template, with a dropdown toggle, a dropdown menu, and items retrieved from the Joomla database.
Making the Menus Responsive3:41
The Vertical Menu2:38
Learn vertical navigation in a Joomla 3 template with Bootstrap: use an unordered list inside the menu div and two classes to create tabs or pills.

Tabbed Content5:23
Learn to build a tabbed content interface in a Joomla 3 template design using Bootstrap tabs, tab panes, and data-toggle attributes, with fade transitions.
Buttons4:39
Typography3:34
Explore bootstrap typography basics, adjust body and heading sizes, and apply the lead class for emphasis. Use color-coded text, labels, badges, and closable alerts to maintain design consistency.
Icons5:29
Explore using Bootstrap icons and Font Awesome in Joomla templates, sizing with icon classes like large and 2x, coloring with CSS, and placing icons in menus and buttons.
The Carousel6:26
Learn to implement a Bootstrap carousel in Joomla 3 templates, including wrapper padding, indicators, slides, captions, and customizing arrows and caption styles, with interval and pause options.
Thumbnails5:33
Explore implementing thumbnails in a Joomla 3 template with Bootstrap, using an unordered list and span classes to display six across, transitioning from placeholders to real tshirt images.
Tables3:33
Learn how to display tabular data with Bootstrap tables, using classes like table, table-striped, table-bordered, table-hover, and table-condensed, plus responsive layout and nth-child zebra coloring.

The index.php file Part 14:26
The index.php file Part 25:29
Learn to insert dynamic content in Joomla using module include statements, assign modules to positions such as logo and 1 through 14, and wrap them with style attributes.
The templatedetails.xml File3:22
Learn how to configure the templateDetails.xml for a Joomla 3 template by outlining the template information, its file list, and module positions for an installable template.
Creating the Template Installation Package3:07
Create the template preview and thumbnail images at 640px wide and 206x150px, saved as template_preview.png and template_thumbnail.png; zip the folder with the template’s name and install via Joomla extension manager.
Installing and Configuring the Template6:51

Adding the Joomla Menu4:02
You can download the menu overrides at http://hwdmediashare.co.uk/joomla-templates/116-strapped
Creating Conditional Module Positions6:40
Learn how to conditionally display Joomla template modules with PHP, using count modules on the block one module position and if statements to control header and bottom sections.
Creating Collapsing Module Positions4:59
Using Module Class Suffixes4:25

Understanding Media Queries4:26
Learn how media queries target screen sizes and load stylesheets to adapt Joomla templates. Explore Bootstrap's responsive utilities and class suffixes to show or hide elements across devices.
Overview of LESS4:26
Click here to read our detailed introduction to LESS.
Using LESS4:54
Explore using less in Joomla 3 templates by defining base color and heading color variables, darkening colors, and applying mixins for rounded corners, gradients, borders, and shadows.
Crunch Compile LESS4:05

Template Parameters Part 12:21
Learn how to add template parameters in a Joomla template, including a background color dropdown (purple, green, gray) configured in the template details file and used in the template manager.
Template Parameters Part 24:32
Learn how to use a template parameter to select a color, retrieve its value, and load the corresponding CSS file to switch background schemes in a Joomla 3 template.
Template Overrides Part 15:11
Click here to read our detailed introduction to template overrides.
Template Overrides Part 25:40
Favicon and Finish!6:30

Requirements

You must have a basic understanding of Joomla and be comfortable with the Joomla administrator before taking this class. Take our Joomla 3 Beginner class if you don't feel ready to create your own template: https://www.udemy.com/joomla-3/

Description

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

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.

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.

Who this course is for:

This class is for people who want to be able to customize Joomla templates or create their own from scratch.

Joomla 3 Template Design

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 16min

Session Note:

Responsive2 lectures • 9min

Setup6 lectures • 44min

Menus4 lectures • 17min

Content7 lectures • 35min

Template5 lectures • 23min

Modules4 lectures • 20min

LESS4 lectures • 18min

Conclusion5 lectures • 24min

Requirements

Description

Who this course is for: