Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling each link individually

From: Joomla! 1.5: Styling with CSS

Video: Styling each link individually

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.

Styling each link individually

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.

Show transcript

This video is part of

Image for Joomla! 1.5: Styling with CSS
Joomla! 1.5: Styling with CSS

22 video lessons · 15869 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Joomla! 1.5: Styling with CSS.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.