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

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

Joomla! 1.5: Creating and Editing Custom Templates
Illustration by

Assigning "optional regions" in a Joomla! template


From:

Joomla! 1.5: Creating and Editing Custom Templates

with Jen Kramer

Video: Assigning "optional regions" in a Joomla! template

If you thought that templates were a little bit complicated with all of that extra PHP code, here is another level of complication for you. It's completely possible to tweak your HTML and Joomla! code such that it will only show up if there is modules assigned to a specific regions of your template. I am going to show you some code for how to do this. Think of these as optional regions. Optional regions are great, when you don't want a blank to show over in a right column, but you want that right column to show up on every page. Or what we are going to do here is for a little bit of variation in this website, what I would like to do is for the homepage, I would like to the show the content on the left hand side of the page. And I would like to put the Latest News on the right hand side of the page.

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! 1.5: Creating and Editing Custom Templates
2h 11m Intermediate Dec 02, 2008

Viewers: in countries Watching now:

Custom templates are the key to making a Joomla!-driven website stand out. In Joomla! 1.5 Creating and Editing Custom Templates, Jen Kramer McKibben offers instruction and insight to help Joomla! users create eye-popping websites. Jen starts with the basics, like how to add the Joomla! template codes to a static HTML layout, install the template package, and clean up styling after installation. She also shows how to make multiple layouts within the same Joomla! template, configure menus and submenus, and more. Exercise files accompany the course.

Topics include:
  • Converting HTML comps to Joomla! templates
  • Troubleshooting installation problems
  • Creating XML and index files
  • Placing random images
  • Configuring menus and submenus
  • Changing the favicon
Subjects:
Web CMS Web Development
Software:
Joomla!
Author:
Jen Kramer

Assigning "optional regions" in a Joomla! template

If you thought that templates were a little bit complicated with all of that extra PHP code, here is another level of complication for you. It's completely possible to tweak your HTML and Joomla! code such that it will only show up if there is modules assigned to a specific regions of your template. I am going to show you some code for how to do this. Think of these as optional regions. Optional regions are great, when you don't want a blank to show over in a right column, but you want that right column to show up on every page. Or what we are going to do here is for a little bit of variation in this website, what I would like to do is for the homepage, I would like to the show the content on the left hand side of the page. And I would like to put the Latest News on the right hand side of the page.

Now, we have not built the site with a right hand column at this particular point and I wouldn't really want to, because that would mean I would have to built two templates for this little website. I would have two templates that I'd have to maintain and to sets of CSS to keep track of. I would rather just put it all in one template. Makes my job for maintenance much, much easier. So what I need is a little piece of code that says if I have modules that are assigned to the left hand side of the page, go ahead and write in all the codes and the modules that go on the left hand side of the page.

But if I don't have anything assigned on that left side, but I do have things that are assigned on the right side, then you go ahead and make a right column instead, with that module content in the right column. So now we are going to have to modify our HTML in Joomla! to add this specific PHP code and then we are going to have to go and modify our style sheets, because some of our styles are definitely going to change in this process. So lets get into the backend of Joomla! and start editing our HTML. Make sure you are logged in and we are going to want to go into the Template Manager, to the Inside template. Edit, and we are going to edit the HTML. What I am going to do is I am going to add some code just before the content and the statement is going to look like this. All PHP tags start with an angle bracket, question mark PHP.

All this says is if there are modules that are assigned to the left hand side, at least one of them, do the following particular thing. And what we want to do is if there are modules in the left hand column, we want to do exactly what we already have written here on this page. So right after the end of our left column, and notice I have included also in here the content piece as well. For styling purposes, I am going to need to change the ID associated with the content in my second statement. We will see why in a moment.

I said if there are modules available for the left hand side of the page, go ahead and write them in. Now, I want to say something else, 'otherwise do this other thing,' which is known as the else statement. So what I am going to say here is a slightly different ID associated with the content area. Our component code. Close that div, and now I am going to write in a div with an ID of right.

Followed by some module code that calls for a module on the right side of the page. Close that div and then we need to close that whole PHP which is called an if else statement, by saying end if. So just to review what we have done here, we have a statement at the top. If there are modules that are assigned to the left side of the page for a given page on the website, write in the content with a div with an ID of content. Also write in a div with an ID of left and all of the modules that appear in that left div.

Otherwise, write in a div with an ID of the content right, plus the content for the website. And write an another div with an ID of right and all of the modules that are assigned to the right position. And that's the end of our statement. Let's save this and let's take a look at how are web page is affected. Going back to the front in to the website and I am going to hit Refresh. We see absolutely no change to the homepage of the website. Why is that? Our modules are assigned a position of left. So nothing has changed on the homepage of the website because there are no modules assigned to the right position. Let's go and take our Latest News modules and reassign them to the right position of the web page. And then we will see how the page changes again.

I am going to close the Template Manager and I am going to go to Extensions > Module Manager and I am going to go to my Latest News module, and I am going to change the position to right. The position is not going to appear in the dropdown because when we originally coded this template, we did not include a position of right in our XML file. But as I have showed before, we can just go ahead and type in the word right anyway, and save.

Now let's take a look at this effect on the front into the website. Refresh the page and now we have lost all kinds of formatting on our web page. This is actually a good thing because it shows that our code is working. If we do a quick View Source, what we see here is we have a div with an ID of content right, with all of our content formatting in here and the we have a div with an idea of right with our modules. Now, we need to alter some CSS, so that the page goes back to looking as good as it is used to. Only reverse. So we are going to go into CSS > Edit CSS.

The first thing to do is find our news styles. So here note that we are calling on an ID of left for a module table news. We now need to change that to right. So I am going to change all of these to right, and you see that our formatting has returned for our right module. Now let's scroll back up here a little bit on the page to our content area. After content, I am going to put in contentright. So now this is on the right side of the page. I really want it on the left side of the page. Instead of a float right, I need a float left.

So I am going to add that on my next statement to override what I just said. Next I need to style the headline for this particular text. After content heading, I wanted to look the same even though we are in content right, so I am going to add that. Now finally, we need to add one more statement to our right modules and that is just a simple styling for right itself. We are going to set it to width of 307 pixels with some padding and a float.

Now once again let's copy our CSS with the Ctrl or Command+A for all, selecting all, Ctrl or Command+C to copy. Back into our template, back in to the Template Manager. Inside. Edit, Edit CSS, edit Default.CSS and then once again Ctrl or Command+A to select all, Ctrl or Command+V to paste and save. Now let's refresh this homepage and it looks great. Our content is now on the left hand side of the page and our Latest News is on the right.

But how have the pages on this website been affected? Or have they? Let's look at the Products page. On our Products page, we still have the old layout. As we do on the Ordering page and all of the other pages in the website. Only the Latest News module was assigned the right position. So therefore only the homepage is impacted by that optional piece of PHP that we included in the template. Using these optional regions can be a little bit confusing and complicated at times, but they will save you a lot of time with maintenance for your Joomla! templates in the long run.

In the upcoming Joomla! Advanced CSS course, I will be talking more about working with multiple templates assigned to the same website and their many style sheets and how to put that all together.

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


Expand all | Collapse all
please wait ...
Q: When creating and uploading custom templates as described in Joomla! Creating and Editing Custom Templates , the following error occurs:

XML Parsing Error at 1:1. Error 4: Empty document
JInstaller::install: File '/tmp/install_4bd887e090339/css/default.css' does not exist.


What is causing this error?
A: Check through the errors described in the “Fixing typical installation problems” video (e.g. files included in the install package that are not listed in the XML file; the XML file lists files that are not in the install package; XML is badly formed). Also check for permissions issues with your server.
In all likelihood, if this message appears, there is an error with the XML file, possibly a typo or a misnamed file. Make sure the CSS file is called default.css and is located in the CSS folder. Also, make sure everything is spelled correctly.
 
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! 1.5: 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.