Start learning with our library of video tutorials taught by experts. Get started

Joomla! 1.5: Creating and Editing Custom Templates

Getting the content area styling back


From:

Joomla! 1.5: Creating and Editing Custom Templates

with Jen Kramer

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Joomla! 1.5: Creating and Editing Custom Templates
2h 11m Intermediate Dec 02, 2008

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.

Topics include:
  • Converting HTML comps to Joomla! templates
  • Troubleshooting installation problems
  • Creating XML and index files
  • Placing random images
  • Configuring menus and submenus
  • Changing the favicon
Subjects:
Web CMS Web Development
Software:
Joomla!
Author:
Jen Kramer

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.

Find answers to the most frequently asked questions about Joomla! 1.5: Creating and Editing Custom Templates.


Expand all | Collapse all
Please wait...
Q: When creating and uploading custom templates as described in Joomla! Creating and Editing Custom Templates , the following error occurs:

XML Parsing Error at 1:1. Error 4: Empty document
JInstaller::install: File '/tmp/install_4bd887e090339/css/default.css' does not exist.


What is causing this error?
A: Check through the errors described in the “Fixing typical installation problems” video (e.g. files included in the install package that are not listed in the XML file; the XML file lists files that are not in the install package; XML is badly formed). Also check for permissions issues with your server.
In all likelihood, if this message appears, there is an error with the XML file, possibly a typo or a misnamed file. Make sure the CSS file is called default.css and is located in the CSS folder. Also, make sure everything is spelled correctly.
Share a link to this course
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.
Upgrade now


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.

Upgrade now

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: Creating and Editing Custom Templates.

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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