How to Install a New Joomla Template

 

Video:

Transcript:

So installing a template is really easy. Head over to OS training dot com slash breeze and we're going to use this free template to begin to finish up our website. Breeze is a free Joomla template provided by OS training. There's some add-ons here as well as all the instructions you need in order to install and get breeze set up your way you want.
One of the great benefits of Joomla is that it's completely mobile friendly out-of-the-box and this is a nice add-on template that is also mobile ready. So take a look at the instructions here and then, when you're ready, click download to get breeze.
Head back over to your site, click on extensions, manage and install. You'll remember earlier we used the install from web to upload jce. Well this time we're going to click upload package file because we've already downloaded it. This is the most common way of installing extensions. When you find an extension or a template that you like, you download it and now you upload it. Click Choose file, go to where your downloads are and choose TPL underscore breeze underscore free and click upload and install and it should be just that fast. One of the things you'll need to remember as you start to experiment with templates, many of them come with dependencies.
Now, other modules or plugins that you need to install as well: always read the documentation before you install any extension, including a template. Well, to go ahead and use this template is quite simple. Head over to extensions and templates and here you'll see the built in templates that come with Joomla, as well as OS training breeze, what we just installed.
Out of the box, Isis is the default administrator theme and that's what we've been using all along and protostar is the default site template, and the front end and the back end usually have different templates. This one is designed specifically for administration and, of course, this is the protostar default template that we've been using.
Alright. It's as simple as this: put a star and set OS training breeze as a default and go over to your site and hit refresh and...whoa, there we are. What a mess. We've got some things to clean up. As you can tell, this isn't exactly what we thought we'd get but it goes back to my point from the previous video: module positions change, and so you need to reassign all of your modules. In reality, you can install your template at any point in your site building process. The earlier, usually the better. That way you don't have to do what we're about to do but the great thing with Joomla is if your graphic designer hasn't finished those Photoshop files and the template builder hasn't finished the template you don't have to wait in order to build your site out. You can do what we just did: install it at any point and clean up the site as you go. Alright, let's go ahead and do that. I'm going to head back over to my administrator and I mentioned that module positions have changed. Go ahead and click on options and make sure that preview module positions is enabled. Click Save and close.
Go back over to the home page and add question mark TP equals 1 to your site and you'll see there's a position called menu, banner, left, right, body top. Position 8 is now in the middle. We need to fix that. Body bottom, body A, B and C, footer, footer A, B, C and then a credits area. So these are all positions that we can put information into.
Alright, let's update our modules. Head over to extensions and modules and find the main menu. Click on it and let's change that by scrolling down or scrolling up and finding OS training breeze and menu. Let's go ahead and hide the title - we certainly don't need the words main menu anymore - and there is one trick with this menu: click on advanced and you'll see that we have a menu class suffix which we can delete but this particular template comes with an alternative layout for our menus. Click on the word default and click on the main menu layout. So something built into many templates these days. How do I know that? Well, I read the documentation. Click Save and close. Head over to your site. Get rid of that TP equals one and there's my main menu, nicely laid out and designed with CSS.
Alright. Next, let's go ahead and move all the position seven modules to the right position. Now, here's a great little trick, select all the modules in position seven and come up here and click batch. Change set position to OS training breeze, right and we're going to move the process. When you've done that, you'll notice that the three modules are now unpublished. No worries. Go ahead and select them again and click publish. Head over to your site and hit refresh and now our modules are back here on the right position. Well, that's awesome.
Let's get our menu back on the Left position. You'll remember we put the three menus in position eight. Let's select all the position eight modules and batch them over to OS training breeze in the left position, remove them and click process. Go ahead and select them again and publish. Go back over to your home page and now you'll see there are menus on the left hand side, so we're getting closer.
Now, lastly, let's just rearrange these so they look a little bit better. I'm going to filter by the left position and then I'm going to order them, by clicking on the little ordering link here and then dragging them into the exact order that I want. Come back over to my home page and there's my various modules in the correct order. This is driving me crazy. Let's just go ahead and get rid of that extra modules in the main article. Go back to content articles, welcome to Joomla ville and then let's get rid of that load module and the load position and, while we're here, let's just go ahead and insert an image. I mentioned, in a previous video, that this is JCE's media manager - it's really great to use. Go ahead and pick any image off your hard drive that you want or go out and get a kind of, like, a town-hall type picture. I'm going to head over to Joomla explained chapter 5 and grab this town hall image and then upload it into my site.
One of the really nice things with JCE's image manager: I can update my alternate text, which you should always do. Joomla ville town hall, I can set the dimensions in here, I can also set the alignment and add some padding or margin around my image, which I really like. You don't want the text bouncing right up against your image. You can even add borders once you've got those set. Click insert and, of course, I want that at the top, so I'm going to just click and drag that and click Save and close.
Now, when I hit my home page, there's my zoom level Town Hall in the article and my site is starting to really look good.
One last task before we leave: this video, this word home, is really driving me crazy and this is one of those crazy little tricks with Joomla. This isn't a template issue, it's actually a menu issue. We're going to clean it up now. Head over to menus, main menu and click on home. This is one thing in my live training over the years that people have always asked me about, so I thought we'd clear it up. Every menu has the option for a title, on the page display and, in this case, this page heading has been set to yes and it says the word home, simply because that's the name of the menu. Go ahead and change that to no and click Save and close. Hit refresh and, hey, the word is gone.
Congratulations, you've installed a template, rearranged the module positions, and cleaned up your site just a little bit.

Tags: Joomla 3

OSTraining

Support

OSTraining teaches people how to build great websites, focusing on PHP platforms such as WordPress, Joomla, Magento and Drupal. You can learn more about there service by visiting OSTraining.com or by subscribing to their Youtube channel.