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

Joomla! 1.5: Styling with CSS

The theory of working with more than one template


From:

Joomla! 1.5: Styling with CSS

with Jen Kramer

Video: The theory of working with more than one template

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.

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: Styling with CSS
2h 29m Intermediate Jan 09, 2009

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.

Topics include:
  • Using the Firefox Web Developer toolbar
  • Styling Joomla! modules
  • Styling a multi-page article
  • Creating horizontal and vertical menus
  • Incorporating images in menus
  • Styling banner ads
Subjects:
Developer Web CMS Web Development
Software:
Joomla!
Author:
Jen Kramer

The theory of working with more than one template

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.

Now what I would like to do is add another link to the footer menu. So I am going to click on the New button. When asked what type of link that I should include, I am going to include a User type of link. Here, I would like the Default Login Layout. I am going to give this a Title of Login, I am going to give it an Alias of login, and I do want it to appear in the Parent Item at the same level as Privacy Policy and Terms and Condition, so I am going to leave that alone.

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.


Expand all | Collapse all
Please wait...
Q: I’m having trouble understanding the role of the Start Level/End Level function in developing a menu, as described in the  “Styling Menus Vertically” video.  What is the key to understanding this function?
A: The Start Level and End Level are the way a menu is segmented, to show all or part of that menu.

By default, the Start Level and End Level are set to 0. This means that the entire menu will show.

If you would like to have just the top level navigation show (perhaps for a top menu bar), but none of the secondary, tertiary, or deeper navigation, set Start Level to 0 and End Level to 1.

If you would like to have just the secondary navigation show (i.e. you're in the "about" portion of the site and you'd like to have the about secondary navigation show on the left side of the page), set the Start Level to 1 and the End Level to 2. If you'd like to show all of the navigation (secondary, tertiary, and any deeper navigation), set the Start Level to 1 and the End Level to 0 (i.e. infinite).

The only tricky part about setting the Start and End Levels is that zero means different things in different locations.

For the Start Level, zero means the very beginning of the navigation. Engineers start counting with zero, while we are normally taught to start counting with 1, so this may be the cause of some confusion.  This means that 1 actually corresponds to the second level, 2 to the third level, and so forth.

For the End Level, zero indicates "infinity", or however far out the navigation goes.
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: 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
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