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.
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.
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.