New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Getting the content area styling back

From: Joomla! 1.5: Creating and Editing Custom Templates

Video: Getting the content area styling back

The next thing we are going to work on is styling the content here on our Joomla! site. And I have gone to the Ordering page because this is a page that has lots of text on it and as you can also see it has a lot of styling problems. Our sub-heads here are H2s, so they are kind of large and kind of Bold and a little bit out place on this site. We have some bullets here that are just the default styling for bullets. We probably would want a little bit more space between our bullets. And our paragraphs are also spaced such that they have the default paragraph spacing and again many graphic designers prefer to have the lines in your paragraphs spaced apart a little bit further.

Getting the content area styling back

The next thing we are going to work on is styling the content here on our Joomla! site. And I have gone to the Ordering page because this is a page that has lots of text on it and as you can also see it has a lot of styling problems. Our sub-heads here are H2s, so they are kind of large and kind of Bold and a little bit out place on this site. We have some bullets here that are just the default styling for bullets. We probably would want a little bit more space between our bullets. And our paragraphs are also spaced such that they have the default paragraph spacing and again many graphic designers prefer to have the lines in your paragraphs spaced apart a little bit further.

So we are going to add a few styles to take care of these little things. And also the title for this web page is also not correctly styled. We are going to add a style for that as well. So, let's go ahead and start by opening up our CSS window here in Firefox and switching to the default.css tab. I am going to scroll over to the right a little bit so that we can see our text. Up here at the top of our styles sheet is where I like to put all of my generic HTML style declarations. So, I am going to start by styling these H2s. Let's make our H2s look a little bit different then the rest of the site since they are headings. I would like to make them have a font-family of Georgia and I would like to make them white. I would also like to eliminate the space between the bottom of this heading and the top of the paragraphs. So I am going to put all of this in this style.

First of all the font-family will be Georgia. Notice that as soon as I type this in, we can immediately see the changes here on the right hand side, so our font-family is already Georgia. But they are still a little bit so let's make them just a smidge smaller, say 1.2 em and let's also make them white so that they stick out a little bit more. That's looking pretty good. Now, we need to work on that space from the bottom so that the heading is a little bit more associated with the text underneath. Headings have a margin on the top and the bottom by default. So I am going to set my margin to zero. This will actually do nothing for the moment because margins collapse as they intersect, so the margin and the bottom of the H2 is intersecting with a margin on the top for the paragraph. The margin for the top for the paragraph is still intact, so we still have a big space between the H2 and the paragraph. So our next style we will have to do with paragraph and what I am going to do now is set my top margin only to zero and that will tighten up the spacing a little bit. What we see here is now that our H2s and our paragraphs are fairly tightly together.

Notice that we still have a bit of a gap between the H2 and the ul itself. That may be a little bit tight so let's just tweak that a little bit more. Let's try 0.2 em. That gives us a little more breathing room and it looks a little bit better. While we are in a Paragraph Style, we can also set our Line Height, which will give us a little bit more space between each line. A good spot to start is usually about 1 1/2 em and take a look in the site if that looks reasonable, and may be you want a little bit left. I think I liked it the other way better. You should always use em for your Line Height because the em will scale with people increasing the size of the font or decreasing the size of the font on the Web page. If you use pixels, as the font gets larger you run into a problem where the Line Height stays a fixed pixel width and the lines can start to overlap in some browsers. Let's also take a look at those individual list items. Notice that we have an unordered list here on the top under Wholesale and down at the bottom, we have an ordered list under Returns.

So I am going to write a generic li style which will take care of both of those and I am going to say a padding on the bottom of 1 em. That spaces the individual bullets themselves and perhaps we want a little bit spacing within the individual bullets also. Or maybe a little bit less and you can just tweak things just like I am doing right here and get immediate feedback for how things are going to look in your Web Browser.

Finally what we would like to do is we need to give this Headline style to the word Ordering. This is the title for all of the content on this Web page. We need to make sure that we know what HTML goes around the word Ordering, so I am going to view the source for this Web page and the fastest way to find this is to find it. If I do a Ctr+F or a Command+F and I type in the word Ordering, it will appear a few times on this page and I just need to scroll through until I find the one that's interesting.

Here is that word Ordering which is the title for this whole document and as we see here, this is in a table, it's in our div of content in a table of contentpaneopen and a td with a class of Content Heading. I think we will probably just need this class of Content Heading. So I am going to put this on my style sheet as well. I like to group my styles, so I have a style already for the content in terms of its placement and some padding on it. So right after the content, I will prefix my style with ID of content so that I know exactly what part of the Web page this appears in. Now I can just write my style. Once again I would like the color for this to be white, so it will stand down a little bit and I like the way the Georgia headings are working for the H2, so I am going to make this Georgia as well. I would also like it to be Bold and I would like this font size to be a little larger than H2. We use 1.5em for the H2s, so let's try 1.3em for our main heading. There, that looks great. Our last step is to make sure we copy all of this and Paste it into our Joomla! style sheet. If I close this CSS window right now, I will lose all of the changes that I have made.

So when you are working with this window be very careful not to do that. If you surf off this page, go to a different page on the website without saving these CSS changes, you will also lose them. I learned these lessons very painfully. So once again a Ctr+A to select everything and then Ctr+C or Command+C to Copy then we are going to go over to Joomla!. We are going to go to Extensions > Template Manager. We are going to pick our Inside template and Edit. We are going to edit the CSS and we are going to edit default.css. Once again Ctr+A or Command+A to select everything, Ctrl+V or Command+V to paste and Save.

Now when we go back to our Ordering page and refresh, all of our styles are present and our page looks great. Making changes to the styling of this page has really improved the look of it and the readability of this page quite a bit. The hierarchy is much clearer because our main title for this page is now a little bit bigger and bolder so it pops out a little bit more, our heading 2s are a slightly smaller than the main heading and we have nice spacing here between our bullets so that we can clearly see each individual bullet, rather than having them run into each other. The extra Line Height in the paragraph makes these paragraphs a little bit easier to read as well.

Try this on your own sites for improving the look of your content and just remember the content hierarchy. Tricks like making the title for the page a little bit bigger or look a slightly different than the rest of the content can really help bring out the headings and the titles and other important information on the Web page.

Show transcript

This video is part of

Image for Joomla! 1.5: Creating and Editing Custom Templates
Joomla! 1.5: Creating and Editing Custom Templates

25 video lessons · 23006 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

Are you sure you want to delete this note?

No

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.