Discussion: Easy tricks to remove many tables from the standard output of Joomla!

[kinne]

THE FIRST THING - CSS

Web sites on CSS

1) "W3C Schools - Learn CSS"
Location: http://www.w3schools.com/css/css_intro.asp
Description: Need an online tutorial? That's the place to go!

2) "A List Apart"
Location: http://www.alistapart.com/topics/design
Description: Certainly one of the most important sources on CSS.

3) "CSS Zen Garden"
Location: http://www.csszengarden.com/
Description: A lot of exemples using pure CSS design. The content is always the same, only the CSS code has been changed by authors. Very nice artwork. See also the book on this.

4) "HTML Dog"
Location: http://www.htmldog.com/guides/cssbeginner/
Description: Very nice web designer's resource for everything HTML and CSS.

5) "Advanced CSS" (University of Leicester)
Location: http://www.le.ac.uk/webcentre/advancedskills/css.html
Description: Useful CSS tips including advice on how to organise your CSS, tricks and workarounds to cope with browser inconsistencies; a discussion about the use of vs ; how to do lists properly; using background images and doing a printable version of your page with CSS.


CSS Browser Specific Hacks

1) CSS Filters (dithered)
Location: http://www.dithered.com/css_filters/
Description: Because of the generally crappy CSS standards support in modern browsers, a number of techniques have been developed to hide CSS stylesheets, rules, and declarations from browsers that won't understand or will mis-interpret them, or to set different values to the same CSS property in different browsers in order to acheive the same appearance on all (or most) browsers. On these pages, I've collected a number of these techniques (usually called filters or hacks) and documented what browsers they work on.

2) "Tricking Browsers and Hiding Styles" (Eric Meyer)
Location: http://www.ericmeyeroncss.com/bonus/trick-hide.html

3) Box-Model Hack
Location: http://css-discuss.incutio.com/?page=BoxModelHack

4) Test your CSS Hacks
Location: http://imfo.ru/csstest/css_hacks/import.php


Books

1) "HTML Utopia: Designing Without Tables Using CSS" (Dan Shafer)
Location: http://www.sitepoint.com/books/css1/?SI ... 0e7294dd20

2) "The CSS Anthology: 101 Essential Tips, Tricks & Hacks" (Rachel Andrew)
Location: http://www.sitepoint.com/books/cssant1/ ... 0e7294dd20

3) "Designing With Web Standards" (L. Jeffrey Zeldman)
Location: http://zeldman.com/dwws/

4) "Web Standards Solutions: The Markup and Style Handbook" (Dan Cederholm)
Location: http://www.amazon.com/gp/product/159059 ... 4?n=283155

5) "The Zen of CSS Design"
Location: http://www.amazon.com/exec/obidos/ASIN/ ... 84-7023964

[kinne]

Many people are asking how to get a Joomla! site without tables.  While you can't get rid of *all* the tables, you can certainly remove a lot of them without doing core hacks, with simple techniques that are available now.

If you know of other easy ways to discard tables, please feel free to follow up here.

Your answer contains three parts:

• first thing: creating CSS
• second thing: switches
• third thing: list-driven menus

My humble contribution to your interesting topic regarding tableless design in Joomla will be to publish a list of web resources that may be usefull for those who want to step into tableless design with nice CSS code. I'll also publish some links that are more centered on Joomla and that I found usefull in my onw projects.
So we may end up with something like a "single market place" on the subject of tableless design. A lot has already been published on this subject, but it's time to gather the various sources. Maybe this topic will be a starting point...

Kinne

[kinne]

THE THIRD THING - List-driven Menus

1) "Taming lists" (Mark Newhouse)
Location: http://www.alistapart.com/articles/taminglists/
Summary: How to use CSS and lists to build vertical or horizontal menus.

[kinne]

THE SECOND THING - Module Switches & Layout

Web sites on Module Switches & Layout

1) "Joomla Tutorial - Understanding Mambo CSS in 5 minutes"
Location: http://www.joomlart.com/tutorials/templ ... 005061644/
Description: overview of Mambo CSS styling. All of the basic css elements of Mambo is put into a clean and easy-to-read picture which will help you to remember in a quickest time

2) "Joomla Tutorial - Mambo Layout"
Location: http://www.joomlart.com/tutorials/templ ... 005062546/
Description: Basic overview of mambo layout + tricks to organize page content with modules.

2) "Cross-references on this forum"
Location: http://forum.joomla.org/index.php/topic ... l#msg88566

[vavroom]

Thank you kinne, these are good additions.  I guess I had made a basic assumption in my post, is that those that were going to use it were already familliar with css driven layouts and had a certain level of familiarity with Joomla! :-o

[kinne]

Thank you kinne, these are good additions.  I guess I had made a basic assumption in my post, is that those that were going to use it were already familliar with css driven layouts and had a certain level of familiarity with Joomla! :-o

Nic,
I am more or less familiar with CSS/HTML but not (yet) with Joomla. And I understand that many Joomla users are not familiar with CSS right now. I'll continue to update these lists and I'm sure that some readers will find interesting sources both in the Joomla part and in the CSS part of the lists. People may discover CMS at very different stages in their life as web site authors and you can never tell what is supposed to be known once somebody gets interested in CMS.

Kinne

[bochenn]

Note that this applies only to modules, not to mosMainBody (which makes calls to com_content, not to modules).

How can we remove tags for mosMainBody?
thanks.

Bochenn

[vavroom]

How can we remove tags for mosMainBody?

At this point, you have to modify /components/com_content/content.html.php

There are a couple "hacks" that have done it for you, but you should use them at your own risk.

We're hoping to have a semi-official package released after 1.1 (if all goes well) that will help you with this.

[bochenn]

There are a couple "hacks" that have done it for you, but you should use them at your own risk.

Can you tell me about the hacks and risks?

[vavroom]

Risks?  Depends how up to date the actual business side of things is (that is, the php code, etc, as opposed to the presentation layer).  As with everything else, you have to test it out for yourself and see what works best for you.  Go to the developper side of our site and do a search on "accessible", it should give you a few results to look at.

Back up your site, install a test site, have fun

[bochenn]

Code: Select all

<?php mosLoadModule ( 'user1', -2 ); ?>

whats the main difference between this hack and http://forum.joomla.org/index.php/topic,5826.0.html ?

[vavroom]

The 508 Hack is a hack, that is, it changes the code for some of the core files.

The way to call modules I offer is not a hack, it is a built-in function/feature of the core.

You can use my suggestion without the 508 hack, which means, without changing your core files, which gives you forward compatibility.  I'm not sure how the 508 hack handles loading modules without that switch, as I've not looked at that feature in the 508 Hack.  It may be that you still need to call modules that way for it to work as intended in the 508 Hack, I don't know.

HTH

[compass]

Thought I would include my 6 part series (and growing) tutorial on Valid W3C joomla sites.

A six part tutorial series about creating a valid joomla template, starts with:
Tutorial 1: Creating a W3C valid Joomla template for your Joomla website
http://www.compassdesigns.net/articles/livesitedesign/

I would offer another couple of additions to the discussion too.

1. Valid is not the same as tableless. You can have valid semantic layout and still have a table or too. I would advise designers to have validation as a goal rather than tableless design. I did a survey recently, trying to validate the top 20 designers I found for joomla on google. Only two (myself and absalom) actually had valid sites. Some of the others had over 100 errors. Worse still (inmho), at least half of the designers were claiming to produce "valid templates" on their sites for download which simply didn't validate.

2. If you have a small site, less than 10 pages and don't really need dynamic content, its very easy to produce a tableless site without hacking. Simply publish the main content as a plain user module rather than use the mosMainBody call.

3. Something the dev's should address ASAP is how the active_menu tag is used. Found in joomla menus, even flat lists, its specified as an "id" rather than a "class". This means that more than one instance of a menu on your pages with automatically invalidate it!. You have to put a CSS suffix on each menu to stop this happening...

4. Related to 1, maybe we should publish somewhere a "celebration of joomla design to web standards". Something like cssreboot or th other site whose name escapes me. We could ask designers to post their current status of their own web sites and the templates they produce in terms of how well the validate; "its hard to improve on something unless you measure it first".

[absalom]

I would offer another couple of additions to the discussion too.

1. Valid is not the same as tableless. You can have valid semantic layout and still have a table or too. I would advise designers to have validation as a goal rather than tableless design. I did a survey recently, trying to validate the top 20 designers I found for joomla on google. Only two (myself and absalom) actually had valid sites. Some of the others had over 100 errors. Worse still (inmho), at least half of the designers were claiming to produce "valid templates" on their sites for download which simply didn't validate.

The major web standards based designers in M/J! are:

Leonard, part of the U&A Group, from Aurum3
Franck, from 55 Thinking
Angie and Robert, also part of the U&A Group, from Run Digital
and both yourself and myself.

Leonard, Franck and myself have probably been doing web standards work for around 2 years now inside M/J and most of us are ex Mambo 3PD Standards & Guidelines as well, so there is a wealth of knowledge we contributed towards web standards on the Mambo boards. I haven't seen Nic/vavroom do templating, but I do know he's probably the most experienced web standards guru around here (considering his write up on Mezzoblue a while back)

Regarding point 4, I'm working on it 

[Fabster]

4. Related to 1, maybe we should publish somewhere a "celebration of joomla design to web standards". Something like cssreboot or th other site whose name escapes me.

Maybe You mean: http://www.unmatchedstyle.com/

or http://www.nv30.com/mt/blogomania/index.php

I like this idea very much. I want to learn more about Joomla based validating "do's and dont's". Good examples what people have achieved always help!!

Cheers
Fabster

[scatcat]

Thought I would include my 6 part series (and growing) tutorial on Valid W3C joomla sites.

A six part tutorial series about creating a valid joomla template, starts with:
Tutorial 1: Creating a W3C valid Joomla template for your Joomla website
http://www.compassdesigns.net/articles/livesitedesign/

I would offer another couple of additions to the discussion too.

1. Valid is not the same as tableless. You can have valid semantic layout and still have a table or too. [...]

True.

But Joomla can be frustrating when you try to procuce a valid site that should be accessible from a variety of platforms.
Tables are not exactly optimal when designing for a phone, a pda, or other small screen situations.
With the @media and tableless design you can have your cake and eat it too.

On the absolute top of my wishlist of the last 3 or 4 years have been a tableless Mambo/Joomla.

Second on the list, for the last year or so, I wish for trackback, pingback and contextual comment handling integrated and optional. This to make it possible to move seamlessly between classic CMS-type content and blog-type content without installing parallell systems. And yes I know that some ppl doesn't like pb/tb, but it would be a good option to have.

Give me those and all will be well in the world (apart from wars, stress, empty bank-account and lego in my bed) 
Anything I can do to smooth the way?

[vavroom]

On the absolute top of my wishlist of the last 3 or 4 years have been a tableless Mambo/Joomla.

http://becanz.net what do you think?

As for trackback, pingbacks, etc...  I think that should perhaps be a 3PD feature.  A blog type feature may be nice, but Joomla is, and should remain, a CMS, not a blog.  We've been seeing a lot of Blog systems going towards being more a CMS, and we have to be careful not to "dumb down" the CMS so it becomes more like a blog...  My 2 cents on the topic, your mileage may vary...

[scatcat]

On the absolute top of my wishlist of the last 3 or 4 years have been a tableless Mambo/Joomla.

http://becanz.net what do you think?

As for trackback, pingbacks, etc...  I think that should perhaps be a 3PD feature.  A blog type feature may be nice, but Joomla is, and should remain, a CMS, not a blog.  We've been seeing a lot of Blog systems going towards being more a CMS, and we have to be careful not to "dumb down" the CMS so it becomes more like a blog...  My 2 cents on the topic, your mileage may vary...

Well and good and still would f**k up the upgrading process - unless it becomes part of the official package.
Understand me right, I applaude the attempt, and I AM tempted to contact becanz.net for the code.

I could, and have done something almost similar, if not as complete, once - but that site is still stuck with Mambo 4.0.14 (or somesuch) because of it.
Becanz.net's code might be the solution for that site.

I understand your sentiment about not "dumbing down" Joomla, but then all the parts are there except for the tb/pb.
What is truly the difference between an advanced blogging solution and a CMS? The greyzone is pretty wide.
But yes a 3pd feature would solve the problem. Actually it might even be preferrable, as it would help keep the core lean and mean.
I might even look into it myself, when and if I have the time - I'm sorry, but that is the best I can do, since time is at a premium for me right now.

I do love Joomla, and I thank you vavroom for the prompt and courteous reply.

[vavroom]

Well and good and still would f**k up the upgrading process - unless it becomes part of the official package.
Understand me right, I applaude the attempt, and I AM tempted to contact becanz.net for the code.

Hehehe, *I* am becanz.net

And yes, any core hack would mess up the upgrade process.  That work was done with views to be integrated in the core, when I was on the core team.  I believe that if they do what they said they would, with 1.1, it would be easy to modify the component.html.php file and put it in the /template directory, to override the core file.  like that, easy upgrade, and relatively easy modifying of files too.  Time will tell.

[scatcat]

Well and good and still would f**k up the upgrading process - unless it becomes part of the official package.
Understand me right, I applaude the attempt, and I AM tempted to contact becanz.net for the code.

Hehehe, *I* am becanz.net

Silly me... Of course you are!!!

And yes, any core hack would mess up the upgrade process.  That work was done with views to be integrated in the core, when I was on the core team.  I believe that if they do what they said they would, with 1.1, it would be easy to modify the component.html.php file and put it in the /template directory, to override the core file.  like that, easy upgrade, and relatively easy modifying of files too.  Time will tell.

Let's hope so.

[vegiemite]

Here's my quick hack of content.html.php to remove the tables from the main page content itself. I hardcoded in s for the Page Title.

I know this will get messed up each time an upgrade affects that file but it might save someone a few minutes. I am running v. 1.0.8 so this should be the latest version of that file.

Hope that helps.

[stephenrs]

hi guys,

i'm very interested in this discussion, and also hope that i can provide some type of contribution.

i've been working on my site for some time and i've been pretty focused on new-fangled Javascript/DHTML techniques, but also i wanted the site to be as standards compliant as possible.

i addressed the problem of creating a largely tableless joomla by writing a component (com_xtdcontent) that installs the way any other component would, and runs alongside the standard com_content so my upgrades are painless (i started tinkering on 1.0.3 and am on 1.0.7 now). to get fuller functionality i also dropped in content_blog_category, content_blog_section, etc bits to /com_menus so that i could easily create menus that used my component. i've also rewritten parts of a few 3pd CMs to be better behaved.

while in some cases i'm still at the mercy of some tabled 3pd components, and i've got some 'semantically impure' code of my own still floating around (and maybe a little cheating in the DOM), many of the pages validate XHTML/CSS and 508 (and I'm getting close to WAI), and i'm striving to make the site better standards-wise all the time. i'm also dedicated to writing and releasiing CMs that conform to standards guidelines (at least to the degree that my understanding of them will afford).

i'm looking forward to the day when all 3pd's are thinking about standards and providing layout flexibility that improves upon the rats nest of nested and fixed width tables that seems to plague so much of the code now - so i'm willing to join the evangelism cause if there is one.

has anyone done any work yet on a coding guidelines document for 3pds with standards as a baseline (in case i've missed it)? maybe it would be useful to have a document that lays out some general unifying recommendations for id's, classes, general semantic considerations, etc. does anybody else wanna change the sectiontableheader/sectiontableentry2 culture?

my site: http://phlooid.com

all the best.

[Asphyx]

Didn't know about the module switches...
Is there a good tutorial around as to what tags you need to set that are added by using switch 3?

[absalom]

Not really. It's probably easier just to study the whole methodology of CSS rounded corners:
e.g. http://www.redmelon.net/tstme/4corners/

as that is essentially what it's doing..

On a related topic, I guess now that you're no longer welcome on the Mambo forums, that "Orange" project for Mambo in regards to web standards isn't going anywhere fast 

[Asphyx]

LOL Ab...it didn't seem to be going anywhere fast when I WAS still allowed there! LOL
the only thing orange over there is their alert status!

I'm supposedly allowed to login there again...Let me know when the moon turns blue I'll get right to it!
No reson given and no explanation for the restored access

Thanks for the link I'll check it out...
I used to wrap the columns but I really like the look of the modules themselves being wrapped instead..
Also save me a ton of nested divs! LOL

[absalom]

I used to wrap the columns but I really like the look of the modules themselves being wrapped instead..
Also save me a ton of nested divs! LOL

The -3 switch is the nested divs "rounded corners" solution as shown in the link above.. just in case you misunderstood..

[Asphyx]

LOL no I knew what you meant....thanks!

[desenso]

Vavroom:

Thanks for your post.  I was toiling with how to make the menus lists and was about to start sniffing around the core when I found your thread.  It saved me a lot of time, so thanks!

As for this whole topic: as far as I'm concerned, this is the biggest drawback to Joomla right now.  That's really a pity, because this is an amazing system.  I've spent about 100-200 hours developing a site for a client on a range of CMS' (at my own expense, of course, I'll only charge for my work on the final product) and I think I'm set with Joomla.  The only disappointing thing for me was the amount of tables.  Nevertheless, it was pretty easy to convert my tableless CSS to a new template in Joomla... I'm just still a bit annoyed with the tables for the main content.

I suppose I can get over it for the time being.  I do hope that they modify the core so that things that don't require tables aren't built with tables.

[scatcat]

Vavroom:

Thanks for your post.  I was toiling with how to make the menus lists and was about to start sniffing around the core when I found your thread.  It saved me a lot of time, so thanks!

As for this whole topic: as far as I'm concerned, this is the biggest drawback to Joomla right now.  That's really a pity, because this is an amazing system.  I've spent about 100-200 hours developing a site for a client on a range of CMS' (at my own expense, of course, I'll only charge for my work on the final product) and I think I'm set with Joomla.  The only disappointing thing for me was the amount of tables.  Nevertheless, it was pretty easy to convert my tableless CSS to a new template in Joomla... I'm just still a bit annoyed with the tables for the main content.

I suppose I can get over it for the time being.  I do hope that they modify the core so that things that don't require tables aren't built with tables.

Amen to that.

This is, for me, without any real competition, THE drawback of J!
I don't know about elsewhere, but here in Sweden AFAICT ppl have taken the tableless design to heart - my customers ask for it at least.
It has come to the point where I have to talk around it when suggesting the system - promising it will happen "soon".

For me this has priority over AJAX, OO design, and most other issues discussed in the roadmap and on the boards.
I want clean and semantic (X)HTML. Before that is a fact, the rest is just gadgets.

Just my 5¢

[torkil]

I recommend having a look at how Accessible Joomla outputs its code.

An example of site running Accessible Joomla: www.bedre.no