Highly modified version of Mambo (XHTML/CSS)

[poncho_p]

http://www.dreamstoreactive.org/

This website needs to be accessible for disabled users, and I thought it would be a nice idea to remove ALL tables from Mambo.

I like Mambo a lot, but the whole 'tables' thing annoys me as an XHTML/CSS kinda guy :-)

I'm very excited about Mambo 5.0 & it's PatTemplate integration, but I'll just have to hack in the meantime.

Let me know what you guys think of the site. I would appreciate feedback, either positive or negative.

Thanks,
Poncho


BTW, this is still work in progress.

[southy]

Hi,

I like it very much and even more I like the idea of getting rid of the tables in mambo.
Can you exlain a little what you did?

Thx, Southy

[poncho_p]

The first thing I did was find out where all the tables were coming from, mostly in "/components/com_content/content.html.php".

All, or most of the modules in Mambo allow for the xMambo style of using <div>s to use as output, (by calling "<?php mosLoadModules ( 'top', -2 ); ?>" in your template), but the core of mambo does not have the same flexability.

For the menus, from the administrator interface, go to the modules page, and select your menu. In the parameters tab, select menu style as "Flat list", this will output your menu in the following format:

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

Really from then on in, I went through the content.html.php file, took out the tables and replaced with <div>s, eiher with unique IDs or gave them a class to create style rules for.

I think I'm about 80% done on the site.

I've picked up a lot of XHTML/CSS tips from such websites as:
http://www.alistapart.com/
http://css.maxdesign.com.au/
http://www.aplus.co.yu/

Some really helpful stuff!

Hope that explains things a bit!

[lemonade]

nice web design!

[Ketupat+Rendang]

the design look really great!!! the color combination are cool...

[harveybass]

Originally Posted by poncho_p

http://www.dreamstoreactive.org/

This website needs to be accessible for disabled users, and I thought it would be a nice idea to remove ALL tables from Mambo.

I like Mambo a lot, but the whole 'tables' thing annoys me as an XHTML/CSS kinda guy :-)

I'm very excited about Mambo 5.0 & it's PatTemplate integration, but I'll just have to hack in the meantime.

Let me know what you guys think of the site. I would appreciate feedback, either positive or negative.

Thanks,
Poncho


BTW, this is still work in progress.

Can someone tell me why tables are so bad??? :-(

[poncho_p]

As you can see from the dreamstore website, the layout can be achieved without the use of tables, and it is more bandwidth friendly.

See:
http://www.htmlite.com/SD008.php
http://www.sitepoint.com/forums/showthread.php?t=133933

For me, the main benefits in css layout are, in page size being drastically reduced, all of the styles can be stored in one site-wide css document, (meaning; change one style rule, and it is repeated site-wide.) and finally, it is easier to implement accessiblity options in a css site.

This is the first website I have built using Mambo and I have re-coded a lot of the core, and 3rd party components and modules to make room for accessible features.

It may take longer to create a css based website, but the pros definately out-weigh the cons.

Edit: This website should hold all of the answers.
http://healyourchurchwebsite.com/archives/000791.shtml

[DaOnlyDesigner]

Originally Posted by poncho_p

The first thing I did was find out where all the tables were coming from, mostly in "/components/com_content/content.html.php".

hey Poncho_P, would you mind either sending me your modified content.html.PHP file or posting it somewhere? It might take a little time off of my back and give me an idea of just what you did. Thanks!

[Antifreeze]

I thought there were still a lot of browser incompatibilities regarding CSS?
Are you sure the world is ready to view 100% CSS websites?
Have you tested this in older browsers and Netscape?

Last time I picked up a web design book (quite a while ago to be sure), the tone was that CSS was still very much an 'emerging technology'. Has there been a fundemental shift in the last year?

[Ambient]

I think the world is very much ready for css by now

[pxd]

I wouldn't be 100% sure of that. I've been playing around with opera, ff, netscape and ie at the same time, and still get some really bad nerves sometimes. Probably I'm just a pixel guy who loves to see a 1px padding instead of two on some browsers, otherwise what's the point in wasting time writing padding-top:1px and see two instead. CSS can be a nightmare for fine works.

Just a point.

[bingster]

Yup nice site and it validates aslong as u dont click on the component bits....then validating times r over :O(

[Jinx]

Ah well validation ins't everything

[kichiguy]

Originally Posted by poncho_p

The first thing I did was find out where all the tables were coming from, mostly in "/components/com_content/content.html.php".

Really from then on in, I went through the content.html.php file, took out the tables and replaced with <div>s, eiher with unique IDs or gave them a class to create style rules for.

I was manually fixing the problem with images and ugly tags in the section description code last night (noticed today that there was already a patch for it, doh! :stupid: I wonder if it fixes the extra unwanted </br> tags after the description, and the missing class="contentpane" attribute though) when I noticed that the content.html.php and content.php files seem to contain redundant html tags. I was a bit confused by this but was in a hurry to get stuff done so I didn't investigate it. I guess I should go check the dev documentation for an explanation. I hate being in too much of a hurry all the time....

Anyway....

All, or most of the modules in Mambo allow for the xMambo style of using <div>s to use as output, (by calling "<?php mosLoadModules ( 'top', -2 ); ?>" in your template), but the core of mambo does not have the same flexability.

****, I was just reading that a couple of days ago and I already forgot about it. That would have really saved me some frustration last night! Thanks for reminding me.

For the menus, from the administrator interface, go to the modules page, and select your menu. In the parameters tab, select menu style as "Flat list", this will output your menu in the following format:

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

I was also playing with this a couple of days ago and somehow forgot while I was messing with menu styles last night. I really need to slow down.

The stupid thing about this is that this isn't something that the admin should be configuring in the UI; it's something like the -2 argument above that the template designer should be setting in the template. After all, messing with this is only going to break a template that isn't prepared for it, and who else knows better what it should be set to than the template designer?

Really from then on in, I went through the content.html.php file, took out the tables and replaced with <div>s, eiher with unique IDs or gave them a class to create style rules for.

If you ask me, it seems like practically every containing element should have a class or id to allow CSS writers maximum flexibility. I guess it would add some extra bytes to the ouput, but that could be made up for by deleting all the unnecessary spaces from the output

[bluekiwi]

Originally Posted by pxd

I wouldn't be 100% sure of that. I've been playing around with opera, ff, netscape and ie at the same time, and still get some really bad nerves sometimes. Probably I'm just a pixel guy who loves to see a 1px padding instead of two on some browsers, otherwise what's the point in wasting time writing padding-top:1px and see two instead. CSS can be a nightmare for fine works.

Just a point.

You can use filters and hacks though (like html>body) to work around the various browser inconsistencies. I reckon 100% CSS layouts are good to go... there's such a small percentage that don't use either IE 5+, FF, or NS 6+.
You can still make really nice designs just by sticking to CSS 1 as well..

[harveybass]

Originally Posted by poncho_p

http://www.dreamstoreactive.org/

This website needs to be accessible for disabled users, and I thought it would be a nice idea to remove ALL tables from Mambo.

I like Mambo a lot, but the whole 'tables' thing annoys me as an XHTML/CSS kinda guy :-)

I'm very excited about Mambo 5.0 & it's PatTemplate integration, but I'll just have to hack in the meantime.

Let me know what you guys think of the site. I would appreciate feedback, either positive or negative.

Thanks,
Poncho


BTW, this is still work in progress.

can some tell me why tables are so bad?????

[ihatesafemode]

Originally Posted by Antifreeze

I thought there were still a lot of browser incompatibilities regarding CSS? Last time I picked up a web design book (quite a while ago to be sure), the tone was that CSS was still very much an 'emerging technology'. Has there been a fundemental shift in the last year?

OK, that really must of been a long time ago. CSS 2.0 was completed in the late 90's. At the moment the W3C are still working on CSS 3.0 as well as a revised version CSS 2.1. Working drafts are availble now.

http://www.w3.org/Style/CSS/current-work.html#table

You'll still get, even today, the odd person who believes that CSS is an 'emerging technology' as you put it. Truth is that they can't handle the truth. To deny CSS is to deny the earth is round.

So Anti, thanks for asking. Have no fear of a browser that can't render a CSS enabled page.

[ihatesafemode]

Originally Posted by pxd

I wouldn't be 100% sure of that. I've been playing around with opera, ff, netscape and ie at the same time, and still get some really bad nerves sometimes. Probably I'm just a pixel guy who loves to see a 1px padding instead of two on some browsers, otherwise what's the point in wasting time writing padding-top:1px and see two instead. CSS can be a nightmare for fine works.

Just a point.

What you've probably seen is a poorly written site. You can't always blame the browser. People have done the same thing with programs running under Windows. Once piece of poorly coded software and it makes the OS go cuckoo. Same goes for a badly coded site where CSS wasn't used correctly. The browser doesn't know what to do, so it goes into whats called 'Quirks Mode'. A page that gets loaded like that, never looks pretty.

Some people code sites with total disregard for Firefox and other browsers.
Some pages don't even show anything in Firefox.

You can have a page look the same in both IE and FF aslong as you do it correctly and thoughtfully.

[Antifreeze]

OK, so why in Opera 7.23 (not the newest, but not old by a long shot) is the log-in module/column on 'Dreamstore' placed over the search-box and header graphic. The column is supposed to start about 50 pixels below, no?
http://www.dreamstoreactive.org

So is that the fault of 'carefully crafted' CSS, or Opera?

Every CSS tutorial I have just looked at seems to be page after page of 'workarounds and tricks' and designers arguing for one method over another. There doesn't even appear to be a clear, definitive way of making a three-column, fluid layout that stretches columns to the width of the page/screen? Is that why so many sites are fixed-width now?

The other thing that puts me off learning/using CSS is that when you see a nice layout feature and view the source to see how they did it, you can't see the CSS file, so you can't learn from the source. That negates the fastest way to learn in my opinion. Trying to find a tutorial for something that you have only seen as an end-user is impossible, because you don't know exactly what script snippet you're looking for.

I think at this point, personally I will continue to only use simple CSS for non-critical embelishments, because there are still apparently so many considerations that you have to take into account if you want to do a 100% CSS site, and it seems to get real complicated, real quick.
As someone working on a small personal website, I don't have time to wade through all that information and mis-information when I can simply layout the site very predictably using tables. Maybe it's different for someone who does web design all day every day.

Don't flame me. It's just an opinion of a noob who learnt a little bit of html, javascript and PHP very easily, but cannot get a grip on CSS because of all the conflicting information and things that still don't work as they are supposed to. Case in point; the 3rd column on DreamStore.

[kichiguy]

The other thing that puts me off learning/using CSS is that when you see a nice layout feature and view the source to see how they did it, you can't see the CSS file, so you can't learn from the source.

"View Source" won't show you the css if it's not embedded in the head element or style attributes, but it's not that hard to extract the path to the .css file from the link element and paste that into the browser's location field.

if you're using firefox you can also just get the "web development" toolbar extension which will give you a convenient "view css" button/menu along with a "view source" button.