Project Skins

April 2003:

I've done a revamp of the template system. This makes a lot of design things easier, but I've got to convert the old styles and templates. stay tuned.

summary of changes:

templates instead of headers: a template is a full HMTL file, with the same placeholders as templates had, but with also %content% and %footer%
the default site look now has a sidebar – people are always saying it's hard to navigate the site. Well, all users get the sidebar when they arrive, so they can see what's available.
- faster loads: the sidebar is at the end of the HTML document, so page loads should be better than the old sidebar look.
- better use of screen space: actual page content begins much nearer the top of the page.
editable sidebar – the links on Wiki sidebar produce the actual sidebar. go see that page & suggest links!
the old text styles will be imported later

you can rant about it all here

Mychaeel: Very nice. :-)

Sidebar question

ZxAnPhOrIaN: I find that the loading of the sidebar should load first for the following reasons:

For fellow 56kers, it is rather annoying for waiting for the page to load and then click on the link that i wanted to click on the left.
The sidebar loads faster, and allows rapid link opening.
To get rid of annoyance.
For over all appeal to the wiki.

Could you please take that into consideration? (The good news: The edit feature is sooo 1337 )

Tarquin: No, it loads last for exactly the same reasons you gave. What's most important? the page content. so that loads as early as possible. I'm on a 56k too.

ZxAnPhOrIaN: It is a pestilence for people like me who like fast linkage of information. How big is the sidebar, anyway? There should be in the preferences an otion that states if the user wants to load the sidebar first or last. The sidebar should load last by default.

Mychaeel: If you specifically want to click on a link from the sidebar first, load Wiki Sidebar to start with. I completely agree with tarquin that it defeats most of the purpose of this CSS solution to make the sidebar load first anyway.

ZxAnPhOrIaN: Is it possible for an option in the Preferences to allow the user to pick if the sidebar loads first or last? I find it annoying for it to load loat and whenever i press the stop button, i lose the sidebar and that is really bad. Any comments?

ZxAnPhOrIaN: Also, the recent chages loads really slow and the sidebar doesnt load until last, and having that option stated above makes this site more professional.

Tarquin: why are you pressing the stop button before the page is fully loaded? If you've realised you don't want to read this page, hit the "back" button I suppose I could make an alternative sidebar page... but this way round is the better way – read sites on CSS site design: they all say it's more professional to load page content as soon as possible.

ZxAnPhOrIaN: Scenario: I load the Recent Changes Page. I see an edit that I want to see. I stop it. No sidebar!

Tarquin: ... load the page you want to see... and hey presto, that has a sidebar too! If you find RC takes a long time to load – change your preferences to show fewer days. Mine is set to 3

ZxAnPhOrIaN: The sidebar is having problems now.

Problems

Opera 6 windowshade effect

...although it displays some oddities when scrolling with Opera 6; the light-blue background of the sidebar scrolls along (the text stays though), progressively hiding the sidebar, until it would be completely scrolled away – then it reappears

Tarquin: Known bug. I've emailed the css-discuss list to see if anyone knows what the problem is.

Tarquin: found the problem. It is now partially fixed – no more windowshade as long as the logo is not bigger than the sidebar

Tarquin: OK. Two options:

I can fix this for small font-sizes, but it involves fixing the width of the sidebar & the left-margin of the content to 150px. This means very large font sizes will dribble down the sidebar in a column, instead of fluid growth.
the culprit is the overflow:hidden property. I can hide this from opera, but you might get scroll bars.

Your choice, Mych (and other Opera users). Does Op7 have this prob too?

DJPaul: Haven't/can't re-create this in Opera 7.03.

consistency of fonts

Mychaeel: The links at the top, in the sidebar and at the bottom are in Times instead of Arial. Is that on purpose? I think at least the top and bottom links should be Arial too if the rest is.

Tarquin: those are part of the template rather than the content style. But I have a technique to fix that. Fixed The trick is expalined below.

Wormbo: The sidebar still uses Times?

RC & Edit page backgrounds

Mychaeel: The Recent Changes background and the edit page background are darker-blue (like the sidebar) instead of light-blue like the normal pages. I think both should be light-blue.

Tarquin: it's an oversight on my part. Fixed :cool: (though I kinda liked the double border effect in the edit page!!)

Top search field in the sidebar template

Mychaeel: The search field on top doesn't work because the link is broken ("cgi-wiki" instead of "cgi-bin").

Tarquin: fixed. Delete reply when you see it

Sidebar width

Mychaeel: The sidebar should have its minimum width set to the logo's width; my custom local CSS puts the text in Arial 9pt too, and then the logo overlaps the page content.

Tarquin: hmm. Opera 7 problem with overflow:hidden? Take a look in Mozilla: there is some clever CSS trickery that centers the logo no matter what, and allows part of the image to go past the left of the sidebar.

Mychaeel: Actually, the overlapping starts when the first page of content has been scrolled down (when the sidebar magically reappears as well). Before, the logo is clipped – which doesn't look too great either. The sidebar takes its width from somewhere, anyway – maybe making the logo a simple centered image would automatically widen the sidebar to accommodate its width.

Tarquin: position:absolute and fixed won't grow for an element that's too large. the sidebar width is set in ems so it grows & shrinks with the user's font settings. the clipping is ok here: at normal font size I just lose 3-4 pixels off each side of the logo. Hmmm.... I see the problem in Opera. It's a bug on their part – it's forgetting overflow:hidden. not sure what can be done – other than scrap the whole design

The top bar should have a minimum height for similar reasons.

Tarquin:How do I set a minimum dimension, yet also allow it to grow? The top bar height is set in ems, but I don't know how to set a minimum too.

Mychaeel: Using the CSS2 "min-height" attribute.

Quick Navigation

Mychaeel: The purpose of "Quick Navigation" menu is even less obvious than before (then, it at least stood out because it was the only thing in the menu line at the right side); I suggest it gets a small downward triangle to indicate that it's a menu and moves back to the page's title line.

Tarquin:will look into it.

CSS changes break image uploader layout

Mychaeel: The changed CSS breaks the image uploader layout.

Tarquin: Fixed, sort of.

neat tricks

To set template elements from the content sheet, use this:

 body.default h1.pagetitle {

each template gives body a different class – so you can set a content rule to only apply to a specific body

Other stuff

Tarquin: Mych, is the DHTML menu style stuff the same all the time? the "<style type="text/css">#dhtml-menu ..." that's inserted into wiki pages. If so, how about I put it into the structural stylesheet (which I forgot to attach ... off to fix

Mychaeel: There was a distinct reason I had the script include rather than link those CSS styles. I think one of the browsers I tested it with had problems applying the CSS to the menu if it had to be loaded separately.

Old System

You can choose a header and a stylesheet for the site on the Preferences page. At the moment we have:

Headers

Chilled Blue Plain: Original Unreal Wiki Header, default site setting
Chilled Blue Sidebar: groovy floating sidebar with site links. Mozilla & Opera only.
Chilled Blue Sidebar IE: inferior version, it scrolls with the page content (and what's the use of a sidebar that scrolls? If you don't lack this frightful lack of concern for the IE user, either complain to Microsoft about their shoddy implementation on W3C standards, or get a decent browser...)
Chilled Blue Fixed Header: this header stays visible at the top of the browser window when the page is scrolled. Again, IE manages to muck this up.
Dark Blue Centred: matches with the dark blue content styles. Has a groovy CSS effect on the links...

See /Custom Headers for technical stuff.

Styles

Chilled Blue: the original Unreal Wiki stylesheet. Well it had to be called something
Textbook: serif fonts on white background with clean pastel blocks for structure.
Dark: for the people who said the above was too pale
Dark with blocks: chunky headers on a navy background. Not sure I like this one.
Blocks: makes block headers so they stand out more
AquaGenic: designed by The Alien. I'll leave it to him to describe it here...
The TaoFuzzPai: makes headings centred and IN CAPS, especially for two of our veteran BuF controbutors.

Making a custom stylesheet

(some brief notes I'll expand on later)

What follows below is somewhat outdated. if you have a burning itch to create a stylesheet for UnrealWiki, hassle tarquin into updating this page.

Save the /Styles Testbed as an HTML file. Edit it and replace the link to the stylesheet named "styles.something.css" with your own file. Email completed CSS documents to Tarquin for inclusion on the system.

Testbed pages

These should feature all the elements that need to be styled.

/Styles Testbed – now updated! (17 June)
[/Wookee Testbed]? – for the new Wookee markup parser

Do not style:

Body margins
H1
P because the Wiki script currently doesn't make clean P blocks.

Update

The script will be updated this week to create DIV blocks around the wiki page content. This means that header stylesheets will set body margins & padding to zero, and div.wiki can set the padding property to create margins around the content.

I haven't hacked the script that much, so admin pages (note to non-admins: you're really not missing much) are plain white background. If you're styling pale A tags, specialize them as "div.wiki a". (messy, I know... I need to go through the perl and put div.wiki around all pages...)

Use div.wiki to set content margins (with the padding property), background colour, and font settings.
Other divs:
- footer: for the links and search box at the base of each page.
- edit: for the edit page
- rc: recent changes
Class blocks are on their way too. Style the following named div classes:
- Code : for code listings (use whitespace property to preserve formatting, set font, border etc)
- Quote: blockquote
- Zip: a link to a zipfile
- Array: browsers don't yet support the CSS, but style this similarly to Code block
- class: the box that holds the class tree definition
Images are now getting a class instead of the HTML align property. Most images will be img.block. Style this to display:block so it doesn't interfere with text around it.

Mychaeel: Formatting .zip file links somehow special is a very neat idea, but the current formatting doesn't work too well with its technical implementation as a <span> element (see Model Conversion Application). What about the following: Reduce the icon's size to 16x16 pixels and remove the border and background?

Tarquin: That CSS was written with the idea that a zipfile link would be a block element, rather than a link within text. I'll fix it for inline, but I do think some zip links could do to stand out from the body of a page in their own box.

Mychaeel: I've changed that and uploaded a smaller .zip file icon.

Tarquin: The smaller icon is nice, but I'd like to have a zip block that uses the larger icon – maybe just for local zipfiles like example maps.

Mychaeel: Why not – it could be made a paragraph markup in WookeeUnreal.pm: Paragraphs starting with http://\S+\.zip\b could be formatted as such a link (and maybe such starting with [^\s:/]+\.zip\b, which would be interpreted as a file in our download directory).

Tarquin: would it be simpler to subclass blockquote, and have paragraphs of the form > something.zip ?

Mychaeel: Not really; especially since > is really a block in disguise of paragraph markup. But even if it were paragraph markup, creating a direct subclass of Paragraph would be the easiest and most straightforward way to go.

Implement markupParse by means of a regular expression that looks for and parses that http://... at the start of a line, let Paragraph's inherited code handle character markup in what follows, and overwrite result or maybe better just propParaStart/propParaEnd to have your subclass output the HTML for the link. – I'll meet you in #unrealwiki to explain it in more detail if you like.

Mychaeel: Better look at ParagraphUnrealImage in WookeeUnreal.pm – it works very similar to how I figure that .zip link paragraph class to work (except that ParagraphUnrealImage splits into three slightly different subclasses for the three possible image alignments – you don't have to do that).

Mychaeel: I also changed the general font size of the Chilled Blue Plain skin to 9pt. Maybe it's just me, but I think it looks more pleasing to the eye than 10pt. :-)

Tarquin: 9pt looks good. I'll change the zip class on the other stylesheets too.

Mychaeel: What about reviving the idea of allowing people to specify a custom stylesheet location in their preferences?

Tarquin: I'll investigate at some point. But they could just as easily email me their CSS and have it available to all.

Mychaeel: The benefit of a custom CSS file stored somewhere under the user's immediate control is that he/she's able to test and tweak the styles without much hassle. After that, he/she'd might send you the file to put it on the Wiki. Besides, not everybody wants his/her custom styles to be publicly available.

Tarquin: Yup, I realised that shortly after posting my earlier comment. Like TV studios, my brain is on a delay loop... sigh...

Mychaeel: Isn't Chilled Blue the default skin? I thought it was (and I'd prefer it that way), but I'm typing from an installation of Internet Explorer here that has never before been touched by the Bliss That Is Wiki, and hence I'm not logged in. The skin has a white background. – WillySurvive mentioned that it also still has the gray background and the border around .zip file links; that should go, in any case, because they mess up the layout.

Tarquin: yes, is was & it should be. I think I've found the bug & fixed it, but I can't check. Could you confirm?

Ben 2500: I like the side bar its a neat addition.

Sir_Brizz: In this IE6 I'm using atm, the sidebar is loading on the left side down belwo the entire page text.

Ben 2500: I have this problem to with my computer at home with the offline wiki.

Tarquin: Known problem. Fix: get a better browser

Stylesheet order

Fyfe: Can the order the stylesheets are loaded be changed so that /wiki-ext/stylebase.structural.css is loaded before the theme stylesheet is loaded. At the moment I can't change the font-size of the pre.uscript blocks because it's overrided by stylebase.structural.css

Tarquin: Done. It seems so obvious that that is the correct way to do it that I feel there MUST be a reason it was the wrong way. Please be on the lookout for anything that's broken because of this change, and report them here.

Fyfe: You sure you fixed it? I'm still getting (with browser cache cleared)

	<link rel="stylesheet" type="text/css" media="screen"
		href="/wiki-ext/template-classic-masthead.css">
	<link rel="stylesheet" type="text/css" media="screen"
		href="http://www.neptune-one.net/ext/unrealwiki.css">
	<link rel="stylesheet" type="text/css" media="screen"
		href="/wiki-ext/stylebase.structural.css">

Tarquin: Ooops. I only changed it on the default template...

Fyfe: It's working on "Universal Blue Sidebar", but "Classic Blue Masterhead" is still in the wrong order (as above).

Tarquin: Fixed.

Fyfe: Thanks Tarquin

Tarquin: np.