New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Joomla! 1.5: Styling with CSS
Illustration by

Embedding a module in your content


From:

Joomla! 1.5: Styling with CSS

with Jen Kramer

Video: Embedding a module in your content

There is another Joomla! module that we haven't worked with yet on this website but that I'd like to include; that's the Who is online module and I would like for it to show here on the About page. However, I don't really want it to appear over here on the left side of the page. Where I'd like it to appear is actually embedded within the content, maybe sort of flitting on over here as its own little box. How can you include a module within your content? Actually, it's quite simple. First of all, we have to setup the module. Then I will show you the code that you use to plug that module into your content wherever you'd like it to appear and how you configure that, that's actually controlled by something called a plug-in.

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

Embedding a module in your content

There is another Joomla! module that we haven't worked with yet on this website but that I'd like to include; that's the Who is online module and I would like for it to show here on the About page. However, I don't really want it to appear over here on the left side of the page. Where I'd like it to appear is actually embedded within the content, maybe sort of flitting on over here as its own little box. How can you include a module within your content? Actually, it's quite simple. First of all, we have to setup the module. Then I will show you the code that you use to plug that module into your content wherever you'd like it to appear and how you configure that, that's actually controlled by something called a plug-in.

Then we'll come back to the front end of the website and I will show you how to style it. So let's go to the back end of the website, and we're going to go to Extensions > Module Manager. I am going to create a new module, but of course, you could have used one that's already created and I am going to create the Who is online module. I will give it a name Our Visitors. I will have the title show and I will have it enabled. As for the Position, I need to give it a unique position that is not in use elsewhere on the website because I only want it to show on the About us page and I'd like it to show inside of the content and I don't want any other modules in that area.

So I am going to give it a position of visitors. I can actually leave this set to show on all pages because no other page is going to call for a position of visitors. So I don't have to set this to only show on the About Us page. If you want to do that though, it certainly won't hurt anything. Under Parameters, I can either display the number of guests and the number of members, all of the member names, or both. I am going to pick both. Let's save that. Now that we have our module created, I will show you where you get the code to include this in your piece of content.

Under Extensions, go to the Plug-in Manager. These plug-ins all came with Joomla!. The one we're interested in is Content - Load Module, and if you click that, you will come into a screen that will tell you all about the Content - Load Module. The description says it loads module positions within the content and the syntax you need to use is right here. I am going to highlight that and Ctrl+C or Command+C to copy it because I am going to need it in just a minute.

Over on the right side of the screen, we definitely want the Plug-in enabled. Then we have a choice of style. Right now, it's styled to be wrapped in a table, which I definitely don't want. I'd rather have it wrapped by a Div. Once again, this is equivalent of XHTML versus Rounded for your module settings. So this is XHTML wrapped by divs whereas wrapped by multiple divs would be the Rounded setting. I am just going to make a simple box, so let's wrap it by divs and say Save.

Now, we need to plug-in that little piece of code into the article where I want the module to appear. So under Content, Article Manager, I am going to go to the About page and click on it. Right here, just above the initial paragraph, I am going to Ctrl+V or Command+V to paste in the {loadposition user1}, except I don't want user1, I want visitors and I don't want this in a paragraph because that will wrap a paragraph around the Div, around the content of the module.

So I am going to set my paragraph to None. In other words, I am just going to turn-off the paragraph associated with that code. We can double-check that by using our HTML button here, and that will make sure that our {loadposition visitors} is indeed not surrounded by any markup. There's a straight line break that I am going to take out. You may not have that in your code, and we'll update the page, and now we'll save. Now when I go back to the front end of the website and I hit Refresh, you will see that we have something come up that says, Our Visitors, we have one guest online.

And if I view the source for this page, you will see that we have a Div with the class of module table and there is the content. We have an h3 with some text inside of it. However, not the following, we have this Div with the class of module table, but we also have a Div with a class of module table up here, which is controlling our breadcrumbs. That's why the Our Visitors and We have 1 guest online text is kind of small. The text is the size of the breadcrumbs. So our breadcrumb styling is currently affecting the Our Visitors module.

We're going to want to make Our Visitors module unique for styling purposes because we're going to want to float Our Visitors box over to the right side of the page in a little box. We're going to need to go back into that Our Visitors module and assign a module suffix as I showed you in our earlier video, which will give us some differentiation between the breadcrumbs and the Our Visitors module. So back to Extensions > Module Manager, and we are going to go to Our Visitors and I am going to assign a Module Class Suffix of visitors. Notice how I have kept that word the same all the way through, the Position and the Module Class Suffix. That makes things a little easier for me to remember.

Now, I am going to save and I am going to refresh this page. Now, you'll notice the styling of that Our Visitors has changed significantly. That's because it's no longer affected by the styling for the breadcrumb. Now, we're ready to work on the CSS. Under the default tab, let's scroll down, under the content area and I am going to add a new style, #content div. moduletablevisitors. I'd like to go this a background color first. I am going to use that same color that I used on the Login box which is a5bfc2. So you can see the box there, it goes all the way across the content area.

Now, I am going to give this a width of 150 pixels and I am going to float it right. That's about when I was visualizing this page. Now, I am going to make the font size a little smaller. I actually like the effect that that breadcrumbs font size had on the Our Visitors box. So let's add it here as well which was 0.85em. Now, we're going to need to clean up a margin around that a little bit, and add some padding because the words are right up against the edge of that box. So let's add some padding, 5 pixels should do it and the margin needs to be altered.

What I'd like to make sure that I have is the margin on the left side of the box and the bottom of the box so that my copy doesn't run right into the edges of the box. So we can do that by saying Margin of 0 0 0.5em and 0.5em. The reason I use em for styling the edges of my box is that as the text size increases, so will the space between the box and the text. If you use pixels for the margin setting here, the space between the box and the text will remain constant if somebody enlarges the text size and that could really at some point wind up being no space at all.

Now, what we need to do is take care of that h3. So #content div.moduletablevisitors h3. To make it match other things on the website, I think I'd like to set the font family to Georgia again. Then I'd like to set the color to white, and finally the font size is a little bit big. So let's set the font size to 1em.

I really don't like all that extra space around that h3. That's caused by the margin that's built in within h3. So let's get rid of that, except maybe a little bit of space between the h3 and the text underneath. So we can do that with margin of 0 0 0. 5em and 0. That's just the way I wanted it to look. Let's do a Ctrl+A or Command +A, Ctrl+C or Command+C to start moving the CSS into our Joomla! template. Go to Extensions > Template Manager, and we're going to select our inside template, Edit, Edit CSS, default.css, Edit, Ctrl+A or Command+A, Ctrl+ Z or Command+Z and Save.

Now when I go back to my About page and refresh, we'll see that our styling has taken effect and we've embedded a module inside of an article. Embedding modules in articles can be extremely handy. Sometimes you may wish to have a tertiary menu that shows up inside of your article or maybe you'll want to embed a search box or a login box or something like that. Any of the modules can use the same technique to be embedded inside of an article and they can appear anywhere you want. Although I have floated mine here to the right side of the page, we certainly could have added it to the top or the bottom of the text as well.

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

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

join now 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
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

Notes cannot be added for locked videos.

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.