Module Basics: Putting custom HTML content on the sideblocks

Note: This was written for Mambo 4.5.1a Stable

Mambo allows you to easily include custom HTML content on the sideblocks of your website. For example, if you want to put a donation button on the right column of your page.

The old way of doing this is by hard coding the custom HTML content on your template. This, however, would be a time-consuming process. Imagine if you just need to correct a misspelling, or if you simply want to temporarily hide this content from your users — you would need to edit and manually upload your new template every time.

Additionally, if you hard code this in your template, your custom HTML content will be displayed on all your pages. As a general rule, the only things that you should hard code in your template are the elements that you want to appear permanently on all your pages.

Mambo has a more efficient way to add custom HTML content through modules. In most templates, modules are the sideblocks (or sideboxes), usually located on the left and right columns of the website.

Modules can contain various things – text, HTML, or components such as menus, polls, newsflash, etc.

Modules can also be placed on various positions. Most templates use the left and right positions. As the name suggests, the left position are for modules you want to put on the left side of the website, and vice versa. (You can also create custom positions – header, footer, etc. I’ll try to cover that in a future article.)

The Project

Let’s say we want to put the text “Mabuhay! Welcome to my homepage!” in the left-hand portion of chette.com, right below the menu. And, we would want this text in boldface font.

The first step is to login to your administration page. This is located in /YourMambo/administrator/. Then, from the top menu, go to Modules > Site Modules.

This will bring you to your Site Modules page. You should now be able to see the list of the modules of your website.

We now need to create a new module. On the upper right hand side of the page, click on the New icon.

This will bring you to a form where you can enter the information about your module.

Let’s start with the Title. The title is how you would like to call and appear on your module.

For the purposes of this project, let’s use “My Module” as the title.

In Show title, we will be selecting Yes. (If we only want our HTML content to appear, without the title, then we would be selecting No.)

Now we will specify where we want to place our module. If you are not yet comfortable with modifying your template, it is safest to just use the left or right positions. Most templates use these positions.

For this project, we will be choosing the left position, because we want our module to appear on the left column.

Module Order determines the ordering of all the modules that were placed in that position. Remember: There can be more than one module for a position. In chette.com, there are actually two modules placed in the left position: (1) the menu and (2) the newsletter module. The newsletter is ordered lower than the menu, so it appears at the bottom.

For this project, we are going to select the first item (1::Main Menu), because we want it to appear below the Main Menu module.

In Access Level you can define who can see your module — all users (Public), or only users who are registered on your website (Registered). For this project, we will be selecting Public.

Published is a very useful feature. Selecting Yes means your module will be displayed (or “published”) on the website. If you select No, then this module will be hidden from all your users. This is useful if you need to temporarily hide or disable a module on your website.

For this project, we would be selecting Yes.

Content contains the meat of your module. This is where you put the content that you want to be displayed. You can put HTML code in the Content field, including image tags, forms, etc.

For this project, we would be entering the following HTML:

<strong>Mabuhay! Welcome to my homepage!</strong>

On the right hand side, you will see a tab labeled Location. Location is where you select the menu items that will display your module. (This is confusing to a lot of people because of the text Module Position. This is not the same as the module positions that was previously discussed in this article.).

For example, I previously created a menu item called Mambo Tips (which points to the Blog Content Category also called Mambo Tips). If I select Mambo Tips under Menu Item Links, then the module will only appear for anything that can be found in Mambo Tips, like if a user reads a Mambo Tip article. If I select None, then the module will not appear anywhere (similar effect when you set Published to No).

For this project, since we want the module to appear on all pages, we will select All.

We will not be using the Parameters tab for this project, but here’s an overview: The Parameters tab (beside the Location tab) lists some configurations related to RSS (when you syndicate news to other websites). At the bottom is a field called Module Class Suffix, which you can use to define custom CSS for this module.

Now we’re ready to save the project. On the upper right hand side of the page, click Save.

Our module will now appear exactly where we want it to be.