Whelp, I didn't see anything like this already in existance, so I am developing a couple wireframe all-CSS XOOPS themes for use as a starting point for theme developers. The goal here is to be 100% W3C compliant, not use tables for layout, stay as flexible as possible, use proven and "expert" recommended browser hack methods if possible, while keeping the code to a minimum. One of the hardest parts of dealing with CSS-based designs is everyone handles the challenge that mult-browser support entails in different ways, and as CSS evolves, it will make things easier on us if we pool our abilities and work together rather than everyone handle problems differently. Hopefully this will make things easier once browsers are updated and new levels of CSS are supported.

Note: This is not a theme to use on sites - it is intended to be used as a starting point for developing new themes.

The first theme is based off of Eric Costello's 3 column "Holy grail" example found here:
http://www.glish.com/css/

This is a 3 column theme with a fluid center column that supports XOOPS new extra blocks. I used the FIELDSET tag for blocks and to overcome IE's lack of min-width support I did use a little bit of javascript provided by http://www.projectseven.com.

I had to hack the daylights out of Eric's example in order to get the center blocks to work right and ended up having to use a couple floats. I also had to feed non-IE browsers some different code using the #style,[IEwon't readthis] {} hack. But it appears to work well in Firefox and lays out fairly well in IE 5 & 6. It degrades fairly well in older browsers as well although I have yet to do much testing on different platforms, or even validate the HTML yet

Anyway, I know this theme is not "done" yet, so CSS experts and other theme developers, please help me test and refine this theme so future developers can use these as a starting point once we're done.

--------------------------------------------
3 COLUMN HOLY GRAIL WIREFRAME THEME:

Zipped:
http://technigrafa.com/DEV/holygrail.zip

View HTML:
http://technigrafa.com/DEV/holygrail/theme.html

View CSS:
http://technigrafa.com/DEV/holygrail/style.css
--------------------------------------------

A "fixed" centered 3 column layout will be coming next. Hopefully that will not be as hard as this theme was to get to work across different browsers.

Your work sofar does sound excellent, and I'm looking forward to follow your progress.
I don't know if you have allready seen it, but this may be of help to you:
https://xoops.org/modules/news/article.php?storyid=3111

Thanks for sharing your learning experience with us, it is gratifying to know that more of us are motivated into learning and working on this type of designing.

I've started a wireframe myself too, but haven't got to the point of publishing anything since this is a rather new learning phase I am going through and it's taken me time to get things right (I will share it with all as soon as I get it ready so we can complement each other's work - basically I just have to fix the centercolumn resizing issue, add the XOOPS 2014 block positioning, and some margins and paddings for better spacing ...am still not sure how it can behave with certain modules and if there will be conflict in between the module's css and the theme's css ). Right now I am learning from leo's zeta reticuli theme which has all the structure css based and has advanced css elements I had never been able to see before in code that I could access, so I stopped the process I was in with the wireframe to study zeta reticuli.

There is one small tricky thing in doing these css themes, is that when you disable all left or all right blocks , the centre column doesn't stretch occupying the space of what was the left or right column leaving a hole/blank space. The Holy Grail wireframe you are working on has this issue too. I solved this somehow, but I want to replace that part of code with the way zeta reticuli does it. I think there is a thread about this somewhere here too but I forgot to bookmark it. I can anyways show you the style.css of how I got through with this (via email though, since it is not in a publishable state yet), although zeta's way is a better way to handle this.

As a theme designer it is great to have a quality wireframe to work with and it really improves the learning experience being able to share what has been learned with others.

Thanks guys,

Yeah, I knew that not using one of the three columns would pose a problem because there is space allocated for each column, but then again, it's designed to be a 3-column layout.

The theme designer can remove a column if they want 2 columns, or use one of the hopefully upcoming 2-column wireframe themes. The other option is to build in extra code into the theme.html file so that if a column is activated, extra CSS is applied, thus overriding the layout stuff in the style.css file. I am not sure if it's worth all the extra code to have a theme that does everything versus having a couple different basic themes to start from.

I checked out alain01's theme linked to above and it appears to be table based, if it is the theme that is active on the site that is linked to there. I am trying to get away from using tables for layout - tables were meant to hold tabular data, not for format. Thanks for the link though. I would love to check out any other pure CSS themes that are out there.

I will email you what I've done of the wireframe I've worked on so you can take a look at the center column resizing issue. It's not really that much extra code to it.

Zeta Reticuli is a css tabless based theme, you can see it here:
https://xoops.org/modules/news/article.php?storyid=3178

or visit http://www.xoopsfactory.com they work tableless themes too.

I was just helping a friend with some css issues he had on xoops, and notived that the greenGrass theme he's using appears to be css only.
There's alot of questions about a xf_greenGrass theme on xoops.org, so I guess it's the original name. However, it's not in the repository.
(I'll have my friend email it to me.)

Thanks, I am downloading the zeta theme now. I have seen it before and think it looks very impressive, but I haven't studied it yet.

I think XOOPS theme designers can really benefit from a very basic wireframe theme, rather than reworking a complicated theme like zeta that has tons of features, many of which limit browser compatibility. Although I applaud leo for this marvelous theme (and look forward to studying it). It appears to really push the limit of what can be done, and that is a really good thing. XOOPS will really benefit from themes like that. It's just not what I am attempting to do with a wireframe. I really like the idea of reworking many of XOOPS more common blocks, like login, usermenu, mainmenu, etc. and including that in the wireframe as well to improve W3C compliance.

Also, I have updated the files linked in the original post - there were some tags in uppercase that W3C didn't like.

Okay below is a fixed (760 pixels) wireframe theme based off of the Skidoo Too column CSS layout:
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html

----------------------------------------------------
FIXED 3 COLUMN LAYOUT:

Zipped:
http://technigrafa.com/DEV/fixed.zip

View HTML:
http://technigrafa.com/DEV/fixed/theme.html

View CSS:
http://technigrafa.com/DEV/fixed/style.css

----------------------------------------------------

This incorporates a font resize javascript feature along with some browser detections stuff, source ordering so the middle column appears before the left column in the code, and a top horizontal menu.

NOTE: Does not support layouts with less than 3 columns yet, but the HTML does validate. I have thrown in a few extra templates for the content and system modules as well.

In an intent to contribute to this work table that has become this thread, thanks to the motivation of technigrafa. I retook the work I was doing to the tableless css theme I have been working on. I have been working on it the last three hours and added the 2014 block code to it and did the correct resizing to the centercolumn when either left or right columns are not being used and some other fixes about elements that just weren't floating to the right place. I am very happy with the results I got, this is the first tableless structure I do and I consider it still in beta stage until it is fully tested in a XOOPS environment with lots of content to make sure nothing breaks along the way and it could be improved in many other ways.

Credits: A very special thanks to leo and skalpa for teaching me and leaving some very specific points, where I thought I was lost, clear to me. XoopsFactory.com and Imagocn.net for their css themes from which I studied and started learning how to improve my css skills.

*******************************

CSS DIV BASED THEME
---------------------------

View HTML | View CSS | Download here | View demo

* I put it in the free downloads section of xoopsdesign.com, to be able to download themes you have to register first.

** To view the demo click on css100 in the theme box at the bottom of the leftcolumn.

*******************************

I will have to be doing improvements to it, any feedback is appreciated much.

@technigrafa: I will need a little more time to analyze your work and see how we can complement each other's work, thanks for what you have done.

Technigrafa,
a good approach - and it looks ok in FF & Opera 8.5. It's a pity about the JavaScript though - some 10-15% of all users don't have it activated - and IE reports a JS syntax error in line 34.

Snow 77,
your demo themes look good - in FF & in Opera 8.5.
One small point - look at the theme selection box in your bubblegum theme in all browsers. Its getting squashed together too much.

Keep up the good work the both of you,
Alan