New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Joomla!: Creating and Editing Custom Templates
Illustration by

Joomla!: Creating and Editing Custom Templates

with Jen Kramer

Video: Welcome

Hi! I'm Jen Kramer. Welcome to Joomla! Creating and Editing Custom Templates. By now, you've worked with Joomla! and have discovered how to make it do anything you want through components, modules, and plug-ins. Now you want to make Joomla! look exactly the way you want. Using templates, template styles, template overrides, and layout overrides, you can achieve a fine level of customization in your Joomla! 1.6, 1.7, and 2.5 web sites. Starting with a static HTML web page, we'll convert this to a Joomla! template by adding module and component code, creating an XML installation file, and uploading the template.
Expand all | Collapse all
  1. 5m 7s
    1. Welcome
      1m 14s
    2. Using the exercise files
      2m 30s
    3. About Joomla! versions
      1m 23s
  2. 30m 9s
    1. Restoring the "chapter starting state" exercises
      7m 55s
    2. Joomla! templates
      1m 46s
    3. Understanding Joomla! template files
      5m 18s
    4. Understanding the index.php file
      7m 1s
    5. Understanding the XML file
      8m 9s
  3. 36m 48s
    1. Getting the HTML comp ready for conversion
      4m 21s
    2. Creating template thumbnails and previews
      5m 51s
    3. Converting from index.html to index.php
      6m 53s
    4. Using the Module and Component insertion code
      8m 3s
    5. Creating a new XML file
      5m 56s
    6. Changing the favicon
      3m 13s
    7. Creating the ZIP package install
      2m 31s
  4. 13m 44s
    1. Installing the package file
      3m 14s
    2. Assigning modules and fixing the logo
      7m 21s
    3. Fixing typical installation problems
      3m 9s
  5. 23m 0s
    1. Using the Firefox Web Developer toolbar
      4m 31s
    2. Using Firefox's Firebug
      2m 37s
    3. Using ColorZilla
      1m 48s
    4. Dreamweaver CS5 and Joomla!: Setup
      6m 40s
    5. Dreamweaver CS5 and Joomla!: Using the Filter tool
      7m 24s
  6. 1h 55m
    1. Styling the top navigation
      12m 14s
    2. Styling the active link
      5m 7s
    3. Styling the left navigation
      7m 3s
    4. Styling the footer
      5m 11s
    5. Styling the news on the home page
      5m 16s
    6. Styling the right sidebar using a rounded module style
      11m 9s
    7. Using module suffixes
      7m 26s
    8. Styling a multipage article
      7m 34s
    9. Styling a category list
      5m 13s
    10. Styling a category blog
      6m 20s
    11. Styling a photo blog
      5m 24s
    12. Styling webs links
      5m 22s
    13. Styling a contact list
      6m 5s
    14. Styling a contact form
      8m 0s
    15. Styling a breadcrumb, login, and random image
      10m 47s
    16. Styling Simple Image Gallery
      7m 45s
  7. 31m 14s
    1. Assigning "optional regions" in a Joomla! template
      9m 23s
    2. Displaying modules within an article
      6m 55s
    3. Template overrides
      8m 54s
    4. Layout overrides: Modules
      6m 2s
  8. 14m 52s
    1. What is a template style?
      2m 24s
    2. Editing the XML file
      3m 37s
    3. Making changes to index.php and assigning style
      5m 49s
    4. Creating a new CSS file to override default.css
      3m 2s
  9. 27s
    1. Goodbye
      27s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Joomla!: Creating and Editing Custom Templates
4h 31m Intermediate Mar 22, 2011 Updated Dec 20, 2011

Viewers: in countries Watching now:

In Joomla!: Creating and Editing Custom Templates, Jen Kramer shows web designers how to create eye-popping web sites with Joomla! templates and CSS. The course starts with the basics: how to add the Joomla! template codes to a static HTML layout, install the template package, and clean up styling after installation. The course also covers advanced styling techniques, such as creating multiple layouts within the same Joomla! template, configuring menus and submenus, and implementing template overrides and template styles.

Topics include:
  • Preparing an HTML comp for conversion to Joomla!
  • Converting from the index.html file to index.php
  • Installing the template package file
  • Downloading and installing tools
  • Styling active links, navigation, sidebars, and more
  • Assigning optional regions in the template
  • Displaying modules within an article
  • Performing overrides
  • Setting exceptions for the home page
Subjects:
Web CMS
Software:
Joomla!
Author:
Jen Kramer

Welcome

Hi! I'm Jen Kramer. Welcome to Joomla! Creating and Editing Custom Templates. By now, you've worked with Joomla! and have discovered how to make it do anything you want through components, modules, and plug-ins. Now you want to make Joomla! look exactly the way you want. Using templates, template styles, template overrides, and layout overrides, you can achieve a fine level of customization in your Joomla! 1.6, 1.7, and 2.5 web sites. Starting with a static HTML web page, we'll convert this to a Joomla! template by adding module and component code, creating an XML installation file, and uploading the template.

Then we'll work on editing the CSS to support the content on the web site. Finally, using template styles, I'll create a customized look for the homepage relative to other pages on the web site. I'll also throw in a few tools and tips about working with CSS in Joomla!, including using the Firefox Web Developer toolbar, Firebug, and other third-party Firefox extensions. So let's get started with Joomla! Creating and Editing Custom Templates.

Find answers to the most frequently asked questions about Joomla!: Creating and Editing Custom Templates.


Expand all | Collapse all
please wait ...
Q: I am running Joomla! 2.5. Can I use this training?
A: Yes, this course is appropriate for Joomla! 2.5.
Q: After following along with the exercise files, all has gone well until I installed JCE. When I did this my control panel on the backend came up with the following "strict standards" error:

( ! ) Strict standards: Non-static method WFEditor::getInstance() should
not be called statically, assuming $this from incompatible context in
C:\wamp\www\administrator\components\com_jce\models\model.php on line 112

Please advise. I looked for a way of uninstalling JCE and could not find one. The exercise site seems to work quite well otherwise, although I can't change the profile of JCE as instructed because of similar messages throughout the JCE profile.
A: Anytime you receive an error about "strict standards" when work with WAMP (any additional messaging doesn't matter), please apply the following fix. This fix is also described in the Joomla! 3 Essential Training Chapter 11 video, "Turning off WAMP error reporting."

Because the error reporting is an issue with WAMP and not Joomla!, this fix works for Joomla! 1.6, 1.7, 2.5, and 3.0, as well as later versions of Joomla.

1. In WAMP, find the icon in the system tray and click it.

2. Choose PHP - php.ini from the list.

3. Search the php.ini file for the following line:

error_reporting = {there will be some kind of value in this place}

4. Change whatever value is there on that line to the following:

error_reporting = E_ERROR

5. Save and close php.ini, then go back to the WAMP menu and choose "stop
all services", followed by "start all services" to reboot Apache.

6. You should no longer see errors. If errors are still present, then do
the following:

a. follow steps 1 and 2 above

b. Search the php.ini file for the following line:

display_errors = off

Change this to

display_errors = on

c. Follow step 5 above.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Joomla!: Creating and Editing Custom Templates.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.