Join Jen Kramer for an in-depth discussion in this video Assigning modules to the correct positions, part of Templating with Joomla! 3 and Bootstrap.
So, now that you've gotten your template installed, let's fix some of the issues that are present in that template. If you take a look at the front end of your website we know that we have a ton of modules that are missing. It's like they're gone, and we also don't have our images displaying the way that they should. What's going on here? Well, remember that when we were running the Protostar template it had different module positions than the template that we just installed. What's more, the images that we have installed here, were installed with a relative path, relative to our Dreamweaver installation and we're going to need to tweak those to reflect our Joomla! file path instead of our Dreamweaver file path.
So I'm going to show you how to do both of those things. So here in the backend of Joomla! let's first of all fix these modules. We're going to go to Extensions>Module Manager, and I'm going to rotate through all of the modules that are here on the website. So first of all the Footer menu is in a position of footer and in fact this is one of the only working modules on the website right now. There it is, there's the Footer module right here. So that one I don't need to change. Search however, if I click on this I'm going to need to change the position.
So right now the position is part of Protostar in the search position. What I need it to do is switch this to the Kineteco search position and say Save & Close. The English menu is going to go in a position of nav, so I'm going to switch that to my Navigation position, Save & Close. Likewise, the Italian menu will go to that same Navigation position. Main menu, I'm not going to bother with right now. It's unpublished, it's in the wrong position but it's not a published module, so I'm just going to leave it.
Breadcrumbs, I'm going to switch to the Breadcrumbs position here, Save & Close. And then I'm going to go to Languages Available. So here I'm going to switch this to the Search position as well. So scroll on up here and find Search. Remember, you can have multiple modules assigned to the same single position. You don't have to have one position for every module. You can have multiple modules assigned to the same position. My Log Out button is currently on the right side of the screen and I'm going to keep it there, but in its new position.
My Testimonials are assigned a right position as well, and I'm going to reassign them to the right side of the Kineteco template. And I think that's everything. The Random Image is already assigned a position of Random and it is still working, that's this big picture right here. When I hit Refresh I get a different picture most of the time anyway. And the reason that that is working okay is because that particular module is included inside of a Joomla! article and we created that article via the loadposition tag, we learned about this in Joomla! 3 Essential Training and that had a position of Random. That has not changed in this template.
Okay, so now that I've refreshed my page here you see that my testimonials have showed up here on the right side of the screen. Up here at the top I now have my Search box up closer to where it should be followed by my languages. I probably want to turn off that title for languages. I just want the two little flags up there on the top. And then you see the Navigation bar. So the Navigation Bar right now has all of the sub-navigation up here on the top too. That's because in the Protostar template we had dropdown menus and those were coded in. Here inside of my Custom template, I do not have the dropdowns coded just yet.
I will be adding those. So don't worry about the fact that we're seeing the secondary navigation for this right now, I will be fixing that in a later video. Then down here is my Breadcrumb. I'm not sure why that breadcrumb is showing here. Maybe I didn't quite tweak this module correctly when I was working with some of the multi-language features. So I'm going to double-check the positions for that. You can certainly go through and you can check your other pages now on your site, that is your breadcrumb, and things are looking good down here in the footer. But let's fix those two problems; the Languages Available and the breadcrumb showing on the Homepage.
I don't want the breadcrumb on the homepage. So I'm going to hop back into the back of Joomla! and I'm going to go to Breadcrumbs and I'm going to go to my menu Assignment. And so right now this is set to be On all pages except those that are selected. The only one that's selected right now is my Main menu and my Footer menu. Well, I want to add my Italian menu Home page and my English menu Home page. I'm going to say Save & Close. So that will get rid of my breadcrumb here on my homepage. Now I need to fix this languages issue over here.
So I'm going to go back to my Languages Available option here. I'm going to set the Title to Hide, and say Save & Close. So the last thing I'd like to try to do here is I'd like to take these flags and have them appear above the Search box. So I just need to change my module ordering inside of the backend of Joomla! So here in the backend of Joomla!, if I click on this little icon over here for Ordering, so that I sort my column here.
I see that my Search is on top of the Languages Available. What I want to do is just click and drag my Languages Available to appear above Search and let that go. So Languages Available should appear above Search now. If I go in here and I refresh the page, now that didn't quite work. This seems to be a little bit buggy in Joomla! 3, that sometimes this reordering thing isn't quite working. To get around this particular problem, if I click on Languages Available, this is going to show me that it's ordered second.
What I'm going to do is switch this here using the dropdown switch that to Search and say Save & Close. And in theory nothing has changed here. But if I Refresh here, now they did it in fact reorder. So sometimes that ordering can be a little bit buggy here inside of the backend of Joomla! But now I've got these in the basic order that I want. I want the flags followed by the Search box. Okay, in the next video I'll show you how to fix those images.
- Reviewing the graphic designs
- Creating HTML based on the Bootstrap framework
- Converting the HTML to a Joomla! template
- Installing the custom Joomla! template
- Using Firebug and the Firefox Web Developer Toolbar
- Styling the navigation bars
- Creating a dropdown menu
- Modifying the template for tablets and phones
- Working with advanced template features, like overrides