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

Working with a template based on the default

From: Joomla! 1.5: Styling with CSS

Video: Working with a template based on the default

Finally it's time to clean up this Home page and make it look a little bit prettier. Let's start by taking a look at the CSS. CSS > Edit CSS. You'll notice in the Firefox Web Developer toolbar, we now have four style sheets. We saw that in the previous movie, when we were looking at the link statements for each of these style sheets. default. css is the style sheet that's associated with the interior pages of this website, not the Home page. So we don't want to be making changes to default.css.

Working with a template based on the default

Finally it's time to clean up this Home page and make it look a little bit prettier. Let's start by taking a look at the CSS. CSS > Edit CSS. You'll notice in the Firefox Web Developer toolbar, we now have four style sheets. We saw that in the previous movie, when we were looking at the link statements for each of these style sheets. default. css is the style sheet that's associated with the interior pages of this website, not the Home page. So we don't want to be making changes to default.css.

Where we want to be making our changes is on home.css. You'll notice that we have no styles at all. We're going to have to put those in. Just to remind you again, let's take a look at where we're going with the styling of this Home page. Note that the background is all brown, including that graphic that we had in the footer. Our link colors are no longer that teal, they are now hot pink. We've also cleaned up the way that table looks with the pictures and the text.

So let's start writing some styles for this particular webpage. I am going to start by getting rid of the background, so that we're not looking in a teal background, I am going to make a brown background. This was controlled by container in the default style sheet. I am going to copy the container style by highlighting, Ctrl+ C or Command+C, and I am going to go to home.css, Ctrl+V or Command+V. The piece I am going to change here has to do, first of all, with the background.

I am going to get rid of the background image, which I no longer want and I am going to change the background color to 46311c. I don't need to repeat the width or the margin declarations here. In fact, it's bad, if I do because if I keep extra declarations here in the container, if I ever change the width of this website, the Home page would stay the same width that it is right now, which may not be what I want.

So I am going to get rid of these extra declarations. We're going to follow the same procedure for other styles for this webpage. Next let's change the link colors for this page from teal or white to a hot pink. I think, we can just change that by using this, a:link a: visited, statement, Copy, and I am going to place just above the container declaration, Paste. I am going to change the color to pink, b1174e and that's change the colors here in the main content area, but I haven't changed the colors over on the left side. So we'll need to do that next.

Down in the left part of the style sheet, we have a declaration here for left ul a:link, right-click, Copy, back to the home, and after the container, I am going to right-click, Paste. I am not going to change the font- weight or the text-decoration. Those are going to stay the same but the color is going to become that hot pink again, b1174e. Next, I would like to rearrange the content and the left bars a little bit on this page. On the home page, I have made the content area a bit wider and I have made the left bar a bit narrower.

So I am going to need to copy over my content style as well as my left style and change some width. I will, probably, also change some padding. So let's start with content. Up in content, we're going to highlight, right-click, Copy. On the home page, I am going to put that about here, right-click, Paste. First of all, there is no contentright in this document, so I am going to get rid of that. Second of all, I don't need to float this right. I am still going to be floating it right from before and I am not going to change the padding for this one. I am just going to change the width to 530 pixels. Just as reminder, we don't want to keep those extra styles in the style sheet. We want it very stripped down because we are specifically going to override things that are in the default style sheet for this page.

Think of that as a series of overrides as well as unique styles to the home page. Now I am going to adjust the left side of the page. Well, it looks fine here in Firefox. The width of that left side is about 300 pixels. I think the design is probably going to break in Internet Explorer. So let's copy that over and fix that now. So down under the left, we're going to copy the left style, right-click, Copy. Over to home and before the link declarations, we're going to right-click and Paste.

Once again, I don't really want to change the padding but I do want to change the width. Let's make it 200 pixels, instead. As I said, the page design doesn't change but this design is now less likely to break in Internet Explorer. Now let's pull in that footer image. As I have said many times before, it's hard to see background images in Firefox Web Developer tool bar but we do have a different footer image that we are going to want to use here. In the interior pages of this website, the footer image is a dark teal in background. Now we're going to replace that with a dark brown background.

So we're going to go back to default.css, scroll down to the footer section of the style sheet, and we're going to Copy. right-click, Copy. We're going back to home and at the every end of the style sheet, we will right-click, Paste. None of this will want to change but oddly enough, just by having this declaration without any changes to it here, this is going to override the settings from the default style sheet.

This is a relative path. This is now pointing to the images folder associated with the home template, as opposed to the images folder associated with the inside template. So the brown background image will, in fact, load. Those are the main styles that we need to change on the template portion of this itself. Let's copy these into Joomla!. Then we'll come back and we'll adjust the rest of that home page article and clean that up a little bit. So highlight everything, right-click, Copy. Go to the backend of the website, and we're going to go to Edit CSS, home.css, Edit, and we're going to right-click, Paste. I am going to Apply because I am going to make some more changes. Now we'll go back to the front end of the website and we're going to refresh.

Now we just need to clean up these pictures, so that they line up nice and even, and clean up that text a little bit which also looks a bit ragging. So back to CSS > Edit CSS, and we're going to edit the home page css. First of all, under content, let's add a style, content.hometable. I will assign this table a class of hometable, when I put the article in the article manager. You can't put in your own classes associated with some of these articles.

So in hometable, I am going to set the width to 100%. This will make sure that the table stretches the full width of the content area. Next, I need to style the individual cells here. So let's style #content table.hometable td. That'll style the individual cells. First of all, there is only three cells, so let's set the width to 33%. That'll make sure that they are spaced evenly. Then we need to set our vertical alignment to the top. I am also going to set my text alignment to the left. I also think the font size would do better, just a little bit smaller. So let's reduce that and let's put a little bit of padding on the right, so there is some breathing room between these.

Now let's copy our css into our Joomla! style sheet. Once again, we're going to highlight everything, right-click, Copy, to the backend of Joomla, highlight everything, right-click, Paste, and Save. Let's refresh the home page and now our images are all lining up. They look a little bit crooked still because the widths of the images are slightly different. Notice that our revised footer graphic is in place, making this whole page look brown.

If I go to the Products page, you'll see that we still have the same old template in place for our interior pages but we have a very radically different looking Home page. Having different Home page and interior page templates is a great way to make our Home page pop from rest of the website. It also shows off your Joomla! mastery, as you come to bend Joomla! to your will. If you haven't done so already, take a look at the Creating and Editing Custom Templates in Joomla course which will teach you how to create a home page that looks completely separate from the inside pages of your website.

Show transcript

This video is part of

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

22 video lessons · 15875 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.