BlueFreelance

At the moment, I and my partner are working on a Joomla implement project. As usual, Andy had worked on design, he made PSD lay-out, and I implement Joomla, Wordpress or some PHP CMS into that. In this project, we worked on a Jomla site, which has made from others. This is the problem, Joomla is powerful, of course but it is not suitable for a complicated lay out, like Andy has made. We have 3 different structures, which need apply in a Joomla template.

As we can see, the structure of the homepage is completely different, compared with sub-pages. The client has approved the design, and we cant have enough time to rewrite the new CMS for this project. We have only 1 week to process everything from PSD layout, to CSS/xHTML and implement this into Joomla.

At the beginning, I intended to make two templates, and then assign one to homepage and one to sub-pages. However, this way is not applicable. Then, I tried to use jQuery framework to detect homepage and subpage, and then edit the lay-out by javascript code. Again, it is not recommended either.

Finally, I concerned more to Joomla modules, and figure out another way. I am not sure this is the best way but I have not much time to consider when I have spent 3 days to tried others.

Firstly, I create the index file as usual, but it only contains the header of the site (navigation bar only). After that, I create 5 modules, which are 5 kinds of page in Andy ’s design, then load them into the index file, like this:

Next, I go to Joomla Administrator, create 5 new modules. You could name them whatever you want, just remember to which will be put in it.

Now, let’s create new module. In this example, I will create the homepage module. I won’t discuss in details how to create a module. You can easily find it on Joomla site. The key thing here is that we need to put this line:

<?php mosMainBody(); ?>

This will display the content such as article, products from virtuemart, static contetn …

The progress may be clear till this step. Let me summarize. First of all, I create an index.php file, which contain everything in common, include the navigation bar, javascript, css, footer … then I will load each module, which has different structure into the index by using these lines:

<?php mosLoadModules ( 'front', -2); ?> /* Homepage without mosMainBody()*/ <?php mosLoadModules ( 'baochi', -2); ?> /* Static Content */ <?php mosLoadModules ( 'baohanh', -2); ?>/* Static Content */ <?php mosLoadModules ( 'quangcao', -2); ?> /* Static Content */ <?php mosLoadModules ( 'products', -2); ?> /* Product page */

Next, I need to create some static content, which my client want. The important thing is to put them into the mainmenu. Why ? You may know in next step.

Nearly finished, but we still have one thing to do. Still in Administrator area, after upload module we have just created, I need to set it to only display in the content I want. For example, I will set the module products is only loaded in Products section. Joomla will depend on the menu to decide load or not a module.

One by one, I do repeat for each module. I am still discovering a better way, and may let you know in the near future. Any way, take a look at the old and new lay out in this project

This entry was posted on Friday, April 4th, 2008 at 4:19 am and is filed under Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.