User Login    
 + Register
  • Main navigation
Login
Username:

Password:

Remember me



Lost Password?

Register now!
Who's Online
93 user(s) are online (6 user(s) are browsing XoopsWiki)

Members: 3
Guests: 90

ianez, melgert, mrphilong, more...
[Main Page]

Theme Development

From XOOPS Project

Main Page | Recent changes | Edit this page | Page history | Switch to MediaWiki mode

Printable version | Disclaimers | Privacy policy
Category: Theme And Design

Tutorial

TO: Forum Pool

Kaotik Index

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!

Retrieved from "http://www.xoops.org/modules/mediawiki/index.php/Theme_Development"

This page has been accessed 694 times. This page was last modified 00:13, 9 February 2008. Content is available under XOOPS Project.


Developers for Hire
Local Support Sites
Make a donation
Please select an amount to donate


Do you want your username revealed with your donation?
Yes - List me as a Generous Donor
No - List my donation as from an Anonymous Donor


Powered by
XOOPS Code hosted on SourceForge

Powered by PHP



Powered by MySQL

Powered by Smarty

OSI certified

All content on this site is subject to the Creative Commons License
Advertisement