"The Jello Mold Piefecta Reborn"

marios · 2006-03-01 23:02:27

This was originally intended to go into the TEXTPLATE competition.

You can take a look at the demo Site here

Unfortunately by the time I wanted to move this to the Server , Nelson mysteriously went down.
Anyway , I’m not so much interested in the Prices anyway.
Drag the lower right handle in Firefox and see how El Greco reflows the content both of the sidebar boxes and main content boxes in real time.

The stone textured towel graphic in the header is a metaphor for the Power of CSS overcoming the rigid and cristallized state of conventional Blog layouts.

The main reason why I wanted to do this , was to prove that TXP can handle allmost any layout, you could imagine.
This is based on Mike Purvis original method called the <strong> Jello mold Piefecta.</strong>
If you are not familiar what’s the difference between a normal jello mold and this one, just read his article which is included in the demonstration Site.
Mike kindly gave his permission to distribute his article.
Here you can find his custumizing Tool and original article .There is more goodies in this like the fixed footer which will allways stick to the bottom regardless wheather content is generated or not.
(May be a custom Icon Set that I have done allso for this purpose will be included allso, but haven’t decided yet.)

Enjoy, regards, marios

I am still ironing out some glitches and have decided to make it a gift to the Community by releasing it on the Textgarden Site shortly.

Below there is a draft from the included help files.

h1.HISTORY El Greco Template v1.1

What it is?

El Greco is a custom made template based on a fluid layout, a so called Jello Mold Piefecta.It is except some minor features based allmost entirely on Mike Purvis original work and excellent documentation.Mike Purvis is a Canadian Engineering student,his guest article at positioning is everything can be ssen here.Mike allso provided a Tool to custimize the max and min values to your likingAs.You can retrieve it here.

What does it do ?

1. Apart from this, it has a fixed footer that allways remains at the bottom of the viewport and introduces certain fixed minimum height box features. 2. The difference between a normal Jello Mold and this is,that it will stop contracting at a certain min-width,that can be made custumizable and and cease to expand at a certain max-width for very large screen resolutions, so your articles donít become difficult to read. 3. Mike was kind enough to give his permission to publish his original article on the demonstration site available here. 4. This Template is targeted both at Bloggers and Designers and/or Devellopers that want to improve or iterate on these ideas. 5. License is GnuGPL,allthough that doesnít make much sense for the CSS and graphic files.

Main Features

1. max and min width behavior regardless viewport size.In this case,max=990px and min=700px,max width occours at a viewport width value of 1280px. 2. Custom aqua style hover navigation menu,hover and active states 3. customized dynamic aqua style content boxes 4. customized drop shadow side bar boxes 5. automatic main menu updating through rdt_dynamenous plugin (Curtesy ?) 6. fixed footer 7. certain min-height features on content boxes 8. good behavior on font resizing up to three notches on Firefox. 9. certain conditional section output, in case there are no articles assigned.Customizable at your likings. 10. diplays a get compatible browser div, in case viewed by IE versions. 11. multi transparency png layering in the logo div for browsers, that can support it. 12. custom CSS Table Styles included. 13. custom code view CSS. 14. default Icon set.

Known Issues and workarounds

* Caution!:No measures whatsoever have been taken for a possible release of IE7 in the next few months.By the time of this writing IE7.2 beta is still not finalized,and it remains uncertain whether which Bugfixes will be included in a final release or not. Even exporting all Explorer hacks to separate style sheets and commenting doesnít change anything about that fact. * Most likely the html star hack needs to be replaced,solutions are at hand,but it would be too soon to make any speculations at this stage. * The method to achieve the jello Mold piefecta comes at a certain price, mainly divitis and loss of semantic markup. * The html star hack does throw Errors in Jigsaw,so it will not be possible to demonstrate valid markup(at least not for a Strict doctype. * Total file size of Imagery is about 200kb on disk. (This is mainly due to the png logo and the header graphic file,without them it would be at 120kb. * non-web safe colors. * A commented java script hack is necessary to make this work in Explorer.(Curtesy Mike Purvis AFAIK)

Testing and Evaluation

1. Firefox 1.02=>1.06,Opera 7.2,Opera 8,Mozilla 1.6,Mozilla 1.7,Netscape Navigator 8,Natscape 7.2 =>passes
2.IE 5.0/w2k/sp4 => fails
3.IE 5.5/w2k => not tested
4. Explorer6/w2k2 => passes
5. Netscape 6.1 => fails. will slide content 50% left past viewport.

Mac OS

1. Camino 1.0b2 =>passed
2. Safari v2.033=>passed
3. Firefox 1.051=>passed
4. Opera v8.51=>passed
5. IE5.2/MAC passes but with some dimensional and graphic related display problems,which means Site is still usable.

I need more test results,if you are working on these templates,please include this file and insert your test results above.Needed:Konquerer,Anything that could not have been listed on XP.and older moz browser versions and or older browser versions of Safari and Camino.Missing allso is IE5.5.
I don’t have a browser cam account, but allso some real live testing is much better anyway.

History file to El Greco Template 27.02.2006

Fixed to work for MAC OS IE5.2 allso.
Some minor display bugs spotted here and there,no time to fix this for now. v1.1

Last edited by marios (2006-03-01 23:18:24)

alexandra · 2006-03-02 07:53:35

Awesome. It is a shame Nelson went down. Can´t you ask Thame to include it to the contest? Tt was not your fault server crashed.

marios · 2006-03-02 14:35:54

Thanks Alexandra, but the Rules are the Rules, no way to change that, allso I enjoyed very much working on this, just the experience that you gain is allready worth the effort, but since it didn’t go in anyway, Ill have the chance to do some more production evaluation on it, and allso to see, how extensible really is this for a end User from under the hood.
Most likely all this is going to fall apart anyway once IE7 is out, so if you by any chance could give me hints on how this looks on a beta 1 version(Note:don’t use beta 2 for testing) that ‘ll be great.
What I have been hoping to come to see is a discussion on some different layout appproaches, and whether they are a dead end street or not, especially when you want to use lots of layering on the z-axis and still have some level of semantics.
Unfortunately I’m not that good in documentation, but I’ll try to get some articles together about how I tried to approach this concept and the obstacles that I encountered.

regards, marios

Last edited by marios (2006-03-02 14:36:42)

zero · 2006-03-03 20:20:52

Mike Purvis is da man! FYI, 4-Ever uses Jello Mold Piefecta. I would also appreciate if anyone would try it in all those browsers too.

marios · 2006-03-03 23:00:13

Looks good in Safari,superb markup and content , the font and background colors contrast are problem though for visually impaired site visitors,
nice Site alltogether,
EDIT.: Note, that the above example is not about content generation, that’s why there isn’t any.I’ll through in there something later,
Correcting the markup right know to make it validate, will tweek the CSS later,deciding about which forms to include as to avoid enduser mistakes.
Testing different conditionals, etc, including icons.
Allso this is more thought of as how could “legacy-style-like” graphic elements (z-axis), TXP , and fluid layout find a balance with each other.
(Kind of niche template, so to speak.)
more concerned about the many browser hacks right know.

EDIT.:Some Visitors might get served some cached pages from an old Site that was there, for historical reasons, there is an old forwarder on this domain that points somewhere else, but I am not able to remove it , because my Registrar wants me to upgrade to theitr premium service which I don’t want to pay for,
just append a section name to the URL then.

regards

Last edited by marios (2006-03-03 23:39:07)

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-01 23:02:27

"The Jello Mold Piefecta Reborn"

#2 2006-03-02 07:53:35

Re: "The Jello Mold Piefecta Reborn"

#3 2006-03-02 14:35:54

Re: "The Jello Mold Piefecta Reborn"

#4 2006-03-03 20:20:52

Re: "The Jello Mold Piefecta Reborn"

#5 2006-03-03 23:00:13

Re: "The Jello Mold Piefecta Reborn"

Board footer