Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, Jen Kramer shows how to build a custom Joomla! template that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices. This course covers using Joomla! 3 with its built-in Bootstrap framework, and a start-to-finish development strategy that covers everything from converting the wireframe to HTML, to styling the headers and footers. Jen also shows how to incorporate Dreamweaver and the Firefox developer tools into your workflow, and accommodate multiple layouts and color variations in a single template.
I am at joomla.kinetecoinc.com. This is the finished state of the Joomla! 3.0 Essential Training Course, and I just wanted to take a look at the old navigation bar that I had here. So, before what I was able to do, was I would to mouse over some of these navigation items that have secondary navigation, and I had a dropdown menu that I was able to use here on this website, this was driven by the protostar template. In my custom template, right now what I have is the navigation bar the html, for that we just added in a previous video. But I don't have these dropdown menus.
And the reason why is that the dropdown menu styling, dropdowns are actually built into Bootstrap, the ability to have the dropdowns, but the specific dropdown implementation that you have here inside of protostar is part of the protostar template itself. If you like the dropdowns here, why not we just borrow from those and make those appear on my website. Why re-invent the wheel? Why try to figure out the whole Bootstrap dropdown implementation? Let's just borrow from protostar, and borrow the CSS from there, and then incorporate that into our template.
That's what I am going to show you how did you in this particular video. Back here in Dreamweaver, I am going to go open up File>Open, the protostar.css. I'm going to go to my protostar folder, and I am going to go to the css folder, and I am going to go to template.css. This is all of the html that's making up the protostar template. What I can do now is I am going to do a Find for some kind of .nav followed by .nav-child.
Because in the protostar template, the html is marked up this way. This is where the dropdown menus are located. I am going to go ahead and find this here inside of the protostar template.css. Where I'm interested in starting is right here at line 6186. So, this says .navigation .nav-child and this goes on for quite a while, there are several styles that are associated with these dropdown menus. We are going to need to get all of this. We are going to scroll on down through the page here.
At line 6278 is a media query, we are going to stop just before that. All of this code that is located here, all has to do with the dropdown menus. So, I am going to copy all of this, Ctrl +C or Cmd+C to copy. Then I am going to switch over to my custom.css style sheet and I am going to put in a little comment here, that says this is the code for dropdown menus taken from Protostar.
And after that I'm going to Ctrl+V or Cmd+V and so I have pasted in all of those styles that I took from Protostar. This should make our dropdown menus work, right? If you can't go through and find this particular css inside of the Protostar style sheets by all means, I have given you a free exercise file that has a copy of the Protostar CSS in it. And I have another file that I'll give you that has the copy of my modified protostar styles, because we are going to need to modify these a little bit. So, if just say File>Save and I am going to go back to Firefox and I am going to hit Refresh, absolutely nothing happens. Why is that? Well, if we view the source for this web page, and we scroll on down here to our navigation bar in the HTML, you will see that we have our nav appears up here at the top, right our
But nowhere in here is a class of navigation, if you read through all of this code. No where will you find a class of navigation all spelled out. What that means is the CSS that I just copied over is looking for a class of navigation all spelled out. I don't have it here. What I do have that I can work with is this right here nav is an html that I can use. Then the items that have these dropdown navigation bars, if I scroll over here to the right, here's the about tag, the UL here that is forming the dropdown for the about part of the web page, the ul has a class of nav-child.
So, that is used in the style that we just copied over from the protostar template. So, if I change those styles from .navigation to just nav the html tag that CSS should then take effect on this web page. By the way, if you would like to have your code wrapped here inside of this window, if you go to View, Wrap Long Lines you might find your html a little bit easier to read, Okay. So, now I am going to go to Dreamweaver here, and everywhere in this css that I just copied and pasted over, where it says .navigation, I want to change that nav.
I can use Find and Replace to do that. So, if you do a Ctrl+F or Cmd+F, you will get a window that comes up that will find .navigation, I'm going to replace it with nav, and you could just hit Replace All, if you're feeling brave, I like to review each one of these and make sure I really do want to change it. So, I am going to hit Replace, Replace, Replace and I am just going to go through my list here, and replace these instance of navigation with the nav tag. So, that's all I've done, I have just made sure that my CSS selector matches the html I am actually working with.
All right. So, now that that change is made, if I say File>Save and I go back to my Firefox website and I hit the Refresh button, it looks like my navigation is disappeared. Now when I roll my mouse over, exactly as expected, I have these dropdowns and they look and they function exactly the way that they did inside of protostar. So, that is how we've gotten our navigation dropdowns back. Now what we need to do is style those along with styling our nav bar.
Find answers to the most frequently asked questions about Templating with Joomla! 3 and Bootstrap.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.