Custom Search

Tips and Tutorials for Mambo templates

 Tips and Tutorials for Mambo templates

Mambo Tips 2

I am also always a bit concerned about Mambo's future, but because I am on the MF Board, it is my job to worry The last thing I am concerned about though is that we are "consumed" by Joomla.

If you know a little about the history of Mambo, you know it already exists for eight years now. In these eight years a lot has happened. A few years back, as you might know, there was a "fork" in the code. Joomla was born out of Mambo and J1.0 is still for a large part Mambo 4.5.2.

After that, Joomla and Mambo went their own seperate ways. Both believing in what they thought was best for their CMS. Obviously I believe Mambo makes the better choices, but you should decide for yourself.

Now, after the fork, the Mambo project was pretty much in shambles. Though Mambo's code was still great, the project itself was suffered a big setback and really had to be built up almost from scratch. This was done, this forum is a result, but also the other Mambo Foundation websites. They were pretty much surrected on demand, and as such they do not look very coherent. We are aware of that, and actually, all Mambo Foundation sites are already remade, and will be launched within weeks.

The forge you see is brand new, and for that reason still has a limited number of extensions, and an extension site is being built (mambo-extensions.com is NOT a Mambo Foundation site)

Now for the reason I am not concerned about Mambo's future: if you compare where Mambo was right after the fork, with Mambo now, it is really amazing what has happened! The community on this forum is growing like a madman, Mambo launched his Mambo 4.6 series, and is about to release the spectacular 4.7 series, a lot of 3PDs have returned to Mambo in the last few months and are making their extensions work for Mambo again.

People are working like crazy at the moment to continue this "resurrection" and there will be quite a few pleasent surprises for Mambo users in the near future. Of course, all this is done by volunteers, and we are always searching for new people who like to share their knowledge and time on behalf of the Mambo project.

So thanks for doing so, and if you want to contribute in the Mambo project, let us know.
__________________
Mambo-ing since december 2006 and loving it!


Discuss these tips and tricks here: http://forum.mambo-foundation.org/sh...ad.php?t=10333

This is a collection of resources that will help you learn about creating and modifying templates for Mambo.
If you have suggestions to add, please post them in this thread.

When starting out with making your own template, or modifying an existing one, the best place to start is with our wiki. There are a number of articles on mambo-manual.org to help you with templating for Mambo.
This is a good place to start: http://mambo-manual.org/display/tpl/Home

Learning css design?
Here is an online tool that you can play with, which will automatically create valid markup and get you started with designing your own templates.
http://accessify.com/tools-and-wizar.../markup-maker/

If you are having trouble getting a page layout to work using css, you could try out this handy online css generator.
http://www.positioniseverything.net/...maker_form.php

Use it with the Dreamweaver template tutorial and Dreamweaver extension offered by Mambosolutions and you should find making your Mambo template much easier. (Don't forget that if you want to use your template with Mambo, you will need to add the special code that pulls in the information from Mambo. The Dreamweaver Extension helps you convert templates for use with Mambo.)
http://www.mambosolutions.com/dw_tutorial/

Another good tutorial:
http://www.mambosupportcenter.com/css/

and: http://www.absalom.biz/tutorials/Mam..._Tutorial.html

Here is an old article, written for Mambo 4.5.2, but there is still some good information here explaining the structure of Mambo templates: http://www.devbay.com/Articles/Mambo...ate_Explained/

Good Mambo CSS tutorial for Mambo 4.5.x versions (still useful for 4.6.x): http://www.m65.net/cms/articles/mamb...ce-4.5x.x.html

This is a great site for learning templating. Layout Gala offers a set of 40 layouts using CSS for presentation.
Thoroughly recommended. http://blog.html.it/layoutgala/

Having problems with parts of your template moving left, right or down in IE and want to know why (and how to fix)?
http://www.positioniseverything.net/...ingboxbug.html

If you want to build your own template or convert one of the many free, open source templates around to work with Mambo, download the blank template index.php and template_css.css file from http://mambo-tutorials.com/downloads and use these as a base for your own design.
 

Tip: finding module positions in your template
There is a little-known function within Mambo that is quite a good trick to know. If you want to look at a template to see in which positions modules are placed, you can do this easily.

Note: this tip only works properly if you have SEF turned off.

Load your site and enter the URL like this:
http://yoursite.com/index.php?tp=1

The tp=1 tells Mambo to show your module positions.

If you find a Mambo site you really love, and want to see how they placed their modules, you can enter this on their site too. If SEF is off, you should see all the module positions in your browser. Neat tip eh?
 

thx for the tips (!), really usefull, inclusing the template tutorial. However, I noticed that in the tutorial they make a table structure in the index.php and then assign the Mambo-'commands' (dunno the official name i.e
Code:

<?php mosLoadComponent( "banners" ); ?>

) to a table-cell. That is so easy even I understand. However, when I see a WaterandStone template, they do not use a table, but keep assigning 'containers'. (Which are a bit more complicated to me)

Is is 'wrong' to use tables? I seem to be able to get pretty much the same effect with tables, so ...
 

If you want to make a template that is semantically correct then you need to use divs, spans and control presentation by the use of css. Strictly speaking, tables should only be used for tabular data. However, whether someone wants to code the *right* way or the way they are used to (ie. using tables) is really a personal decision. For me, its a no-brainer because I have been using divs and css for so long that I would have real trouble trying to code a template that used tables for presentation and layout.

I strongly recommend persevering with learning the div/css layout techniques. Once you do learn, you will find that you can create all kinds of effects that are just not possible with tables.

Also, with Mambo 4.7 we will be delivering an accessible frontend and you will be able to validate your sites as xhtml 1.1 if you want to. Table-based layouts fail many of the accessibility requirements. (That's not to say you cant use them, because you can, but table-based templates will not take full advantage of the changes we are bringing in 4.7).
 
I strongly recommend persevering with learning the div/css layout techniques. Once you do learn, you will find that you can create all kinds of effects that are just not possible with tables.
Elpie, you are right of course! It is just that I am used to Dreamweaver and designing sites with frames (Framedefine) which load different HTML pages, and have some trouble learning CSS. It is just very easy then to use tables. I already see their limitations though. I am on a very steep learning curve since I got to know Mambo and sometimes it is tempting to 'cut corners' as it were

 

  CSS Resources
CSS Grid Calculator
http://www.gwhite.us/downloads/css_grid_calc.html

Want to create rounded corners for your template? This handy online generator will give you everything you need.
http://www.roundedcornr.com/

Excellent CSS Reference for XHTML, based on the CSS 2.1 specification. http://xhtml.com/en/css/reference/

Want to make your font sizes scalable? Convert px to em with this handy converter: http://riddle.pl/emcalc/
 

Templating - working with colours
Tip from vavroom:

When in doubt as to what colour to use, what would go well, you can use the colour wheel/colour picker found here:
http://wellstyled.com/tools/colorscheme2/index-en.html

Then once you have it, you can analyse the contrast between the foreground and background colour with this nifty tool:
http://snook.ca/technical/colour_contrast/colour.html

Between the two, you should come up with a pair of colours that work well together and that offer enough contrast as to be readable by most people

Need to convert RGB colours to hexidecimal?
http://www.endprod.com/colors/rgb2hex.htm
L
 

Making IE6 template work ok on IE7
IE6 gave template designers the option to render their sites in either standards mode or what is called quirks mode. Quirks mode is a backwards compatible mode, which means that sites that ran under quirks mode had fewer compatibility problems with older versions of IE.

To trigger quirks mode in IE6 all a designer had to do was to include the xml declaration, eg:
Code:

<?xml version="1.0" encoding="utf-8"?>

In IE7, Microsoft removed the ability for the xml declaration to trigger quirks mode. However, because IE7 is still not Standards-compliant (it is marginally better than IE6 in its handling of Standards and css) many sites still need to trigger this backward compatibility mode.

The only way to force IE7 to render a site in quirks mode, without affecting the way other browsers render a site, is by including a comment between the xml declaration and the doctype.

This is done like this:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!-- any comment you like will keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Is this clear so far?
Now, keep in mind the simple rule:

1. If your template uses the xml declaration, the comment must come AFTER the xml declaration and before the doctype.
2. If your template is HTML or XHTML sent as text/html and does NOT use the xml declaration, that is - it starts with the doctype being the first line in the template's index.php, then you place a comment above this. So, the comment will then be the first line in your template's index.php, followed by the doctype.

Both ways will tell IE7 to render the site in quirks mode and will reduce the problems caused by incompatibilities.

You can write anything you like in the comment as long as it is a valid comment and is placed into the correct position in your template's index.php file. Just make the comment meaningful so you will remember why you put it there.
 

Ever wondered what a particularly complex CSS selector really means?
If you have found a site where the presentation is handled through CSS, but you can't really understand just what they have done, there is a great tool I have stumbled across that should help. It explains exactly what each selector is doing, in plain language.
This is available in both English and Spanish.

http://gallery.theopalgroup.com/selectoracle/

To be really useful as a learning tool you should analyse css files that already validate. However, if you are having trouble getting your own css to validate and can't work out why, this tool will help you isolate the problems.

 

Re: Tips and Tutorials for Mambo templates
Two more great resources for template design:

http://www.stripegenerator.com/
Which does exactly what its domain name promises

https://addons.mozilla.org/nl/firefox/addon/60
Chris Pederick's Web Developer Plugin for Mozilla Firefox. So good it's scary! Outline CSS elements, validate CSS and HTML, show the ordering of ids and classes, turn off Javascript and see how it renders etc. etc.

It's unfortunate for the Mambo open-source publishing software project and for its customers that its developers had to decamp with their source code to start the Joomla project, according to a high-ranking IBM software executive.

"It does look like the company that was shepherding this along got a little bit off track on their interests vs. the open-source community's interests," said Rod Smith, vice president of emerging Internet technology for IBM's Software Group, in an interview Tuesday. "That's a bad thing," because Mambo had a lot of traction, and the "fork" undermines that, he said.

Corporate customers dislike such conflicts, Smith said. "They're not scared of open-source software. But what they are scared of is what just happened to Mambo," he said. "If it blows up on them, they might have to do a lot of rework."

Joomla appears to have inherited the momentum, though, said David Boloker, chief technology officer of the IBM group. "The community shifted--I won't say overnight, but much faster than I thought," he said.

Smith also praised AJAX, technology that brings a richer user interface to Web browsers through browsers' JavaScript abilities.

"We like AJAX," Smith said. "I think Google Maps put it on everybody's' radar scope, and a company called Zimbra has a nice toolkit. We think over time there's going to be some momentum growing around that."

Yahoo's new Web-based e-mail software, based on technology the company got when it acquired Oddpost, uses AJAX, added David Boloker, chief technology officer of the Emerging Internet Technology Group. The new mail software is under development.

AJAX's Achilles heel today is that it's technically difficult to program in, Smith said, despite the fact that there are more than 30 different programming toolkits available. "It is not for people who are not JavaScript-experienced. It is difficult. There are some things we think need to be done around tooling to make it easier for developers."

AJAX will help reclaim ground that was lost when browsers became common, Smith said. "When browser came out, we took three steps backward in the user interface," but what the industry lost in user interface it gained in the spread of technology. I think ajax can go quite a ways. It'll take some fancy footwork and good tooling, and I don't think it's going to be a quantum step forward, but it'll be a good step forward," Smith said.

Mambo, an open-source software project that can handle content-management tasks such as online catalogs, has opted to govern itself with a single leader rather than its previous consensus-based approach.

The leader is Chad Auld, who has worked on the project for more than a year and who leads the core development team, the project said Monday.

"For the past year, Team Mambo has experimented with a consensus-based decision process. While that structure is certainly the most egalitarian, it has also led to extended discussion and decision cycles, and has proved to be less efficient than initially hoped," the project said. "In an effort to strengthen coordination of project resources and improve efficiencies in our development process, the decision has been made to shift global project management into more of a centralized structure."

In 2005, many of the open-source programmers who had supported Mambo were not happy with the project's corporate sponsors and governance. They "forked" the Mambo software into project into a separate project called Joomla.

 

 

Headline 2

atom-rss.com

 

 

 

 

 

 

 

 

(Region1)

Headline 2

atom-rss.com

(Region1)

Headline 2

atom-rss.com

Headline 2

atom-rss.com

 

 

 

 

 

 

 

 

(Region1)

Headline 2

atom-rss.com

Headline 2

atom-rss.com

 

 

 

 

 

 

 

 

Headline 22

atom-rss.com 2

 

 

 

 

 

 

 

 

Headline 22

atom-rss.com 2

 

 

 

 

 

 

 

 

Headline 22

atom-rss.com 2

 

 

 

 

 

 

 

 

Headline 22

atom-rss.com 2

 

 

 

 

 

 

 

 

Headline 22

atom-rss.com 2

 

Headline 3

atom-rss.com 3

 

Headline 22

atom-rss.com 2

 

Headline 3

atom-rss.com 3

 

 2

  

 

 3

  

 

 2

  

 

 3

  

 

 2

  

 3

  

 2

  

 3

  

 2

  

 

 2

  

 

 2

  

 

 2