Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Joomla! 1.5: Styling with CSS shows how those familiar with Joomla! and with hand-coded HTML and CSS can take the next step in creating a dynamic website with a unique look and feel. Jen Kramer McKibben goes deep into the functionality of this open-source content management system, exploring topics like putting more style into modules, editing CSS on the fly using the Firefox Web Developer toolbar, creating horizontal and vertical menu layouts, and including images in those menus. Exercise files accompany the course.
I am on the home page of the website and I am looking at the Our Featured Products section of this home page. While this definitely communicates what the featured products are it's not very attractive and my eye sort of slides right over it while I am looking at this home page. I would like this to pop-out a little bit more so let's think about some ways we could improve it. What if we had something that looked like this? This means that we are going to need to style each of the links that appear in this menu individually so we are going to have some pretty fancy footwork to do in this particular video.
The first thing that I am going to need to do is I am going to need to specify a separate suffix. It should be noted that this is the right side of the home page, in the right region and we have two modules assigned to the home page. We have the Our Featured Products module and the Login module. This means that both modules have the same wrapper code around the module. We have set this as XHTML in our template so that means each of these modules is surrounded by a div with a class of module table. That means that any style that I create with a div.moduletable handle in them will apply to both Our Featured Products and to the Login and I don't necessarily want that. The Our Featured Products area is going to be radically different than the login area of this website. So what can we do? The easiest thing to do is to assign what's called a suffix to the module and I am going to show you how to do that now.
If we go back into our website and we are going to go to Extensions > Module Manager and we are going to go to the Our Featured Products module. Under the Advanced Parameters there's a spot for adding such things as a Module Class suffix, a Menu Class Suffix or a Menu Tag ID. By mousing over the name of each of these there's a description that will pop-up with what each of these will do. What we would like to do is use the Module Class Suffix to apply to this particular module. What I am going to do is type in the word home and now when I take a look at the HTML for this web page and I am going to Ctrl or Command+F and type in Our featured Products, now you will see that the div surrounding Our Featured Products has a class of Moduletablehome, all one word. This is in contrast to the next module down, which is the Login which has div with the class of moduletable.
We are ready to start styling, now that we are familiar with our HTML. Let's open up our style sheet editor and we are going to scroll down to the right area of our style sheet. So under right the first thing I am going to do is set some generic styling for the div surrounding Our Featured Products. I am going to set a Width of 240 pixels and I am going to include some padding. This will add 10 pixels of padding on the top and 20 pixels of padding on the left.
Now I am going to style that Our Featured Products, which is in an h3, so write div.moduletablehome h3. First I am going to make a color of white. I am also going to set the font-family to Georgia to match some of the other titles on the page. I am also going to get rid of that bold and I am going to set a size for this as well of 14 pixels.
Now I am going to start styling the rest of the list. So div.moduletablehome and we are going to work with the UL as we usually do the first thing that we do is get rid of the bullets and than margins and the padding so our list-style-type is none, our margin is zero and our padding is zero. I also want to make sure that I had no padding on my Lis. You see that there's a space in between each of the links on this page. That's due to do fact that further up in our style sheet under Our Generic Li declaration we have a bit of padding on the bottom as well as a line-height associated with our Li. We want to make sure that we neutralize that padding which is causing the space between the links right now.
I going to put some space back in later but I don't want this space interfering with my work later. So now I am going to do some generic styling of my links themselves. This will apply to all of the links and then we are going to style each link individually. So first of all, I want these to display as block.
Links by their very nature are inline items, meaning that if they appear in a paragraph the text sort of wraps around them as you would expect but when they are in a list like this we rather have them to display as block meaning that there width is as wide as their containing element. This provides a large clickable area free to these big links. I am going to get rid of the underlines and I am going to change the font-family on these as well.
If you make Georgia font Italic, it's a nice effect. It's very pretty. Now I'm going to color each of these links differently. What I am going to do is I am going to have three different background colors for each link. Once again, we are going to refer to our code. In the code here you will notice that each li has a unique class associated with it. So the first link has an li with the class of item19 the second li has a class with an id of item20 and the third li has class of item21. We can use each of these individually for styling the links with three different background colors. So let's do that now, so we are going to say li.item19 a: link and with a long declaration like this. Sometimes it's easier to Ctrl+C or Command+C and Ctrl or Command+V to paste and than change link to visit it. I have already selected a color so that background color will become 4b9398. Oops, I forgot the moduletablehome. Let's setup the background color for the second link. It's essentially the same as the first one here so again I am going to copy and paste that declaration and make just a few changes so this will be item20 instead of item19 and the background color this time is 63aeb2 and finally, for my last one I am going to paste again and my item numbers will be 21 and my background color is going to be a5bfc2 so now we have three nice looking stripes here on the side of the page. The padding seems to be a little bit off. Maybe we want those links a little bit taller and we probably like to attach that Our Featured Products to the rest of the links so let's see if we can do that now.
I am going to go back to the h3 and what I would like to do is take Our Featured Products and I am going to get rid of the space in between pushing this down on top of the links and I am going to assign Our Featured Products a background color as well. So back up here to div.moduletablehome h3 let's add a few things. Let's add a background color of 3b7276 and we are going to take away the margin on the bottom by setting that to zero which will push everything together nicely. Now I think we need to add a little bit of padding so that the words are not pushed up against the color box. So I am going to add some padding with 5 pixels on all sides. Let's also add that same padding to our individual links.
So under our a: link and a: visited style, let's add padding of 5 pixels. Finally, I would like a big box around all of the links that you see here. To do that, because our div. moduletablehome has some padding associated with it what I am going to need to do is add some of the border on the h3 and some of the border on each of the individual links on this page. So let's do that now.
Under the h3, I will add a border on the top with our chocolate brown color. Then I am going to need to repeat this for the left and right sides. So we will have border left and a border right. Now we are going to add left and right borders for our Hot Chocolate and Chocolate Truffles which are items 19 and 20 and I am just going to copy and paste that same declaration for the left and right to item20. Finally, for our last list item we will need the left and right borders as well as a bottom border that we will clean up the formatting as well.
So this is looking great. Now it's time to transfer this code from the page into Joomla!. So once again, we are going to do a Ctrl+A and a Ctrl+C to copy we are going to go to our back end of our website and we are going to go to our Template Manager to the inside template to the Edit button we are going to Edit CSS, the default.css and then once again, Ctrl+A and Ctrl+V, save and let's go back to our home page and refresh.
That's looking a lot better. But wouldn't it be even better for Our Featured Products menu to include a picture of the Hot Chocolate, the Chocolate Truffles and the Pastilles right there in the menu so as you had something that was even prettier to click on for this home page. We don't have any pictures on this home page so adding some pictures would be a nice way of polishing up this menu a little bit. In our next video we will show you how to make an image based menu just like that.
Find answers to the most frequently asked questions about Joomla! 1.5: Styling with CSS.
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.