veeg sent this round the company mailing list today. Very shiny. Like the alistapart "Taming Lists" article, but much much more. I may steal one of these tricks to liven up the Reading OpenGuide navbar.
lots of examples of the different ways of applying style to simple html unordered lists:
http://css.maxdesign.com.au/listamatic/
Kake
On Fri 28 Nov 2003, Kate L Pugh kake@earth.li wrote:
lots of examples of the different ways of applying style to simple html unordered lists:
Inspired by this I had a bit of a play: http://the.earth.li/~kake/cgi-bin/tmp/index.cgi
Take a look at it with and without style sheets. It is not perfect yet. The HTML is very similar to what's currently in OpenGuides CSS, with a few classes added and a few divs shuffled about.
Kake
On Sat 29 Nov 2003, Kate L Pugh kake@earth.li wrote:
http://the.earth.li/~kake/cgi-bin/tmp/index.cgi [...] The HTML is very similar to what's currently in OpenGuides CSS,
For anyone confused, this should have read "OpenGuides CVS". Sorry.
Kake
On Sat, Nov 29, 2003 at 12:15:18AM +0000, Kate L Pugh wrote:
Take a look at it with and without style sheets. It is not perfect yet. The HTML is very similar to what's currently in OpenGuides CSS, with a few classes added and a few divs shuffled about.
As I mentioned on IRC to those who were there, this implementation is an interesting idea, but uses nested lists, which isn't the way to abstract CSS if you want to do stuff like this (incidentally, this implementation doesn't work in IE5/Mac). So I spent a while completely redoing OpenGuides CSS, and this is the result:
http://un.earth.li/~earle/cgi-bin/wiki.cgi?Example_Node
There should be divs there with classes for just about everything, so you should be able to apply whatever kind of CSS trickery to this that you wish fairly safely.
This is all in CVS, along with the stylesheet; I've also modified Build.PL to install that as wiki.css in the same directory as wiki.cgi. (Maybe someone could change that to a user-selectable location? I'm too tired now.)
On Sun 30 Nov 2003, Earle Martin openguides@downlode.org wrote:
http://un.earth.li/~earle/cgi-bin/wiki.cgi?Example_Node
There should be divs there with classes for just about everything, so you should be able to apply whatever kind of CSS trickery to this that you wish fairly safely.
Good work!
This is all in CVS, along with the stylesheet; I've also modified Build.PL to install that as wiki.css in the same directory as wiki.cgi.
I don't think we should be installing stylesheets - the whole point of doing these CSS things is that everyone has their own individual stylesheet. It could go in examples/ along with oxfordguide.css though. Oh. Are these changes going to stop existing stylesheets from working? We should put a warning if they are.
Kake
On Sun, Nov 30, 2003 at 12:50:32PM +0000, Kate L Pugh wrote:
This is all in CVS, along with the stylesheet; I've also modified Build.PL to install that as wiki.css in the same directory as wiki.cgi.
I don't think we should be installing stylesheets - the whole point of doing these CSS things is that everyone has their own individual stylesheet.
Yes, but there has to be something you give people, otherwise they have to spend hours looking for style classes in the templates.
It could go in examples/ along with oxfordguide.css though.
Oh, right. I didn't see that directory. OK, I've put it in there and removed it from Build.PL. The oxfordguide.css example is now obsolete, so I removed it and changed what it says in INSTALL.
Oh. Are these changes going to stop existing stylesheets from working? We should put a warning if they are.
Slightly - I renamed the 'toolbar' class to 'navbar' for consistency, which I should have called it in the first place. Otherwise things should remain about the same, modulo any changes you've made to your local stylesheet for customisation of appearance. Where should I note this in, CHANGES?
On Sun, Nov 30, 2003 at 12:50:32PM +0000, Kate L Pugh wrote:
Oh. Are these changes going to stop existing stylesheets from working? We should put a warning if they are.
On Sun 30 Nov 2003, Earle Martin openguides@downlode.org wrote:
Slightly - I renamed the 'toolbar' class to 'navbar' for consistency, which I should have called it in the first place. Otherwise things should remain about the same, modulo any changes you've made to your local stylesheet for customisation of appearance. Where should I note this in, CHANGES?
Yup, put it in Changes. Do the lots of asterisks and "INCOMPATIBLE CHANGE" thing too.
I think this is probably worth a release.
Kake
On Sun, Nov 30, 2003 at 01:40:45PM +0000, Kate L Pugh wrote:
I think this is probably worth a release.
Everything I've done is in CVS and noted in Changes. (I added it to MANIFEST and Build.PL too, and removed the pubcrawl stuff from them as well to match a comment I saw in Changes.)
If someone could try installing this, that would be great.
http://un.earth.li/~earle/tmp/OpenGuides-0.30_01.tar.gz
On Sun 30 Nov 2003, Earle Martin openguides@downlode.org wrote:
If someone could try installing this, that would be great.
I can't figure out how to make a stylesheet for it that looks like the current Reading OpenGuide, ie with the navbar at the top instead of the side: http://reading.openguides.org/
Kake
On Tue, Dec 02, 2003 at 10:59:09AM +0000, Kate L Pugh wrote:
I can't figure out how to make a stylesheet for it that looks like the current Reading OpenGuide, ie with the navbar at the top instead of the side.
Take a look at
http://un.earth.li/~earle/cgi-bin/wiki.cgi?Example_Node
now, and its stylesheet. Not terrifically pretty, but there you go. (What you're interested is the display property in CSS and the setting "inline".) I also added two new classes to wiki.css, search_group and search_label, for more flexibility.
On Tue, Dec 02, 2003 at 10:59:09AM +0000, Kate L Pugh wrote:
I can't figure out how to make a stylesheet for it that looks like the current Reading OpenGuide, ie with the navbar at the top instead of the side.
On Tue 02 Dec 2003, Earle Martin openguides@downlode.org wrote:
Take a look at http://un.earth.li/~earle/cgi-bin/wiki.cgi?Example_Node now, and its stylesheet.
That's close, but (unless it's my browser - Firebird on linux) the navbar still isn't at the top; the site name is above it. It's not just me that needs this to work; the Oxford and Oslo guides have this design as well.
Kake
On Tue, Dec 02, 2003 at 03:16:20PM +0000, Kate L Pugh wrote:
That's close, but (unless it's my browser - Firebird on linux) the navbar still isn't at the top; the site name is above it. It's not just me that needs this to work; the Oxford and Oslo guides have this design as well.
Oh, well, you didn't mention that you wanted it above the banner. :) That requires a template modification; there's no CSS way to do it.
As it stands the templates feature this:
[% INCLUDE banner.tt %] <div id="content"> [% INCLUDE navbar.tt %]
banner.tt does the strip at the top with the site name. The div called "content" provides the small gutter of whitespace running around the edge of the area below the banner, which prevents things from abutting the edge of your browser window and looking ugly. If you wanted to put the navbar above, you'd have to mode the INCLUDE line for navbar.tt above the one for banner.tt wherever it occurs.[0]
I don't currently have a solution beyond "you'll have to edit your templates a bit," sorry.
[0] This is currently in several places; I could have been more efficient and bunged those three lines into header.tt only, under the <body> declaration, but I wanted to let people be able to modify the look of individual page types easily if they really wanted to, although I'm not sure why that is.
On Tue 02 Dec 2003, Earle Martin openguides@downlode.org wrote:
Oh, well, you didn't mention that you wanted it above the banner. :) That requires a template modification; there's no CSS way to do it.
Hang on! I thought the point of all this CSS work was so people didn't have to modify their templates! I really really really want to get away from custom templates. Reading and Vegan Oxford are currently running on the standard OpenGuides templates. I don't think it's fair to say that those sites now have to change their design, and since they're also pre-release testers for new OpenGuides releases, I don't think it's a good idea to run them on custom templates.
I wonder if we need to try and make a clean split between presentation and functionality bits of templates. I'm not too worried about people providing their own subtemplates for parts of the pages that won't have functionality-related bugs.
But for now, please let's keep as much backwards compatibility as possible.
Kake
On Tue, Dec 02, 2003 at 03:43:41PM +0000, Kate L Pugh wrote:
Hang on! I thought the point of all this CSS work was so people didn't have to modify their templates!
Yes. I've gone about as far as I can go; if someone can fix it so you don't have to, then I'd appreciate knowing how. This CSS zen garden business is beyond me.
Reading and Vegan Oxford are currently running on the standard OpenGuides templates.
Which are flawed; this is the reason I've been working the templates over in the first place. It results from the usability feedback I gathered the other month.
I don't think it's fair to say that those sites now have to change their design,
Well, London did, to general approval. It's up to individual site maintainers what they want to do. The point of the new templates is to improve usability.
parts of the pages that won't have functionality-related bugs.
I haven't seen any functionality bugs, only differences in appearance.
But for now, please let's keep as much backwards compatibility as possible.
Well, yes.
On Tue 02 Dec 2003, Earle Martin openguides@downlode.org wrote:
Yes. I've gone about as far as I can go; if someone can fix it so you don't have to, then I'd appreciate knowing how. This CSS zen garden business is beyond me.
I think the essence of what we're looking for is some way of reordering <div>s within the page - using CSS. I have no idea if this is possible. Anyone?
Kake wrote:
Reading and Vegan Oxford are currently running on the standard OpenGuides templates.
Earle:
Which are flawed; this is the reason I've been working the templates over in the first place. It results from the usability feedback I gathered the other month.
I don't mind moving the design about a bit but I really must have the navbar on the front page somewhere. That for me is still a great usability concern with the London site. I think we do have to make sure it's possible to fit both the navbar and the recent changes feed on the front page.
Kake:
I wonder if we need to try and make a clean split between presentation and functionality bits of templates. I'm not too worried about people providing their own subtemplates for parts of the pages that won't have functionality-related bugs.
Earle:
I haven't seen any functionality bugs, only differences in appearance.
There have been several functionality bugs in the templates - some of them are listed in the Changes file.
Kake
On Tue, Dec 02, 2003 at 05:01:11PM +0000, Kate L Pugh wrote:
I think the essence of what we're looking for is some way of reordering
<div>s within the page - using CSS. I have no idea if this is possible. Anyone?
Jerakeen tells me to look into things you can do with relative positioning. I'm currently investigating.
I don't mind moving the design about a bit but I really must have the navbar on the front page somewhere.
It still will be, if you specify the option in your wiki.conf. I just turned that option on for my dev site.
That for me is still a great usability concern with the London site. I think we do have to make sure it's possible to fit both the navbar and the recent changes feed on the front page.
It should be possible. The navbar will have to go where the recent changes feed currently is, though, because consistency is paramount.
There have been several functionality bugs in the templates - some of them are listed in the Changes file.
Oh, OK, guess I missed those.
In summary, I'm investigating further, don't make any moves yet....
Argh!
Kake, I've broken my dev site on un somehow[0] but don't have permissions to look at the error logs. Can you look into it?
Thanks,
E.
[0] Not sure how; was only modifying templates. Runs OK from the command line but generates an error 500 from the browser.
On Tue, Dec 02, 2003 at 06:13:45PM +0000, Earle Martin wrote:
Argh!
Never mind, fixed it. Permissions had changed on the node db for some reason, which is odd since I was nowhere near it at the time.
On Tue, Dec 02, 2003 at 05:01:11PM +0000, Kate L Pugh wrote:
I think the essence of what we're looking for is some way of reordering
<div>s within the page - using CSS. I have no idea if this is possible. Anyone?
Is this what you're looking for?
http://un.earth.li/~earle/cgi-bin/wiki.cgi?Example_Node
Note: looks OK in Mozilla, bad in IE5/Mac. YMMV.
On Tue, Dec 02, 2003 at 05:01:11PM +0000, Kate L Pugh wrote:
I think the essence of what we're looking for is some way of reordering
<div>s within the page - using CSS. I have no idea if this is possible.
On Thu 11 Dec 2003, Earle Martin openguides@downlode.org wrote:
Is this what you're looking for?
This is where I am at the moment: http://the.earth.li/~kake/cgi-bin/tmp3/index.cgi?Test_Page
I've only been able to test it in Firebird and Galeon so far, on which it looks good at various reasonable browser and text sizes. I can play with it on the ibook tomorrow evening. Screenshots welcomed if it looks bad in your browser (either a URL to the list or an attachment to me).
I'm trying to make the navigation bar take up as little vertical space as possible, hence the floating of the search box and edit link.
As you point out, 'position: absolute' does the trick of reordering the top two divs - thanks! Doesn't seem to degrade too brilliantly at very large text sizes though; the "Open Guide to Reading" link gets partially obscured by the navbar. I don't know why that is, since I'm using 'em's for the padding and margins and things rather than 'px', so surely they should scale with the text size?
Another solution I played with was to set the banner to 'display: none', but then I have the problem of providing a 'Home' link somewhere. Perhaps we could add one into the navbar and then people who don't want it can set 'display: none' on that.
One usability point - there shouldn't be an active link to 'Home' on the home page. This is just a small template fix though.
Kake
On Thu, Dec 11, 2003 at 12:55:13PM +0000, Kate L Pugh wrote:
This is where I am at the moment: http://the.earth.li/~kake/cgi-bin/tmp3/index.cgi?Test_Page
It looks a little shonky in IE5/Mac, although that's probably not going to come as news to anyone. Looks great in Mozilla.
http://downlode.org/tmp/kake_tmp3_style_ie5mac.jpg
Go with it, I reckon.
Doesn't seem to degrade too brilliantly at very large text sizes though; the "Open Guide to Reading" link gets partially obscured by the navbar. I don't know why that is, since I'm using 'em's for the padding and margins and things rather than 'px', so surely they should scale with the text size?
Hmm, I see this too. I'm not sure if there's a workaround for it; Mozilla seems to have a limit in how wide it will make the navbar (starts looking dodgy at around 200%).
openguides-dev@lists.openguides.org
-
Earle Martin -
Kate L Pugh