Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.