History
I'm a big fan of industrial design from the 50/60's and this tutorial was inspired on a poster I saw from that time.


Step 1 Creating the background
Open your favorite image program a create a png file similar to image 2. It's size should be 310px x 175px. Size is important because we will be using coordinates to place our menu items.
image 2



Step 2 blank html
Create a folder in your web server, name your background image "back_mm_opt.png" and place it inside this folder. Now create a blank html file called "mainmenu.html" (in same folder) and place the folowing code in it:


This is the base for our project. We will create 7 menu items. This means you will be able to install up to 7 modules and they will appear correctly. You can later adapt this for as many items as you like.


Step 3 Menu items
Open mainmenu.html and replace all code with this:


Run mainmenu.html, it should look like image2. What we have done is place all our menu items and correctly position them.

They are all relativly placed inside the div.
Now let's transform this into a xoops theme.

Creating a xoops theme
Make a copy of xoops default theme and name it "kdesign". I've provided a zipped version here. Go to preferences and set kdesign as the default theme.

Now open /kdesign/theme.html and replace everything with this:


I'm using this theme only to test my main menu code, as such I've stripped everything else out of this theme. Now reload the theme. You should have something similar to image 3.


Step 4 Using Module Names
The next step is to use actual xoops modules. Open kdesign/theme.html and replace all code with this:


You might have to tweak positions to better fit the design. Language and capital letters are all factores in the placement of each item.

Step 5 - Submenu
Now let's populate the submenu. Open kdesign/theme.html and replace all code with this:


As you may notice I'm only using existing smarty variables to do all this. If you set your debug mode to smarty, you will see a lot information is provided to help you with your modules and templates. If you want to go back to your admin, just type the url: http://www.yoursite.com/admin.php or to login: http://www.yoursite.com/user.php Your end result should be similar to image 4.