Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
It's possible to have more than one template controlling your website within Joomla! So we have decided to completely redesign the Home page of the website. The inside pages are going to continue to look as we build them to this point in time, but the Home page, we are going to change around. We have gotten rid of Our Featured Products and we have got rid of the Login box. Now what we have is this nice brown for the whole Home page, with three columns, advertising three featured products in the middle of the Home page.
Note also, at the bottom of the page because we got rid of the Login, we have to add a link to our Login page. The Login box itself didn't really seem to fit, graphically speaking, on this Home page. So just to remind you where we are starting, here is our current Home page. So the approach we are going to take with this is, first of all, we want to make sure that we get all of the content in place. Then we are going to install the template and then at that point, once we have got that template and the new content in place, then and only then will we start working on the CSS. We are going to make the CSS changes in the next video and I will talk more in detail about, how our home template is going to work in conjunction with our inside template, in terms of sharing styles.
So let's start by changing out the content on the Home page. The article, for the Bliss No. 5 all natural CHOCOLATE, has changed completely and you will find it in your Article Manger. So let's go to the backend of the website and we are going to go to Content, Article Manager, and the new article for the Home page is called Bliss No. 5:Blissful Chocolate. If you will click on that, you will see that the page is setup here. We have pictures and we have all the text, all ready to go. Now what we need to do is get this on the Home page.
Now we need to alter the Home page link to point to this new home article. So we are going to go to our Menu Manager and we are going to take a look at the Main Menu. We are going to click on the Home link and we are going to change the article associated with the Home page to Blissful Chocolate. Notice here that for the Home page, I am actually using an article layout for the Home page, rather than the default home page blog layout. That's because I really only want one article to display on the Home page and the article layout code is much less bloated than that Home page blog code. It has all kinds of nested tables in it and all kinds of things that I don't need.
I changed the Menu Item Type to Article Layout because it's just working better for me. So let's save this and I am going to refresh my page, and it's going to get pretty ugly really fast. So there it is and obviously, this is completely unstyled but we are getting an idea of where this is going at this point. Here on the Home page, you will see that it says at the top, Bliss No. 5:Blissful Chocolate. That's the title of this article and in the direction that I am going, I really don't want the title to show above these things.
I just want to have the pictures with a little text underneath. So what I need to do is I need to turn off the article title. Let's go back to the backend of the website and I am going to go to Content, Article Manager, back into Bliss No. 5 :Blissful Chocolate. Over on the left side of the screen under Parameters( Advanced), you will see an item for showing the title. Right now, it's using the Global setting, which is to show the title of all of the articles, but for this article, we don't want the title to show.
We are going to set it to No and Save. Now we are going to go back to the front page of the website and we are going to refresh. The title for the article has disappeared. Our next job is to add that link to the Login page down at the bottom of the screen here. So what I want to do is add another link that says, Login, right here after Terms and Conditions, because ultimately this Login box is going to go away. So back to the backend of the website and let's go to Menus, the footer menu.
Then I am going to look over here on the right hand side of the page, should I show a Login page title? Sure. How about we call it, Login? For the Login Description text, we need to put back in the same text that we had on the webpage before, "Login to find out about specials just for our favorite clients!" There are many, many other settings in the screen; you can try these out. Whether you want to have some kind of login messages, descriptions, redirections, and so forth. Go ahead and get some of those settings to try, if you like, but we are just going to leave it this way for the moment.
So I am going to hit the Save button and I am going to go back to the frontend of the website and Refresh. Now at the bottom, we have a link for Login. Notice that we are not quite totally centered down here on the footer anymore, but you know enough now to go ahead and re -center that footer on your own. Let's go into the Login link and see what we get for this webpage. We have a big old Login box, just the way it used to be before we styled it on the Home page of the website. I am going to leave this for you to go ahead and clean up and make it look a little bit prettier. Back to the Home page.
Our last step is going to be installing the new home page template. I have already built this template for you. If you would like to learn more about how to build the templates from scratch, I would encourage you to watch the Joomla! Creating and Editing Custom Templates course. Back to the backend of the website, we are going to go to Extensions > Install/Uninstall, and we are going to upload a package file. Click the Browse button and we are going to go to our Exercise Files_CSS, we are going to go to Chapter05, the first video, 05_01, and we are going to select home.zip. Don't unzip the file first; we do want it zipped. Go to Open, click Upload File and install. You should get a message that says the template installed successfully.
It hasn't been applied to the front page yet, we need to go and assign that template. So we are going to go to Extensions > Template Manager, and you can see that the home template is here in the list with the other templates for the website. I am going to select the home template and click Edit. In this screen under Menu Assignment, I am going to pick Select from List, and then select just the Home page. This will apply the home page template to just the Home page of the website. I don't want it on any of the other pages. So I am going to say Apply, and from here I am going to go to the Home page and Refresh.
Notice that things changed pretty dramatically here. Why did all those changes just happen? Let's have a look at the HTML and I will explain to you, how this home page template is different from the other templates that we have been working with to this point. In the backend of the website, click on the Edit HTML button. This is the code that drives the home page template. There are a few things in here that you should know. The first one is we start off at the top with some style sheet links. The first two are to some of the system CSS settings. The style things, like balloons, editing systems, and so forth. They are generally used in the look and feel of the website, for most things, except for those things that are behind the scenes. They are good to include for the template.
The third line here under our style sheet links is a link to inside our interior template for this website, default.css. So we are actually making a call to our default template because about 90% of the styles that we are going to use on the Home page, are already defined in the default template. Pulling them in this way is great because it makes your maintenance much easier for the website. You only have to make some changes in one location, rather than changing some things, such as a font- family or size, in two locations to maintain a consistent look to the website.
Finally, the last line is a link to home.css, which is the style sheet associated with this template file. That's where we are going to be making all of our changes. In general, we are going to be overriding many styles that are already defined in default.css. Further down on the page here, you will notice that we no longer have a right side to this webpage. That's why the Featured Products and the Login box no longer display, because their module positions are never called.
As for the top navigation, we have done something pretty tricky here in this template. Take a look here, close to the bottom of the template, we have a div with an id of "left", but then we make a call for modules in the position of top. Top was the position that was used for the main navigation, for the interior pages on the website. We are putting it on the left side here. So now it's picking up the left styling, as opposed to the top styling, for the webpage. That means we don't have to create yet another module just for the Home page navigation. We can just use the one we already have.
Let's go ahead and save this template. Now we are ready to start writing the CSS to clean up the look of this Home page. Be sure you take note of the order in which I did this. The first thing we did was to make sure that we had all of the content in place. Now we are going to go back and do the styling. It's very tempting to work on the styling, when things look so ugly, as they do on our Home page right now; but you wind up creating more work for yourself, if all of the content isn't in place first. You will wind up having to go back and do things over again as you add more content.
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.