Updated - Table-less Joomla! Valid HTML Strict!

Your code modifications and patches you want to share with others.
Locked
xKillswitchx
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Mar 26, 2006 7:55 pm

Updated - Table-less Joomla! Valid HTML Strict!

Post by xKillswitchx » Fri Jun 15, 2007 11:56 pm

UPDATED!  Once More - FINAL

I just finished up editing quite a bit on the content end of the Joomla core code, and have ended up with a completely table-less Joomla site that validates XHTML Strict!  I thought there would be someone interested in this, so I will share.

Validation : http://validator.w3.org/check?uri=www.megaman-games.com
Test Site : http://www.megaman-games.com
(Please excuse my site, its incomplete and alot of the CSS has yet to be added.  I just started on it.  For strict validation, set the validator to strict to override the transitional)

The only files modified are in the com_content folder and a module - content.php, content.html.php and the last modified file is the login menu.  To make things a bit cleaner and easier, I added a few extra CSS classes/id's in the coding so you can better control the look of the modified items.

This hack will also allow you to change the look of your frontpage quite a bit (also your content).  Using the CSS, you can make it so the frontpage headlines, author names, creation date, section / category, etc appear the way Joomla normally handles them (use display: blockl in your CSS for each) or you can have it presented in one row as a modern site usually does (they are spans, all you need to do is add some padding between each). 

CSS Additions
.author
.category
.section
.createdate
.modifydate
.readmore
#navigation

There may be a few more.  If so, you can view your source to find out what they are. 

Before you use this, make sure you backup your existing files.  Download the attached zip, upload and overwrite the original files, and add the new CSS.  That's it.  To get completely table-less, you will need to set each of your menus as flat lists.  I also loaded my menu with -1 switch as well (the header appearance of the menu there is actually a placeholder / seperator).
Ex.  mosLoadModules ('left', -1);


Feel free to browse the source CSS and code at the site I listed above as reference.  I have a default Joomla 1.0.12 install with the Joomlatwork.com SEO patch installed.  If you don't have the SEO patch installed, this is present in the content.php file and will probably mess with your site!  You should download and use the patch anyways, it works wonders for SEO purposes.

Have questions, comments?  Feel free to reply or pm me.  Sorry I haven't finished my site yet to show off what this mod really can do, but you will get the idea if you use it.

One small update - I am still working on editing a bit of the core files and reordering some things, so at times you may come into a messy site.  I know I should be using another test site but you know, space is valuable ;)

FINAL UPDATE - Using more than one flat list menu caused validation to fail.  To fix this, I edited the main menu module php code and removed the ID from each flat list menu and replaced it with a class.  I have replaced the attachment with the final attachment.  Go ahead, check the validation of the site above, view the source, and check it out now that I've put the CSS into it.
You do not have the required permissions to view the files attached to this post.
Last edited by xKillswitchx on Sun Jun 17, 2007 5:59 am, edited 1 time in total.

dkarlson
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Tue Dec 27, 2005 6:12 pm

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by dkarlson » Sun Jul 08, 2007 2:16 am

Thanks for the work on this!

I learned elsewhere on the forums that you DO NOT have to overwrite the core files in your Joomla install.
Simply put content.php and content.html.php in a folder named components within your template folder.

So, if you had a template folder named "joomlatemplate", this is how the folder structure would look.

/templates/joomlatemplate/components <-- put the modified content files here!

That's all there is to it.

xKillswitchx
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Mar 26, 2006 7:55 pm

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by xKillswitchx » Sun Jul 08, 2007 7:34 am

Thanks for that, I didn't know about that  :)
Hope the mods come in hand.  Still alittle work to be done to them, but it's good to finally have something like this. 

Maybe the Joomla team can use this to make a patch for the next version (1.0)

skoenig
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Mon Jul 09, 2007 7:37 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by skoenig » Mon Jul 09, 2007 11:10 pm

Thanks for the hard work xkillswitchx (nice game btw).

I used your code and I've made some changes and a few bug fixes.

Changelog:
- content.html.php Fixed unclosed DIV
- removed Joomla@Work SEO patches so it's closer to original and since some people may not have that installed
- removed 'category: ' text can put it back it you want just did it to get closer to original
- removed '
' from end of post date code so someone can switch order without line break and style all via div below
- encapsulated full post inside .post div so you can style border, padding etc for any post item easily
- encapsulated post tools (pdf, print email) inside .posttools div
Further optimization would be to then remove span divs from each and style all three using just the div in css which would remove quite a bit of code from the page
- encapsulated post info (written by, date, section - category) inside .postinfo div
Further optimization would be to then remove span divs from each and style all three using just the div in css which would remove quite a bit of code from the page
- encapsulated post title inside .posttitle div (so you can float left the title and float right the posttools)

** quick edit **
  - removed errant and unnamed div from official content.php (1256) for lead story already handled in post div creted above for ALL posts

There's probably some more in there to watch out for but I'm posting it back in case it helps others.

Hope this helps.

~ Steph
You do not have the required permissions to view the files attached to this post.
Last edited by skoenig on Tue Jul 10, 2007 2:22 am, edited 1 time in total.

xKillswitchx
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Mar 26, 2006 7:55 pm

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by xKillswitchx » Tue Jul 10, 2007 12:07 am

Thanks!  There were a few bugs left in it that I never updated.  Ive been busy recovering from a server reprovision.  Thanks for the code fixes!

skoenig
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Mon Jul 09, 2007 7:37 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by skoenig » Tue Jul 10, 2007 12:45 am

No worries mate...

It's great to get rid of so many tables so easily. I thank you for doing the heavy lifting (and testing).

The big job is removing the central table in which all the content sits... for now it's ok though... it's just one table. There is a big project I came across the other day which aims or has already done this but it's not as easy as two/three files to implement.

Next step we shoudl try to remove as much markup as possible to make a better code:content ratio.
I figure we can remove many of the combo's for the various post bits and rely on the post divs to handle styles. That way there's a lot less code and it might be easier to manage from a css pov.

BTW placing the content.* file in your template directory only works for the content.html.php file the content.php file still gets called from it's original location much to my annoyance as I've been chasing ghosts for an hour.

~ Steph
Last edited by skoenig on Tue Jul 10, 2007 2:23 am, edited 1 time in total.

User avatar
phlux0r
Joomla! Guru
Joomla! Guru
Posts: 812
Joined: Thu Feb 09, 2006 1:41 am
Location: Auckland, NZ
Contact:

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by phlux0r » Fri Jul 13, 2007 3:37 am

You can also use the a8e Joomla which is basically the latest version of Joomla modified to get rid of the tables. http://a8ejoomla.com

skoenig
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Mon Jul 09, 2007 7:37 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by skoenig » Fri Jul 13, 2007 7:26 am

Thanks! I was trying to remember the name...

~ Steph

User avatar
truimage
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Wed Nov 09, 2005 3:19 pm
Location: San Diego, California
Contact:

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by truimage » Fri Aug 10, 2007 4:17 pm

dkarlson wrote: Thanks for the work on this!

I learned elsewhere on the forums that you DO NOT have to overwrite the core files in your Joomla install.
Simply put content.php and content.html.php in a folder named components within your template folder.

So, if you had a template folder named "joomlatemplate", this is how the folder structure would look.

/templates/joomlatemplate/components <-- put the modified content files here!

That's all there is to it.
Does this same concept work for includes? I recently have torn apart joomla core code to do all of the tableless and xhtml stuff. I had found that some core componants refer to includes and had to make changes there as well. http://www.truimage.net is my site and where I made the changes.
The true work of art is but a shadow of the divine perfection. - Rumi

User avatar
theLoneDeranger
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Thu Nov 23, 2006 11:37 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by theLoneDeranger » Thu Aug 16, 2007 9:23 am

Cool. I also always start with a8ejoomla... I guess when 1.5 reaches maturity we'll no longer need hacks like these...

Please keep in mind that many extensions still use tables though. I always try to remove them there too... but it's a heck of a job, especially keeping it up with upgrades, hacks for integration with other components and so on...

Maybe someday we'll reach a CMS close to my css-driven fetish
In Chinese the word 'crisis' consists of two characters. One means 'danger,' the other 'opportunity.'

User avatar
eeerlend
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Fri Apr 27, 2007 1:47 pm
Location: Bergen
Contact:

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by eeerlend » Sun Nov 04, 2007 9:36 pm

This is the best post ever!

I love you!
Webdevelopment in Joomla - backwheel.no

nhankla
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Sun Oct 08, 2006 12:29 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by nhankla » Thu Nov 08, 2007 3:39 pm

Found a very interesting issue with this great hack.
If you go to 2 column on the menu selector it doesnt distinguish in any way so it defaults to single column

http://www.mainehomedesign.com/newsite/ ... &Itemid=16

is an example of a two column menu

Thanks
natahn

User avatar
phlux0r
Joomla! Guru
Joomla! Guru
Posts: 812
Joined: Thu Feb 09, 2006 1:41 am
Location: Auckland, NZ
Contact:

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by phlux0r » Fri Nov 09, 2007 3:02 am

You should be able to style the div classes for multi column posts with CSS so they display in 2 columns. You would have to give them a width and float them so they stack next to each other...

User avatar
Tubarao
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Jul 08, 2006 1:46 pm
Location: Setúbal - Portugal

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by Tubarao » Tue Nov 13, 2007 11:33 pm

THANKS a lot for these files... EXCELENT WORK !

BUT...

With the new content.html.php, the FAQ section has this problem...

Image

Any "easy" solution for this?

Thanks a lot for any help...

Best Regards,
Tiago Mendão
Last edited by Tubarao on Tue Nov 13, 2007 11:35 pm, edited 1 time in total.

User avatar
Tubarao
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Jul 08, 2006 1:46 pm
Location: Setúbal - Portugal

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by Tubarao » Wed Nov 14, 2007 12:49 am

The solution to fix the problem is the tag in line 232...

Comment behind the tag: (line 222 to 236 of content.php.html)

Code: Select all

<?php
						}
						?>
					</tr>
					</table> 
			<?php
		}

		if ( $params->get( 'headings' ) ) {
			?>
<!--THE TAG HERE--> <table>
			<tr width="100%" nowrap="nowrap">
				<?php
				if ( $params->get( 'date' ) ) {
					?>
Last edited by Tubarao on Wed Nov 14, 2007 12:52 am, edited 1 time in total.

simogeo
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Jan 30, 2008 2:49 pm

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by simogeo » Fri Feb 15, 2008 6:17 am

Hi guys,

Thanks for your contribution.
I have 2 questions.
  • The first one is, is your work compatible with joomla 1.0.13?
  • The second one is regarding the dkarlson's file. I've tried to download your file (tableless-JoomlaValid skmod.zip), but the archive is corrupted. Does someone has it and can forward it to me?
many thanks.

simo

skoenig
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Mon Jul 09, 2007 7:37 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by skoenig » Thu Feb 28, 2008 8:01 pm

Here it is.. I haven't tried it on 1.0.13+ yet but if it works let me know..

~ Steph
You do not have the required permissions to view the files attached to this post.

simogeo
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Jan 30, 2008 2:49 pm

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by simogeo » Fri Feb 29, 2008 3:23 am

Many thanks!!!

cantthinkofanickname
Joomla! Ace
Joomla! Ace
Posts: 1334
Joined: Sat Oct 21, 2006 8:53 am

Re: Updated - Table-less Joomla! Valid HTML Strict!

Post by cantthinkofanickname » Sat May 23, 2009 11:06 am

Where is a demo/example of this template on a live site? The original post URL takes one to a Frameset page!
Thanks for your time.


Locked

Return to “Core Hacks and Patches”