Want to take part in these discussions? Sign in if you have an account, or apply for one below
Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.
I've started work at the zen garden (doriath). Stage one is to add customisable tags to all the pieces that we can reasonably adjust in the CSS. At the moment, these are all in red to make it easy to see them and to see if I've done it right - I ran it through a script to add tags to everything and I know that it got confused once or twice so there's a bit of manual work to do. Once I'm happy with that, I'll put up a sample along the lines of what Toby was thinking: having the CSS declarations in separate pages that can be "swapped in" with a minimum effort. Then people can copy that and see what the Zen Garden looks like with their changes. I'll try to make the sample so that it's really easy to change things so that those without and CSS knowledge can still have a go.
Thanks. That's great that you are looking into this.
No worries. I'm hoping that even you will be able to mess around with the CSS when I'm done!
I think I've fixed the obvious things that my script missed out. I haven't "tagged" the list elements yet, though.
When editing this page, if you do it in an editor please make sure that you disable line wrap. It can seriously mess up the tags if they get broken across lines.
(Once this stage is done, the only reason to edit this page should be to swap in one CSS for another, so hopefully the line wrap problem won't matter)
Hi Zoran,
The term "Zen Garden" is an oblique reference to a website called the "CSS Zen Garden". It's a website designed to show just what can be done with CSS. The HTML code on that page is fixed, but people can upload different CSS files and make it look radically different. It's quite amazing what can be done. Anyway, when Urs started wondering out loud if it was possible to improve the look of the n-lab, the obvious thing to do was to set up a place where people can play with different looks without disturbing the rest of the lab. So on the "doriath" web (which is really just a glorified sandbox), Toby copied over a fairly substantive page from the n-lab so that we could play around with the CSS to see if we can make it look nicer than it does.
Although messing around with the CSS can feel like not very serious, the look of a page can drastically change its readability, and thus the likelihood that people will read and use the n-lab. If it's not something that really bothers you, then just ignore it. When we find a look that we like, we'll ask for feedback before changing anything on the lab itself. Indeed, I suspect that we'll find several looks that we like.
On the specific issue of printing, you should select the "Print" view from the bottom of the page before sending it to the printer. Then the icon is the correct size.
(I agree that it should work from the usual view as well, and that's on my TODO list to fix, but in the meantime the above should fix it.)
I also agree that when searching for a good "look" for the n-lab, we should be sure that it doesn't just look nice in one person's browser on one computer. Thanks for the reminder.
Not me, that was Jacques.
I've been using Instiki for a course and have seen several students print out the wrong version. It's quite easy to spot, even from the front of the lecture hall, that the first page of what they've printed is a huge splodge!
Tip: In most browsers on most operating systems, hit Alt-Shift-P while the focus is in the page to go to the printable page. (So you don't have to scroll down to find the link.)
I added some stuff about printing to HowTo.
So … we're supposed to look at zen garden (doriath) and see if everything there that reasonably ought to have CSS applied is appropriately marked?
Then when we agree on that, people should feel free to design CSS for it?
Actually, it's always the way that the first method is the wrong one. I need to read a bit about CSS to see if I've done the zen garden all wrong. The problem is that I've tagged everything that one could reasonably imagine adding CSS to, but CSS is inheritable whereas I don't think that the maruku method of adding CSS to stuff is. I might still be able to rescue it, though.
Wait until I have a template before messing around. I'll try to fix it tomorrow.
The zen garden (doriath) is now suitable for messing around with. I've written instructions on that page. Hopefully, it'll be fairly easy to play with. I've put up three basic styles to use as templates. I should emphasise that I'm not suggesting any of them as reasonable!
I see a command, right at the beginning, that sets the color of a sidebar. But this doesn't seem to produce the solid vertical colored bar on the left margin that I am looking for.
Ah, that's because the 'sidebarGarden' is what controls the bit that used to be the main table of contents. To put a sidebar as you want, you need to put in a border to the main text ('bodyGarden').
These tags affect blocks of text, either "big blocks" (like lists, theorems, proofs) or "little chunks" (like links, bold text, headers). So to put a sidebar in you have to think what block of text you want the sidebar next to and add it to that (the CSS to look at is "border", "margin", and "padding").
A few useful links:
In poking around, I've discovered that Instiki sanitises inline CSS which restricts a lot of what we could do this way. The list of allowed properties is:
azimuth background-color
border-bottom-color border-collapse border-color border-left-color
border-right-color border-top-color clear color cursor direction
display elevation float font font-family font-size font-style
font-variant font-weight height letter-spacing line-height overflow
pause pause-after pause-before pitch pitch-range richness speak
speak-header speak-numeral speak-punctuation speech-rate stress
text-align text-decoration text-indent unicode-bidi vertical-align
voice-family volume white-space width
There's also something called 'CSS keywords' which I haven't fully grokked yet. The allowed list of these is:
auto aqua black block blue bold both bottom
brown center collapse dashed dotted fuchsia gray green !important
italic left lime maroon medium none navy normal nowrap olive pointer
purple red right solid silver teal top transparent underline white
yellow
Some of these are related to accessibility so that cuts things down further. However, it's important to note that these restrictions are merely for per-page style changes. If we found a look that we really liked and wanted to install it globally, we would be able to use the full power of CSS to do so. So if, in reading about CSS, you find something that you think would be great but is not allowed by this list, we can install it in the main CSS. Indeed, I can do so in such a way that you could test it in the Zen Garden.
<div>
<blockquote>
So if, in reading about CSS, you find something that you think would be great but is not allowed by this list, we can install it in the main CSS. Indeed, I can do so in such a way that you could test it in the Zen Garden.
</blockquote>
<p>Okay, so is it possible, just for testing purposes, to steal the CSS from the <a href="http://eom.springer.de/">Encyclopedia of Mathematics</a> and put it into our Zen-garden?</p>
</div>
Cut-and-paste or drag-and-drop won't work, but I'll see how much of their "look" I can figure out. I've managed to get the blue line down the side (see my lastest edit)! I'll look at it tomorrow.
Hah, neat!
I am gonna try this out on Simon...
That's certainly one way to show style suggestions, with Stylish styles. A little more work for people to test them out, however.
@Daniel: using the stylish add-on is certainly a good way for a single user to make the n-lab look how they want it to. We should probably have a directory of "themes" so that if someone has the stylish add-on then they see what other people have done and, maybe, choose one of those. However, the task for the zen garden is to make the default look of the n-lab something that is nice to look at and helps with reading the pages. It's already a hurdle that people are required to install some fonts, we don't want to add to that unnecessarily.
Although the method we're using for experimenting is limited, we can do more. It's just that, for security reasons, anything that Joe Public can do is passed through a strict sanitiser and that strips out a lot of what would be useful CSS stuff. However, those with access to the main stylesheet can do more so if there's something that you think would be particularly good but can't be done with these abilities, let me know and I'll figure out some way to do it via the main stylesheet.
In the meantime, I'll take a look at your theme.
@Daniel: I like your style! It looks as though you were trying to recreate it in the Zen Garden. If it really is restrictive to use the wiki software, I guess I could easily clone a page and make a separate location for people to upload stylesheets to try them out. Hmm.
Right, I've decided that I loathe this method of experimenting. It doesn't work properly, revisions don't update according to revisions of other pages so once there's a new version you can't easily work on an old CSS. Bleugh.
So I've done what I should have done from the start: set up the Zen Garden itself but with a page from the n-lab. I've used the same page and to get things started I've installed four stylesheets: none, the current n-lab one, Bruce's Stylish theme, and Daniel's Stylish theme. You can have a look at:
http://www.math.ntnu.no/~stacey/HowDidIDoThat/nLab/zen_garden.html
Unfortunately, you now have to email me if you want to show off your amazing design skills to the world. You don't have to do that merely to experiment, of course, since you can easily download the files and mess around with them yourself. Simply save the web page somewhere suitable and add your own CSS file (note that there are a couple of things done via javascript so life's not quite as simple as we might like, but it's a lot easier than the method via instiki).
Very nice.
We should have a competition for the best CSS layout.
And maybe by the way we are getting closer to solving the bug with the print output of the nLab: on most systems (if not at all) printing an nLab page makes a huge page-full copy of our little green icon appear on the entire first page.
(I found that very entertaining the first time I saw it, but it is maybe not the intended behaviour).
The same output I see now is produced by your bare version.
(See Toby's remarks about printing earlier in this discussion)
That describes the workaround. But was it clear to you what the cause of the problem is? All I meant to point out that whatever it is, it is probably the same as the that occuring with the "bare" CSS view.
It isn't, technically, a workaround. Technically, using the 'print' view is the Right Way to print pages from the n-lab. However, there's always the Right Way and the Way Things Are Done and that is to print what's on the screen rather than go looking for a special 'print' view.
But I agree that it should Just Work. So changing the logo size would be a good thing to do. Actually, I'm in favour of the n-lab having it's own logo - at the moment, the logo on the pages is the default instiki logo and the favicon is the n-cafe one! However, it's not a high priority at the moment.
While using the Print view is the Right Way for the user to print a page, the Right Way for the Lab (or any website) to prepare a way for printing is to use CSS that includes all of the changes that we want to make for a printed page and applies them only when the page is being printed. But that is tricky while we're still working on the normal CSS!
In the meantime, if we rearrange the headline and footline links, then it will at least be easier for people to see the current Right Way to print.
1 to 29 of 29