Our website will be down for scheduled maintenance on Thursday, October 23, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

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

Embedding a module in your content

From: Joomla! 1.5: Styling with CSS

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.

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.

Show transcript

This video is part of

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

22 video lessons · 15889 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 preferences from 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.