Start learning with our library of video tutorials taught by experts. Get started
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.
Now that we have got our template installed, we are ready to go forward and do some more styling to the template. We didn't do this when we were working with the static HTML because Joomla! has it's own HTML that's associated with each of the modules and the components on this website. That HTML we could have copied out and put it into Dreamweaver but that sure is a lot of work and editing the CSS right here within Joomla! isn't so terrible. For my workflow, it's much easier to start doing some of the extra styling here at this point in time in the development process.
So, Joomla! is writing out all kinds of HTML you didn't plan for when you made your Dreamweaver HTML page. Joomla! tries write to code that's flexible for any site and not specific to one type of design. That means there tends to be a lot more HTML than you may be accustomed to. So, don't critique the Joomla! people that they don't know how to write HTML. They are just trying to write something that's very flexible and will work for everyone. The flip side is that there is plenty of boxes and classes and IDs that you can use to make this site look however you want to look.
So let's start by taking a quick peek at the HTML we have generated here and I am using my Firefox Web Developer tool bar, which I am going to go through in a bit more detail in the next movie, and there is a nice View Source button right here. In my Source, I can take a look at the fact that, for example, at the top of the Web page we have our menu. You will notice that this menu contains some extra tags that you wouldn't normally put in for such a simple menu. There is IDs on the lis, there is several classes associated with each as well as some span tags around the words as well. These have been put in here so that you can use some advanced technique such as the Sliding Doors technique for making tabs, which we are going to cover in the Joomla! Advanced CSS course.
So your best resource going forward while working with your CSS is always to view the source of the Web page itself. You are not going to rely on your template HTML because that template HTML is somewhat incomplete. The HTML you want to rely on is what's actually sent to the Web browser, which is what we see here in this window. From that HTML, you can then write your CSS styles to work with this particular HTML and your site is going to work just great. Believe it or not, most of the CSS for this web site is already in place. Several of our selectors have changed because the HTML associated with those selectors changed. We just have to go back and fix those problems and then we will be done.
Find answers to the most frequently asked questions about Joomla! 1.5: Creating and Editing Custom Templates.
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.