A guide to creating Mambo 4.5.1 - 4.5.3 and Joomla 1.0.x templates in Dreamweaver with our free mambo dreamweaver template builder extension and Mambo Stand Alone Server [MSAS] from www.mambosolutions.com or Joomla Stand Alone Server (JSAS) from Joomlasolutions.com

www.mambosolutions.com
Professional Mambo and Joomla Templates

So, you have discovered this great tool called Mambo and you want to try to make your own Mambo template huh? Well, I know how you feel and share your enthusiasm. Back in 2002 I was working with Xoops, a similar system to Mambo, and after I discovered Mambo, it did not take long for me to switch and have a go at making my own Mambo templates. At that time there were no tutorials around the web, so like others, I looked at the existing default templates for Mambo and started reverse engineering. Here, I will attempt to clearly layout the steps in creating a Mambo template so that you may have a nice resource that was not available when I got started. Well, what are we waiting for? Lets get started at the beginning, I find that is usually a good a place as any to get started.

First of all, lets talk about what a mambo template is. A mambo template defines the overall 'look and feel' of your mambo website. Normally this includes things like, colors, header image, 2 or 3 column layout, footer etc. The template (index.php) works hand in hand with the CSS (template_css.css) to give you control over many things such as module placement, font colors, borders, hyperlink hover effects, and a gazillion other things that you will discover if you dig deeper.

There are many ways to go about creating/designing a Mambo template. In this guide, we will be creating a 100% width 'autostretch' 3 column table layout. The layout is 3 seperate 100% tables 'stacked' vertically-the top table is for the header area, the middle table is for the mambo left, center and right columns, and the bottom table is for the footer area. Additionally, the middle table will contain a 3 column 100% nested table.

We will be using Dreamweaver to to the first phase of the layout and coding. After we reach a certain point, we will switch over to our local Mambo test server [MSAS] to preview how our template will actually look on the web. Ok enough overview already right? You want to start making a template...comon!

Update: Joomla! is a seprate application but shares the same templates as Mambo at this time. (Mambo 4.5.1 - 4.5.3 same as Joomla 1.0.x templates) Joomla! was created when the entire mambo development team split from mambo and started this new project called Joomla!. More info at www.joomla.org

What you will need to follow this tutorial:

First Phase, we need to open Dreamweaver and get the template builder extension installed.
*note: If you need to download the newest version of the extension manager from Macromedia, get it here

  • Open Dreamweaver. On the top menu, locate 'Commands' then 'manage Extensions'. This will open the extension manager.
  • In the extension manager, choose 'File' then 'Install Extension'. Browse to the location of the mambosolutions451a2.mxp and install it.
  • After installation, exit the Dreamweaver application.
  • Now restart Dreamweaver. You should see a new toolbar titled' MamboOS'
Figure 1: Mambo Toolbar in Dreamweaver

If you are with me to this point, pat yourself on the back, grab a tasty beverage (your choice), and get ready for the second phase of setting up your local template development environment: MSAS !

note: you can also use JSAS, the screens will look slightly different but the basics are same

Second Phase. [MSAS] Let's get our local server environment running so we can play Mambo!

Mambo is a web applictaion that is dependant on other web applictaions to create its magic. Namely MySql database, PHP and Apache webserver. Actually we dont need to worry about the extra steps of installing and configuring all of those applications because luckily I have created for you an 'all-in-one' server package based on MiniServer for Windows called 'Mambo Stand Alone Server' or [MSAS].

Put your hands in the air and say'Yeah mambosolutions!' :) Ok, if you don't put your hands in the air its up to you.

  • If you haven't already done so, download MSAS -save it to your desktop
  • install it as as you would any appliaction
  • locate the msas.exe(inside the Distribution folder) then double click
  • At this point you should see the MSAS inteface window on your desktop
  • Login/Password for Mambo administrator: admin/admin
Figure 2: MSAS Interface

Whew! are you having fun yet? Man I sure am. OK time for me to grab a coffee. BRB!
Allrighty then, finally we get to the template building part....

Let's see how mambosolutions builds a template, shall we?

I am sure that there are several different ways to go about building a mambo template. In fact, I know there are. My goal here is to show you in the simplest way I know how, to create a basic mambo template using tables, inserting all the mambo jambo code with my dreamweaver extension, and creating a sort of 'live preview' environment using MSAS. Sound ok? Will the code validate? Probably not. Will it show you the basic idea of how mambo templates work and how you can create one? I sure hope so! Lets roll....

Third Phase : Building a 3-column table template for Mambo

Step 1: Head's Up!

  • Open Dreamweaver and create a new 'dynamic page' --> php
Figure 3: New Document in Dreamweaver

  • Switch to Code view and you should have something like this:
Figure 4: Code View in Dreamweaver


  • Select all the code above the closing </head> tag and delete it
Figure 5: Delete head code in Dreamweaver

  • Insert the mambo Head code by locating and clicking on the 'Insert Head Code' button in the Mambosolutions451 toolbar
  • Your code should now look like this:
Figure 6: Insert Mambo Head Code in Dreamweaver



MAMBO 4.5.1 TEMPLATE HEAD CODE (copy/paste from below)

Select and Copy (Click to select contents and copy them to the clipboard)


Feeling Giving? Check out my Amazon.com Wishlist


Step 2: John, John young and able, get your elbows off the table!

Ok, hopefully my tutorial is better then my humor. Lets layout some tables for our template.

  • Switch over to 'Design View' in Dreamweaver.
  • Click once anywhere in the white area on the canvas to activate the cursor
  • We will be creating 3 seperate tables at 100% with for an varaible width 'auto-stretch' template. The top table will be for our header area; the middle table will be for our left middle and right content columns; and the bottom table will be for our footer area.
  • From the top menu, go to Insert>Table (Ctrl+Alt+T) This brings up the table dialouge box
  • Enter the following settings:
Figure 8: Insert Table Dialogue in Dreamweaver

  • Repeat this process a total of three times - until you have 3 tables stacked vertically at 100% width each
  • TIP: Locate the 'Layout' tab, and choose 'Expanded' view-this is optional but I find it helps you see what you are doing better.
Figure 9: Expanded Design View in Dreamweaver

  • Click once in the middle table to select it
  • Next, go to ' Insert' >'Table' (CTRL+ALT+T) and create a 3 column 100% width table
Figure 10: Insert nested table in Dreamweaver

  • Now you should be looking like this:
Figure 11: Nested 3 column table in Dreamweaver

  • can you begin to see how the template layout is functioning? We will now resize the left and right cells of this table - these will be our left column and right column in the template-the middle area will be for the main content.
  • place your cursor in the left cell and click to select it
  • in the Properties, enter 18% for the width (18% is the width I chose, but you can later adjust this what you want)
  • While your here, set the vertical align to 'Top'
  • Click in the right column, repeat this step for the right column
  • see below:
Figure 12: Resize columns in Dreamweaver

Step 3: Calling all Code Monkeys!
Now we can start inserting the mambo specific php code in our templates, don't worry if you don't know the difference between PHP and a hole in the ground, this will be painless!

  • Locate the Insert Main Body code button on the Mambosolutions451a extension toolbar in Dreamweaver
  • Click once anywhere in the middle column?Main Content Area' to select it-then click the Insert Main Body button
  • for those of you on Macs or Linux, the 'Main Body'code to insert at this point is:

    • Select and Copy (Click to select contents and copy them to the clipboard)

    Below is codeview of the table layout code with the Mambo 'Main Body' code (with added comments)

Okay, so how are we doing so far? Are you getting it? I sure hope so because this is taking a heck of a lot longer than I had thought it would. Normally anything worth doing means taking the time to do it right, and in this case that means a long time :)
Let's continue adding code, shall we?

  • Click once in the left column to select it, then click on the Insert Left Modules button to insert the following code:
Select and Copy (Click to select contents and copy them to the clipboard)
  • Cool? did you get that? Let's go ahead and add 'user1' module position directly underneath the 'left' position
  • Make sure the code placeholder is not selected while in wysiwyg mode by clciking anywhere in the white are of the left cell.
  • Locate the Insert User1 Modules position button and click it to insert the following code in the left column:
Select and Copy (Click to select contents and copy them to the clipboard)
  • Now let's jump over to the right column, click anywhere in the right column to select it
  • Locate the Insert Right Modules position button and click it once to insert the code:
Select and Copy (Click to select contents and copy them to the clipboard)
  • Now lets add the User2 position below the 'Right' position, make sure the code placeholder is not selected while in wysiwyg mode by clciking anywhere in the white are of the right cell.
  • Locate and click once on the Insert User2 button to insert the User2 php code:
Select and Copy (Click to select contents and copy them to the clipboard)

Our tables in 'code view' should look like this about now:

Figure 13: Tables layout with Mambo php code added in Dreamweaver

  • Let's insert the search code, (note: search is now a module in Mambo 4.5.1- so this is optional if you want to hardcode it in the template)
  • We are going to be placing the search field at the top of the right column for now just for learning purposes
  • In the right column, where you just added the code for positions 'Right' and 'User2', click your mouse to the left of the first php code placeholder
Figure 14: Insert cursor to the left of the existing code placeholder in Dreamweaver

  • Click once on the 'Insert Search' button to insert the Search code
  • It should look like this:
Figure 15: Search field in Dreamweaver

  • Moving right along, let's add our banners area.
  • Click anywhere in the bottom table (footer table) to select it.
  • Center align our banners by clciking the Center Align in Properties panel:
Figure 16: Align center in Dreamweaver
  • Click once on the 'Insert Banners' button to insert the banners code:
Select and Copy (Click to select contents and copy them to the clipboard)
  • Lets put our Footer code in as well:
  • Make sure the code placeholder is not selected while in wysiwyg mode by clicking anywhere in the white are of the bottom table. In fact to place the footer below the banners, just click to the right of the code placeholder.
  • Insert the footer code by clicking on the Insert Footer button
Select and Copy (Click to select contents and copy them to the clipboard)

Thats it for the footer, lets move up to the header area, shall we?
We will be creating a new nested table in the top 'header' table for the pathway and the date display

  • Click anywhere in the top table to select it
  • From theDreamweaver top menu, Insert a new 2 column 100% width table by going to Insert>Table
  • Click once in the right cell of the new table, go to Properties Inspector and manually set the width to 30%
Figure 17: Date and Pathway

  • With your cursor in the right column of the top table, click on Insert Date button
    • Select and Copy (Click to select contents and copy them to the clipboard)
  • Now lets add our 'breadcrumb trail', or Pathway
  • Click anywhere in the left column of the top header table to select that cell
  • Locate and click on the Insert Pathway button
Select and Copy (Click to select contents and copy them to the clipboard)

Well then, I guess you are getting anxious to see how this is all going to look in Mambo, right? I know I sure am...but remember -so far we have been creating the layout of our template and adding the php code snips that will let Mambo do its dynamic content magic. We have not done any design yet, so don't not expect to see an awesome looking template...in fact at this stage it is bare bones text and tables!

Phase Four: Creating our template directory structure in Mambo and moving over to MSAS.

A mambo template is structured as follows.

Figure 18: Directory structure of a template

  • Start MSAS.exe if it is not already running
  • Navigate to the templates directory of Mambo in MSAS
  • W:\www\mambo45\templates
  • Create a new folder and name it 'ms_dwtutorial'
  • Open this folder named 'ms_dwtutorial' , and create 2 folders-one named 'css' and one named 'images'
  • Save this file we have been working in Dreamweaver as index.php in the 'ms_dwtutorial' folder
  • Next we need to create our templateDetails.xml file Create a new xml (plain text file with .xml extension on windows), copy the code below in it and place it in the 'ms_dwtutorial' folder-save it as 'templateDetails.xml'
Select and Copy (Click to select contents and copy them to the clipboard)
  • Next its time to create the stylesheet that will control the things like font style, colors, link rollovers, borders around content, etc....the almighty template_css.css
  • Open the CSS folder and create a new css file named 'template_css.css'
  • Copy/paste the following css into the 'template_css.css file and save it.
  • For a list of all the CSS styles used in Mambo 4.5 check out this great list that Visualdensity put together

Select and Copy (Click to select contents and copy them to the clipboard)

Phase 5: Adding a header image

You may want to adda graphical image in the header area, here's how i do it

First I open Photoshop and create my header image, in this case i decide to make my image 700px wide and 100 px height. I am going to assume you know how to work the basics of Photoshop, if not there are plenty of Photoshop tutorials around. Take a look at the images in the example tempate.

The trick to getting your header image right on a 100% variable width template is the background image that tiles. To create this image, simple take your header image and make a selection on the right side of the image ofabout 3 pixels width and the entire height. Next copy this selection (CTRL +C), open a new document in Photoshop, and paste this in. Then hit (CTRL +T) to get into the Scale mode. Grab the handles and stretch your image on both sides. Save this image as header_bg.jpg in the images folder.

 

Next let's add the relevant HTML code to our template's index.php file. We simply need to add the following row and cell to our code:

At this stage, you can go MSAS, open the Mambo Admin panel....

Browse to http://localhost/mambo451/administrator

login as : username: admin
password: admin

go to the Template Manager and select 'dw_tutorial' as your default template. Then go to Site>Preview to see how the template looks so far.

Should be looking something like this at this stage:)

Save this file (right click-save as...) for the final template index.php (you can download this and rename it) code with some background colors added and alignments. You can copy paste this as 'index.php' for the base of your template. You can download the ALL the files including the Photoshop stuff here

So, I have shown you the basics of creating your own Mambo template, but do not sit back just yet - there is lots more to be learned. The CSS file is your friend, really it is :) Explore it, play around with the different values, get comfortable with the CSS - it is the key to making endless tweaks and small details to your template. While I will not be going in depth about the CSS, I will be covering a few important points. I also suggest that if you like to learn more about CSS, explore these great resources:
a list apart
the noodle incident
blue robot
 brainjar
htmldog
csszengarden

If you are finding this useful, have suggestions, feedback etc. please post at the thread on mamboserver forums:

http://forum.mamboserver.com/showthread.php?t=15295

Don't forget to make a thumbnail image for your template. Just take a screenshot of your finished template in your browser, edit in Photoshop to be 200px X 200px, save it to your 'ms_dwtutorial' directory as 'template_thumbnail.png

For a nice list of the differences between 4.5 and 4.5.1 code in Mambo templates see this nice chart from Arthur konze at www.mamboportal.com

Bonus for Flashers! how to add a flash header and use a flash shared object so that the flash intro only plays one time.

download the example template with the source .fla (Flash MX)

The main thing to remember when using flash in a mambo template is that the path to the swf must be relative to the root of the mambo site. In my example, i put the .swf file in my templates/ms_dwtutorial_flash/images/ folder so the code looks like this:

 

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="780" HEIGHT="100" id="ms_flash_playonce_demo" ALIGN="">
 <PARAM NAME=movie VALUE="templates/ms_dwtutorial/images/ms_flash_playonce_demo.swf">

<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="templates/ms_dwtutorial/images/ms_flash_playonce_demo.swf" quality=high bgcolor=#FFFFFF

WIDTH="780" HEIGHT="100" NAME="ms_flash_playonce_demo" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>





To code your flash so that it only place once, add this code to the first frame of your flash movie:





function checkSO()
{
// If a shared object called siteSO already exists this will retrieve it otherwise it
// creates a new shared object called siteSO
var SO = SharedObject.getLocal("siteSO");
if(SO.data.visitedAlready)
{
gotoAndPlay("end");
}
else
{
SO.data.visitedAlready = true;
SO.flush();
}
}
// Put that and this in the first keyframe of your movie, before the intro
checkSO();









then on the last frame of your movie, create a frame label named: end





Thats it !

 

Thanks for tuning in, hope you have fun with Mambo/Joomla and I hope I have had the opportunity to taech you something about creating Mambo/Joomla templates.
If you would like to show your thanks, please consider to either donate or join my Template of the Month Club - links can be found below. Mambo/Joomla Template Club Join for only $50 - download over 30 templates with source photoshop graphics. One new template added to the club each month!
Joomlathemes.org Mambo/Joomla Template Store
If that does not interst you then how about sending me a small gift from my Amazon.com Wishlist? :)