Tag: joomla/mambo

This is Part 2 of the Joomla Template Tutorial series. Part 1 is here. Part 3 is here.

By now, you should already know what Joomla elements are, particularly Main Body and Modules/Module Positions. Let’s move on:

3. Identify where you want to place your Joomla elements

Now take a look at your mockup and decide where you want to put your Main Body & Module Positions.

Here is mine:

As you probably notice, I didn’t use any of the optional elements. I usually just use Main Body & Module Positions, and worry about the minor ones later on.

And, my template is actually very simple. My motto is: If it can be placed on a module, don’t hardcode it in the template.

A common mistake is trying to put everything in the template. I know some people who put in their menus & banners, when these can easily be placed in modules. Try to avoid these mistakes. Remember that modules are easier to edit than templates.

A template should only be a skeletal framework of your website. As a rule of thumb, only put the graphics and text that you will not be updating for at least 6 to 12 months. For me, these are my logo, my background image, & the tables which provide the division between my content & elements.

4. Create the directory structure

In your computer, create the directory structure below:

• Create a directory called template_name (or any name you want). Don’t put spaces.
• Under template_name, create 2 folders: css and images.

This is where you will be saving your template files, which is explained in the next section.

5. Code the HTML version of your mockup.

It’s now time to write some HTML. You need to take your time on this. Don’t worry if it takes you hours, or even days.

Look at your mockup, and start creating its HTML version — yes, with all the title, head, body, table tags. For purposes of this tutorial, save it as template.html.

Include also your logo & other graphics you have decided should be part of your template.

For those who are “HTML-challenged,” if you are using Fireworks or ImageReady, you can use the export to HTML function. Most will probably design their first template using WYSIWYG editors such as Dreamweaver & Frontpage. There are, however, some people who are proficient enough with HTML that they can use a text editor. Again, use the tools you’re most comfortable with.

Where to save your files. By the way, your files should be placed in the proper folder / subdirectory. Remember the directory structure you created in the previous step? Here is a brief explanation of what should be saved where:

Folder	Save what files
template_name	template.html (which will be renamed later on to index.php)
template_name/images	All images
template_name/css	CSS file (template_css.css)

 

You can start coding your Cascading Style Sheets, too. If you’re not sure how to go about this, just create a blank text file with the filename template_css.css. Or, you can also use my Blank CSS Template for Joomla which includes all the styles that is used by Joomla.

Remember to save your template_css.css file in the proper folder: /template_name/css

6. Rename your HTML mockup to index.php

Backup your template.html file, and save it in a different folder. Now go back to your template.html file (the one that is located under template_name), and rename this to index.php.

7. Enter the code for the Joomla elements

It is now time to put the Joomla Element Codes in your template. You see, there is a special code assigned to each Joomla Element. You simply have to enter these codes where you want your Joomla Element should appear.

Open index.php (formerly template.html) in your text editor. You can also use Dreamweaver, but make sure that you are in Code View. Now locate where your Joomla elements are located, and paste its corresponding code.

Joomla Element	Code
Main Body	<?php mosMainBody(); ?>
Module	<?php mosLoadModules ( ‘module_name’ ); ?> Note: Change module_name to what you want to call your module. For example, if your module name is right, your code should be <?php mosLoadModules ( ‘right’ ); ?>
Date	<?php echo mosCurrentDate(); ?>
Footer	<?php include_once( $GLOBALS[‘mosConfig_absolute_path’] . ‘/includes/footer.php’ ); ?>
Pathway	<?php mosPathWay(); ?>
Site Name	<?php echo $mosConfig_sitename; ?>

For example, if you want to put the Main Body in the center table, then you have to put the code <?php mosMainBody(); ?> inside that table.

This ends Part 2 of the Joomla Template Tutorial. Click here for Part 3

This is Part 1 of the Joomla Template Tutorial series. Part 2 is here. Part 3 is here.

This is an article that I’ve been delaying because its not the easiest thing to write. But as luck will have it, I decided to do a redesign of my website, & decided not to put this off any longer. Hit two carabaos with one stone, so to speak.

Some notes:

• The instructions are meant for Joomla 1.0.12
• This tutorial is for those who are already comfortable with HTML & CSS.
• Unfortunately, I will not be touching on the CSS of Joomla. CSS is an entirely different animal altogether, and if you think about it, is outside the scope of any template tutorial. I will, however, try my best to cover the different styles that are called by Joomla in another article.
• For the purposes of this tutorial, the new template design of chette.com (v5.00) is used for illustration purposes.

Please do give me feedback about this tutorial (either thru my contact form or thru the comment form). Tell me what you think of the article, any suggestions for improvements, or even your own tips.

1. Conceptualize the design of your website

Before doing any template development, the first step is always to come up with the “look” of your website. I personally use Macromedia Fireworks (now Adobe Fireworks), or doodle on good ol’ fashioned paper.

Use the graphics program you’re most comfortable with. And yes, enough of this Photoshop vs. Illustrator vs. Fireworks debate.

As a general rule, make the mockup as simple as possible. Try to avoid designing mockups which require you to use complicated nested tables.

Below is my mockup:

2. Identify the Joomla elements to use

While designing your mockup, you need to decide which Joomla elements you need to use. This is where it gets tricky for newbies. What are Joomla elements, anyway? I will try to explain this part as simple as I can, and then show you examples so you can get a better idea.

You should treat Joomla like furnishing your office space. Where do you put the tables, the cabinets & chairs?

Your blank template page is the room itself. The tables, chairs, & cabinets are the Joomla elements. Where do you want to put your articles? How about the list of latest news? The menu?

There are 2 major elements that you need to be aware of: Main Body & Module Position. Most, if not all, Joomla-based websites use these two.

Main Body is where your content items will appear. This is the meat of your website – full contents of your article, list of articles of a particular category, your guestbook, etc. They all appear on the same place on a page — not at the same time, of course, since it depends on what menu item was clicked. For instance, your guestbook will appear if you clicked on Guestbook, and your article will appear if you click on the link to your article. But basically all these are displayed on the same position, which is the main body.

Modules are your menu, polls, headers, custom text, banners, etc. It can even be static text. Some people call this “sideblocks.” Let’s just say that these are the mini content items that can appear around your Main Body.

Now Module Positions are where you want your modules to be placed. You can name it any way you want, but it is advisable that you use a highly descriptive name such as right, left, top, bottom, footer, etc.

If your polls and your menu will be placed on the same part of the page (for example, on the right side, but on top of each other), only define one module position for that (“right”). Why? Because you can have multiple modules in the same module position. You can even change the ordering — which module will appear on top, etc.

And another thing about modules: You can make a module to appear only for a specific menu item.

For example, you have 2 menu items called Cars & Motorcycles. Whenever your user is reading an article under Cars, you want a graphic module to appear. However, when your user is reading an article under Motorcycles, you want another graphic module to appear, but in the same module position. This is possible. You just need to set it in the Administrator later on.

Modules are very powerful. Almost anything can be placed on a module. I know people who merely upload a barebones template (practically blank), and just put their logos, mastheads, & other graphics in modules. It makes templates a lot easier to maintain.

There are more modules built-in to Joomla, but they are optional:

1. Date. Displays the current date, based on your web server’s system date.
2. Footer. For copyright notices at the bottom of the page. I personally don’t use this because it’s a lot cumbersome to edit. I merely define a “bottom” Module Position and put my copyright text there.
3. Pathway. The breadcrumbs navigation of your website. For example: Home > Menu > Article
4. Site Name. Use this if you want the name of your website to appear anywhere else in your page.

This ends Part 1 of the Joomla Template Tutorial. Click here for Part 2.

It is good SEO practice to put the page title first in your title tags, and then your site name. Unfortunately, by default, Joomla places the site name first before the page title.

To change this, grab a copy of the file /includes/joomla.php

Around line number 507, replace this:

$this->_head['title'] = $title ? $GLOBALS['mosConfig_sitename'] . ' - '. $title : $GLOBALS['mosConfig_sitename'];

With this:

$this->_head['title'] = $title ? $title .' - '. $GLOBALS['mosConfig_sitename'] : $GLOBALS['mosConfig_sitename'];

When using the mambot {mosimage}, Joomla automatically puts a horizontal space (hspace) around your image. This can destroy a website layout, especially one that is specifically sized up to the last pixel.

An alternative, of course, is to just use the <img> tags in inserting images. However, this has a weakness: The paths are not dynamic. This means that if you need to move your Joomla installation to a different folder, you will need to find all instances of your tags, & replace them with your new path. This means that the mosimage mambot a distinct advantage.

To change mosimage’s hspace value to zero:

1. Open /mambots/content/mosimage.php
2. In approximately line 175, change

   hspace="6"
   to
   hspace="0"

Alternatively, you can simply just remove the hspace value all together.

Line 175 will thus look like this:

$image .=' alt="'. $attrib[2] .'" title="'. $attrib[2] .'" border="'. $border .'" />';

Note: This was written for Mambo 4.5.1a Stable and AkoComment 2.0

AkoComment gives your users the capability to post comments on content items. I personally use this on my website. AkoComment puts links to comments on the homepage. Unfortunately, this does not look visually appealing, most especially if you turned on Read More of Mambo.

1. To remove the comment link from the homepage, open the file Mambo/mambots/content/akocommentbot.php in your favorite text editor.
    
2. Go to the code near the bottom of the file, approximately at line 268.
    
3. Comment-out some of the code, like so:

# If we are not on the content page
} #else {
# $replacementlink = ($ac_openingmode) ? "<a class=\"readon\" href=\"javascript:void window.open('".sefRelToAbs("index2.php?option=com_content&task=view&id=$row->id&pop=1&page=0")."', 'win2', 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no');\">" : "<a class=\"readon\" href='".sefRelToAbs("index.php?option=com_content&task=view&id=$row->id")."'>";
# if ($ac_mainmode == "0") {
# $row->text = str_replace( "{moscomment}", "<p><img src='$mosConfig_live_site/components/com_akocomment/images/comment.png' hspace='5' align='absmiddle'>$replacementlink"._AKOCOMMENT_WRITECOMMENT." ($total "._AKOCOMMENT_COMMENTS.")</a></p>", $row->text );
# } elseif (in_array ($row->sectionid, $seclistarray)) {
# $row->text = str_replace( "{moscomment}", "", $row->text );
# $row->text = $row->text."$replacementlink"._AKOCOMMENT_WRITECOMMENT." ($total "._AKOCOMMENT_COMMENTS.")</a>";
# }
# }

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.

Note: This was written for Mambo 4.5.1a Stable

By default, the contact form of Mambo will display the contact information, then the text “Send an Email to this Contact,” followed by the actual email form.

To change the text “Send an Email to this Contact:”

1. Download the file /Mambo/language/english.php to your computer.
     
2. Open the downloaded english.php file in your favorite text editor.
     
   Note: It is highly recommended to backup this file before making any modifications.
     
3. Look for the line containing the following text:
   
DEFINE('_EMAIL_DESCRIPTION','Send an Email to this Contact:');

4. Change the text Send an Email to this Contact to your desired text. Make sure that you only modify the text between the quotation marks (‘ ’). Leave the rest of the code intact.
     
   For example:
   
DEFINE('_EMAIL_DESCRIPTION','Hey! Email me now!');


Note: This was written for Mambo 4.5.1a Stable

Mambo has a special feature to make your URLs Search Engine Friendly (or SEF). This means that your URLs can be converted to a format that is recognized by most search engine spiders, giving your website a higher placement in search results.

An explanation

Website packages such as Mambo generate your website dynamically. Because of this, these websites usually have URLs containing certain special characters, such as ?, =, and &.

For example, the About section of chette.com used to have the following URL:

http://www.chette.com/main/component/
option,com_frontpage/Itemid,1/index.php?option=com_content&task=view&id=23&Itemid=48

Some search engines do not recognize URLs containing these special characters. This prevents some search engine spiders from indexing the other sections of your website, which may give your website a lower ranking in search results.

This website has SEF enabled, thus the About section has this URL:

http://www.chette.com/main/content/view/23/48/

Because search engine placement is important to a majority of web owners, the SEF feature of Mambo is usually activated.

SEF requirements

In order to use Mambo’s SEF feature, your server must meet all of the following requirements:

• It must be running on Apache
• It must have mod_rewrite enabled
• It must allow .htaccess override

When in doubt, as your host provider if your server fulfills the above requirements.

Enabling SEF

Note: It is highly recommended that you make a backup of your files before doing any modification.

1. Download your configuration.php file from website’s server, and save this on your computer.
     
   Open this downladed file in your favorite text editor.
     
   Now look for the line where $mosConfig_sef appears, and change the value to 1 (the default value is 0).
     
   Don’t change anything else, not even the quotation marks. The line should look like this: $mosConfig_sef= "1"

   

     
   Upload configuration.php back to your server, overwriting the old one.
     

2. Login to your server once again, and look for the file htaccess.txt in your Mambo main directory. Rename this file to .htaccess
     
   Please don’t forget to include the period (.) before “htaccess”
     
   Note: Most FTP clients nowadays allow for the renaming of files by simply right clicking the file, and selecting rename.
     
3. Login to your administration panel (/Mambo/administrator/).

   

     
   Go to Site > SEO. Verify that Search Engine Friendly URLs is set to Yes.
     

4. Test your website. Check if the URLs are already search engine friendly.
     
   If you encounter any
   errors, a good resource is the Mambo’s support community. Don’t forget to do a search first before posting a new thread.

Some of you might have noticed the new footer line on the website. Yes, for the past week, chette.com has been running on Mambo, an open source Content Management System (CMS).

Chette.com has been formerly using pMachine as its main engine. I had some reservations since the beginning — the developers have released a commercial version of pMachine, a big sign that support for the free version will be affected. Sure enough, months after I have downloaded it, pMachine is still stuck on version 2.3.

The decision to finally make the switch came in late 2004, when comment spams started invading this website. Manually deleting each spam was becoming a chore, as there is no comment moderation in pMachine (nor were there any patches or fixes released, for that matter). This made me realize the importance of a stable support system and community, especially with the continuous emergence of new spam techniques and website viruses.

The Shortlist

There were two packages left in the shortlist: Tikiwiki, and of course, Mambo.

It is a personal choice not to include Nuke packages (no offense to the users of PostNuke and PHP-Nuke):

• I have this (maybe unfounded) fear that Nuke sites are a security risk waiting to happen,
• I am very uncomfortable with their administrative interfaces, and
• Sad to say, I have not been exposed to Nuke sites which have impressed me. Call me unreasonable, but this is one of my personal ways of really determining the ease of customization of a CMS package.

Why not Tikiwiki

For those who are not aware of Tikiwiki, it is an engine with enough features to make any website owner drool — polls, wiki, blog, image gallery, banner ads, etc.

The main caveat, aside from its clunky frontend and backend interface, is that this particular version Tikiwiki seems to disregard the basic functionalities of articles management — for instance, in the lack of flexibility in the display of category headers.

It does, however, have a lot of options for their blog and wiki. This may be attributed to the general direction of the development, which I found disturbing. For one thing, a lot of people (this writer included) already conceive that there is a very thin line between a blog entry and an article entry.

I actually believe that “blog” and “wiki” are mere methods of manipulating or displaying articles, and that article management, display, and categorization should be given priority by any CMS system.

Why Mambo

Mambo, winner of the Linux User & Developer Award 2004, gained extreme popularity last year. We ran a test during the 2nd quarter of 2004 on PhilMusic.com. However, this test did not produce any satisfactory results. Mambo was, at that time, a diamond in the rough.

However, this particular version, Mambo 4.5.1a Stable, was enough to bowl me over.

Ever heard of the expression “love at first sight?” In evaluating a website package, it is usually “love at first sight of the admin interface.”

Even in my full-time job as a software project manager, I emphasize usability each project, and make sure that usability tests are included in all test cases. I have learned the hard way that usability is the primary thing a Customer wants, yet ironically rarely stated in Requirements Specifications.

As a website manager of a personal CMS-based website in my spare time, the first impression is on the organization and labeling of the administration. Mambo’s usability might not yet meet the standards of Jakob Nielsen, but it is enough to merit the over 100,000 downloads of its current release alone.

As with most website managers, a big concern is the speed of maintenance and incorporation of templates. Mambo is living up to its “Power in simplicity” slogan, with an easy-to-use article management interface. Articles, or items, are classified into Categories, and Categories are classified into Sections.

Adding an article is pretty straightforward — all the pertinent fields are displayed on one page, and merely involved copying and pasting the articles. It also features the capability to include images in the body of the article by simply selecting the desired image from a list, and specifying the desired position.

Adding an image can be done on the same page, or thru Media Manager. I personally use the Media Manager to be able to control the folder structure of the images.

Customizing the templates was the ticket. The template basically involves two files (index.php and template_css.css), and there are numerous tutorials available on the internet. Cascading Style Sheets (CSS) plays a major role on the templates, and the CSS guide found in Visual Density is sufficient to determine what needs to be modified.

One of the biggest strength of Mambo, though, is on its strong support community. Mambo’s forum is a wealth of information, as long as you use the search feature wisely. The people in this community have an amazing knowledge on the Mambo code structure and an admirable sense of altruism.

There are still some features I would like to see in Mambo, though:

• Commenting feature. Although there are downloadable commenting modules for Mambo, I would still like to see this feature as part of the package’s core components.

  The Mambo website explained that the lack of commenting support is due to the fact that Mambo is concentrating on its CMS features. However, I beg to disagree. There is already a paradigm shift on the definition of an article. Comments are now being seen as integral content, as they are being used by authors to update information about an article, and also by the readers to contribute to the article.

• Capability to display a unique thumbnail for each content item.
• Capability to display a unique category image (or header) for the article listing and viewing of the article.
• User permissions. This particular release only supports two kinds of users: registered, and public (or anonymous).
• A more usable menu and module interface . There are some menu display configurations that I have not yet figured out, which are located both in the menu and module interfaces.
• A community to develop stronger integration with other open source applications such as phpBB and Coppermine.

And to conclude

As of this writing, chette.com is now proudly powered by Mambo.

This doesn’t mean though that I am closing my doors on the other CMS engines. As what we have learned thru our Mambo experience, what we have despised before may be what we might end up using in the future.

There is a steady growth in the open source development community, and as long as this community is around, I shall watch with baited breath on discovering the magic that they continue to perform.
Learn more about prices
.