keymaster

Granted, the benefit of mambo templates is the separation of presentation layer from application logic. I can understand all the advantages this provides from a system architectural and maintenance perspective. However, one of the benefits of Mambo is to enable non-technical users to create and maintain their own websites. Mambo has done a great job at the content management side of things, and it is getting better every day.

However, an important component of creating and maintaining a website is defining and updating the “look and feel” as your understanding of your target market, and therefore your marketing approach, improves.

One of the difficulties I find myself bumping into regularly, and perhaps others are experiencing similiar frustrations, is after the content is defined and entered into mambo, and you want to start playing around with how things are layed out, which pages items appear on, what they look like, etc.

Up until this point, all can be done by a non-technical person (defining content, assigning sections/categories, etc.). It seems once content is defined, the “free ride” is over, and you need to bring in the technical consultants with knowledge in HTML, CSS, DreamWeaver, etc. to define and modifying templates for you.

This becomes inconvenient because appearance is such an iterative and subjective process – you see something, you change it, re-evaluate it, that it is not really conducive so much to working with someone else who is doing it for you. You just wish you could do it yourself. It would be so much cheaper and faster, and the end product would probably be closer to what you envisioned, and satisfy you better.

Does anyone know if there is some easy non-technical way to at least change *some* things on the website from the admin panel without having to know CSS or HTML?

Where can one see the relationship between mambo modules, their position(in the admin panel), and what user areas on the template are assigned to which mambo positions (I don’t even know if I asked this question right – hopefully someone will understand what I am trying to ask)? If I at least knew this, there might be some way of controlling what showed up where.

Is there any documentation describing layout related things that *can* be controlled from the mambo admin panel without looking at HTML and CSS?

Is there any documentation, for those without HTML or CSS knowledge, describing how to change look and feel parameters in the mambo template? (if this is even possible).

Are there any software tools for changing look and feel for the nontechnical user ?

There are several good documents out there on creating templates, but all have you going into DreamWeaver and knowing HTML/CSS. It would be nice, given the hundreds of nice templates out there, to be able to say “this template is closest to the look I want, I’ll take it and modify it a little for my purposes”, and for the nontechnical person to be able to do that without having to learn HTML/CSS/DreamWeaver.

In conclusion, content management is certainly an important and valuable function. Mambo shines admirably in this area, and is to be commended for making website design accessable to the non-technical user. Many people are definitely grateful for this. However, once the content is defined and it is time to focus on the “look and feel”, it seems (I hope I am wrong), Mambo says “sorry folks, end of the ride, nontechnical users get off. The rest of the trip is only for those who understand HTML, CSS, and DreamWeaver/Frontpage”.

Please tell me there is another way (and if not, how should one get started learning all the technology one needs to modify templates oneself?)

Thanks very much for any and all help offered. My appreciation in advance for the wonderful people on this forum who make mambo the friendliest community around.

deanmarshall

Hi Keymaster,

I hope you don't take offense from this but yours is a question I see a lot. Basically you want to run a website without learning about how websites run.

As you note Content Management Systems like Mambo are great for managing the content of a site AND hiding the technicalities of website management and php, html, CSS, Javascript and myriad other technologies from end users. Unfortunately, in the final analysis, the operation of a website will sooner or later require the intervention of someone with knowledge of these technologies.

There was a time when everyone creating / editing a site needed a knowledge of ALL of the current technologies. CMS systems like Mambo reduce this to the point where only one 'techy' is required, but (s)he is still required.

The only way of avoiding this is to use the script as it arrives 'out of the box' without making the customisations that you require. I take your point that for a novice to dive head long into Dreamweaver or similar is intimidating. Personally I do not use graphical editors - I prefer to examine the code in basic text editors such as 'notepad', 'notetab pro', 'html-kit' or 'komodo' and roll my own html. That is a personal choice - but it is the one that gives the maximum flexibility (and a sense of achievement and understanding).

I recommend 'hacking around', making minor changes to the files you already have to hand. Make backups before you start - make minor changes and view the results of your changes before deciding whether to stick with them or roll-back to the backed-up originals.

Operating a website can create a steep learning curve - but it is one that is worth conquering. The resources available online are incredible and anyone can learn anything with a little time, patience and well directed assistance.

It is not my intention to be critical or negative - merely to point out what I see as the realities. If I can offer any pointers in terms of learning materials, useful tools, or web sites that can offer further assistance please ask.

http://www.webmonkey.com/ offer basic introductions to the technologies involved - html, css, color codes, javascript, etc.

One tip - from a practical point of view - is to play with CSS first. This way you can easily backup your original .css file and tinker with font sizes, font-faces, font-colours, background and border colours, etc at no risk. If you go really wrong just put the original file back. If you use Firefox and install some of the web developer add-ons you can play with stylesheet settings 'in real time' to see what effect they have.

It is a fantastic trouble-shooting aid, and I would expect it could be invaluable for learning too.

Dean.

keymaster

Hi Deanmarshall,

No, I don't take offense. Especially from such a respectful post. Thanks for responding.

I have already resigned myself to getting into the technology aspect of things in more detail.

If an admin wants a particular module to appear at say, some point just below the top center of the page, he has to know two things:
1. whether the template maps out that location at all.
2. what position name the template gives to that location using MosLoadModules(p).

Then, the admin can simply adjust the "position" of his module in modules/site_modules/edit/position, to the same position name.

The question is, how can the admin tell if the template uses that screen position at all? Then, how can he locate which MosLoadModules(p) call the template associates with that screen area ?

Thanks for your help.

deanmarshall

Hello again,

The first thing I do when examining a new template is to make a few subtle changes. Open the index.php file in any capable text editor (even notepad, if you must). If the template uses tables I add a border=1 attribute to the table declaration. <table border=1 width="whatever it was before">

The different Modules are failrly easy to spot. Here is a typical example. For now ignore the <?php and ?> brackets and php start and end identifiers.
The mosLoadModules is the command we are after and the first parameter in the quotes tells us the name of the module.
<?php mosLoadModules ( 'user4', -1 ); ?>

Usually these will be within either a <td></td> table detail (table cell) tag pair or a <div></div> tag pair. I would add a little bit of explanatory text inside the containing pair - something to the extent of "User4 here", like so.
<td>
User4 goes here
<?php mosLoadModules ( 'user4', -1 ); ?>
</td>

Make similar changes for each mosLoadModules instruction.

This together with turning on the table borders will give you a visual guide to what is where. Simply save the changes, upload to the correct sub folder within the /templates folder - open up mambo in your browser and print out for your own info. Then either undo your changes one at a time - manually, or roll back to a backed up copy of your template file.

There are more sophisticated ways of doing things - but I find step by step works well until you find your feet.

I hope that gets you somewhere close.

Another useful tip - install a second copy of mambo in a separate sub-folder and play with settings and templates there rather than on the live site. There is also a standalone version of Mambo called MSAS - Mambo Stand Alone Server, if memory serves me right. This contains Windows versions of Apache server, PHP scripting language, MySQL database server and Mambo pre-installed into one package complete with windows installer. fantastic for playing / learning on your own PC with no risk of taking the server down, or having your errors wreck a live site. Also you save yourself the repetitive problems of uploading files after every edit.

Fantastic value for money too - FREE - although anyone who makes money using Mambo and/or saves time and effort using MSAS, should consider making donations.

Dean.

keymaster

Hi Deanmarshall,

Wonderful. Thanks very much for your help. It looks like it should do the trick.

Since you seem so knowledgable, I wonder if I can ask you one *last* question without imposing more than I already have?

Changing text color and replacing graphic images in a template:

- Given some text on a web page, and a corresponding CSS file, how does one determine which CSS structure (ie. area between {}) corresponds to that text, as the names don't help much? (need to know this to know which color code to change, for example)

- Similiarly, to replace a graphic image with a new one, how does one know what size the new graphic has to be, ie. how do you know the size of the area which the template set aside for graphic? (I guess once one knows that, he can then use Photoshop to crop the new graphic down to size, or pad it somehow up to size, and then simply swap the new graphic file with the old).

Once again, thanks so much for all your help. When others see your answers here, I'm sure they will appreciate it as well.

deanmarshall

Glad to help.

You're not imposing - you read, read and then when you think you have read enough - you read a little bit more.

Essentially there are 3 types of CSS definition.

The first sort correspond to the normal html tags. So body{} will control the appearance of the <body></body> and everything in between. p{} will control paragraphs which are <p> in html. ul{} and li{} control <ul> and <li> tags - you get the idea I am sure. Keyword to bear in mind and research is 'inheritance'. Body contains paragraphs and headings h1 h2 h3 etc. Any settings applied to body is inherited by 'child' objects.

Next up we have classes. A class is a way of setting up certain standard configurations that can apply to any number of elements. For example you might have a class called bigandbeatiful{} which will set font family, font-color and font-size to a particular setting. This will only apply to areas of html that are specifically assigned the class 'bigandbeatiful'. This is done with a class="bigandbeatiful" attribute inside the tag of a chosed element. For example a paragraph could be so designated by <p class="bigandbeatiful"> likewise a table tr or td could be given the same class eg <td class="bigandbeautiful"> . Inside the CSS stylesheet you can spot classes by the leading period (dot or full stop) before the class name.

Finally we have named elements. These are applied by giving a html tag a name="fred" type attribute eg <form name="fred">. Only one element on a page can have that name. Inside the .css stylesheet you will spot names by the # (hash or pound) symbol that is prefixed to the name eg #fred{}

Again I thoroughly recommend installing and playing with the Firefox web browser with the web developer add-ons installed. The amount of control it gives - even allowing you to edit .css files and seeing your changes reflected live before your eyes as you type. Absolutely sensational - especially when you find one of those awkward bits that doesn't perform as expected.

There are three ways that will tell you the size of a graphic. Load the page - right click the image and select properties or image properties depending upon your browser of choice (I really like Firefox - can you tell). Alternatively look at the source code for the page - find the <img src="http://blah-blah.com/blah.gif" width="100" height="150"> - I bet you can tell how large the image will be displayed. The third method is to look at the source of the image http://blah-blah.com/blah.gif in this case and open the image in either your browser or an image processing program. Bear in mind the actual 'native' size of the image is not necessarily what you see on screen. A 500x2000 pixel image can be forced to display with height="50" and width="200".


No problem - I take help where I can and I offer help when I can.

Dean Marshall.

keymaster

Thanks very much. I installed firefox with the web developer add-on. It is very helpful. Thanks for your other suggestions as well.

mcsmom

Keymaster,

I'm like you trying to figure all this out, but the trick I use to find out the size of an image is to view it in a browser, click right and view properties. That will also tell you the name of the image. Then when you open the file you can just search for the name of the image and replace it with the one you want.