Looking for help: Uniformizing the ScummVM webpages

[Mustrum]

Thanks! I tried that on the site, but the tabs don't look quite right... Any idea what might be causing that?

Take these images (no transparent corner):

with background color from content: tab_l.png – tab_r.png

[billwashere]

This is a image of the new wiki layout that i am developing. Right now it has not been converted into a MediaWiki Template and there are a lot of IE bugs.



Any Suggestions/Comments?

[criezy]

That looks good. But I am not convince by the red link for Page, Discussion, View source (or Edit when logged in) and History. Why not keep tabs and make them look like the tabs in the doxygen site? Also the bands on the left and right are too big I think (that's a lot of lost place).

[fingolfin]

Any news on this?

[billwashere]

have added tabs from doxygen.

Now need to convert to mediawiki

IE is making me angry

To help me test the skin before it's submitted i have found a free php server - http://scummvm.comlu.com/index.php/index.php

[billwashere]

Sorry for taking so long.



What colour should the discussion tab be?

The current tab is yellow while the others are red like the doxygen.

[criezy]

What colour should the discussion tab be?

Do you mean the color for the text or the background?

By the way, the different text colours in your image for the discussion tab means there is no discussion. If there was one it would use the same colour as the other tabs (e.g on http://wiki.scummvm.org/index.php/User_Manual). And the red colour for the text might be used for other tabs if they don't have content (e.g. on http://wiki.scummvm.org/index.php?title=MicroProse).

So I suppose your question should be: what colour should be used for tabs that don't have a content?

I see two possible ideas there:
1) use same text color as the other tabs but two different background colours (for current tab without content and other tabs without content).
2) use yellow and red background to identify current tab and other tabs and a different text colour depending if it has a content or not (e.g. white if it has a content and grey otherwise).

I don't know what is the best or what colours should be used. I might try a few things and post again if I have an answer.

[billwashere]

I'm sorry for taking so long, stupid CSS and school but here is a new wiki skin (if you still want it)

A hosted prototype of the skin is http://scummvm.comlu.com/index.php/

A zip of the skin can be found here - http://scummvm.comlu.com/ScummSkin-0.01.zip

I invite all, to test out the site first and tell me what modifications can be made.

Does the real wiki use any extensions which require CSS?

A Few Todo's
Little things known
* Special:Preferences css should be changed to fit more naturally instead of being stolen from orginal skin
* Search in menu is slightly to the right
* Printable still needs to be done

Limitations
* A word cannot be longer than table (just above id container) otherwise it streches, a bug in the orginal design and a flaw in css
* When you click watch tabs are not shown correctly yet when refreshed it is corrected. ajaxwatch.js is not writing the nesscessary <span> element inside while doing it (The tabs were stolen from doxygen).

[criezy]

Does the real wiki use any extensions which require CSS?

The syntax highlighting extension uses the following (to add in the skin):

Code: Select all

/* Syntax highloighting (GeSHi) display */
div.mw-geshi {
    padding: 0.6em; 
    margin: 1em 0; 
    border: 1px solid #bbbbbb;
    background: #fffaf0;
}

Of course this can be modified to fit better the new skin style.
You can see the result on the Code Formatting page (http://wiki.scummvm.org/index.php/Code_ ... onventions) where it is used extensively.

[criezy]

Great job. I like it.
I have a remark though: there are two many links at the top (on the line next to the ScumVM icon) for my laptop screen when I am logged in (i.e. it is wider than the screen and I therefore need to scroll to see the menu on the right). Maybe the links could be on two lines e.g. the links not related to wiki on a single line (as for the doxygen web site) and the wiki links (Log in / Log out / My Talsk / My Preferences ...) just above or below aligned to the right of the page.

Also there is a problem with the separator in the menu (the red background is missing):

The code for it is:

Code: Select all

<div class='menugroup' id='p-Users'>
	<h1 class="menu-main">Users</h1>
	<div class='pBody'>
		<ul>
			<li><a href="/index.php/Main_Page"><b>Main Page</b></a></li>
			<li><a href="/index.php/Documentation"><b>Documentation</b></a></li>
		</ul>
		<hr>
		<ul>
			<li><a href="/index.php/About">About ScummVM</a></li>
			<li><a href="/index.php/User_Manual">User Manual</a></li>
			<li><a href="/index.php/Datafiles">Game data files</a></li>
			<li><a href="/index.php/Engines">Game Engines</a></li>
			<li><a href="/index.php/Platforms">Platforms</a></li>
			<li><a href="/index.php/Glossary">Glossary</a></li>
		</ul>
	</div>
</div>

I have added the skin to our official wiki for those who want to try it there. This is not the default for the moment, so anyone wanting to use it needs a wiki account and to change the skin in his preferences. I slightly modified the skin to be called ScummModern and to have the css block mentioned in my post just above (for syntax highlighting).

[billwashere]

http://scummvm.comlu.com/ScummModern-0.02.zip

* Top Right links now use two lines
* Name is now ScummModern
* syntax highlighting extension just uses old css
* fixed [ SeparatorSidebar] css[/url]

[fingolfin]

Hi there,

thanks for working on this!

Indeed, the top line is too cluttered. For now, the simples solution would be to remove all (or most of) the links "Forums - Contact us - Buy Supported Games BuildBot - Doxygen - Planet ".

We could try using two lines for this, though I am not sure how well that would work, it would require increasing the height of that part of the layout.
On the long run if the forums, buildbot, wiki & planet pages should be using the "same" style and ideally, the exact same CSS file, and a similar HTML code structure for elements in them. E.g. forum posts and planet news posts and main website news posts could be made to share a similar style...
(By the way, DJWillis is working on a new style for the planet, I am curious how that will turn out).

This alignment of style should also cover the links at the very top; i.e. the links to each of the various ScummVM sites. But that line must also contain site specific links. If we had two rows of links, then that would be easy to achieve. On the other hand, another line might clutter the layout too much. If we have that many links, maybe we should re-evaluate whether we really need them all there.

So we may need some brainstorming...
Here are some wild ideas: Use some CSS + Javascript to make a pull-down menu for the links to other ScummVM websites. Not sure whether I really like that idea, though.

Or maybe we should banish the various links to the other ScummVM sites to the bottom of the page? Or to yet another place?


By the way, the overlong list of links also makes the layout too wide, so that for me, the navigation bar on the right is always invisible unless I scroll horizontally. Not good. Yet another reason to split it into two lines / remove some of the links there / whatever .

[fingolfin]

BTW, while on this thread, I would like to point out that we are also interested in a conversion of our Forum theme, which is for phpBB 2, to a phpBB 3 theme. Which is a radically different thing, as I understand, and essentially amounts to creating a complete new theme!

[fingolfin]

Two more things: Please use PNG and not GIF where possible (only reason to use GIF is for animated symbols, which in turn I think should be avoided except in very specific cases . I just converted our buildbot to use PNGs, too.

The other thing is a question about your ScummModern.php: Why does it define the whole HTML content twice, once in a method execute() and once in a method header() ? Not that I have any clue about MediaWiki themes, maybe there are good reasons for this, but I noticed that MonoBook.php only does this once, in execute() -- and has no function header().

[fingolfin]

I applied billwashere's changes to the online Wiki (you can try the alternate skin by changing your user preferences).

I am still not happy with the top navigation. Here is a concept of something that is a bit more like what I imagine. I hacked it up by modifying the actual HTML a bit. Well, it's still far from ideal, but closer than what we have now, IMHO.
.