Theme Development

From XOOPS Web Application System

Tutorial

TO: Forum Pool

Kaotik Index

• Basic content of a module
• using Smarty templates in a module
• Building an AJAX module
• Xoops Blocks
• Guidelines for Module Development
• Theme Development
• $_SUPER GLOBALS
• DB Operations and Classes

Part 6 - Theme Development

Part 1 Building a simple module
Part 2 - using Smarty templates in a module
Part 3 - Building an AJAX module
Part 4 - Xoops Blocks
Part 5 - Guidelines for Module Development

Besides developing modules, I have also developed my fair share of themes. I have never released any because they belong to my clients. So here is some pointers for themes developers.

Think outside the Box.

By analysing the default theme, we can see xoops groups blocks into 5 blocks. The standard layout can be seen below.

insert image

Although this is the standard, you can place the block groups anyway you like. Let's look at some practical examples http://www.bbc.co.uk:

insert bbc image 1 - insert bbc image 2

I've divided the bbc page into 5 blocks:

1. Left Block. It holds 1 single block.
2. Center Left Block. Holds one block.
3. Right Block. Holds one block.
4. Center Center block. Holds several blocks.
5. Center Right Block. Holds several blocks.

I've rearranged the block groups to give me this flexibility. Another mistake is to think that each block group MUST contain several blocks. This is a common misconception. You can place a block group so that it only takes a single block.

Here's another example: http://www.drupal.org

insert drupal image 1 - insert drupal image 2

1. Center Left block
2. Center Center block
3. Center Right block
4. Left block
5. Right block

http://www.cnn.com

insert cnn image 1 - insert cnn image 2

the interesting thing in this example is that the header has a dynamic width while the main body has fixed width.

1. Center Center block
2. Center Left block
3. Center Right block

As you see from my examples, think outside the box. Don't let yourself be limited by "names" where the left block HAS to be on the left; it doesn't. As I've said in part 5 of my tutorials, don't start with code, start with a pencil and piece of paper on your new themes (that's how I do it). If you prefer start with a vector or image program.

Don't let your creativity be limited by software!