Looking for help: Uniformizing the ScummVM webpages

billwashere · Post by **billwashere** » Thu Nov 25, 2010 5:23 am

* logo linked to the Wiki front page.
* nav boxes background change
* fixed thumbnails

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

I have had no time to redo the tabs.

billwashere · Post by **billwashere** » Fri Nov 26, 2010 1:46 pm

Sometimes the forum/wiki design breaks if there is too many characters expanding the table. These should fix the forum by limiting the maximum width of an image, make sure the logo in the top left only takes up the size of the image and make sure the width of a table stays inside. This should fix all the problems that occur in pages like http://forums.scummvm.org/viewtopic.php ... c&start=15

/forum/trunk/SVMDesign/overall_header.tpl

Code: Select all

29c29
<     <td><img src="templates/SVMDesign/images/logo_phpVB2.gif" width="199" height="65" alt="ScummVM logo"></td>
---
>     <td width="199"><img src="templates/SVMDesign/images/logo_phpVB2.gif" width="199" height="65" alt="ScummVM logo"></td>
70c70
<     <td colspan="4">
---
>     <td colspan="4" style="max-width&#58; 750px">

/forum/trunk/SVMDesign/SVMDesign.css

Code: Select all

148a149,150
> 
> img 			 &#123; max-width&#58; 900px; &#125; /* This will limit how wide an img tag can be so it doesn't spoil the theme. */

fingolfin · Post by **fingolfin** » Fri Nov 26, 2010 7:16 pm

billwashere wrote:Sometimes the forum/wiki design breaks if there is too many characters expanding the table. These should fix the forum by limiting the maximum width of an image, make sure the logo in the top left only takes up the size of the image and make sure the width of a table stays inside. This should fix all the problems that occur in pages like http://forums.scummvm.org/viewtopic.php ... c&start=15

I actually see no problem on that page, it looks just fine for me in FireFox... Maybe you can describe problem you are seeing, post a screenshot, and tell us which browser it occurs in?

billwashere · Post by **billwashere** » Fri Nov 26, 2010 11:03 pm

Chromium (7.0.517.44 (64615) Ubuntu 10.04)

The top left and top right are out of line.

My bad, This seams to be a chromium bug as Opera 10.63 (Build 6450 ) - Linux and Firefox 3.6.12 renders it perfect as well. I should try to find a different solution as it doesn't really fix but limits the width.

Raziel · Post by **Raziel** » Sat Nov 27, 2010 7:15 pm

I get the same problem in OWB (Webkit based)
but i get it even on this forum and for a long time.
It doesn't hurt so it doesn't matter

md5 · Post by **md5** » Sun Dec 05, 2010 2:17 pm

Also, in the wiki, there's an odd footnote in all pages. E.g. in the front page, there's this:

Retrieved from "http://wiki.scummvm.org/index.php/Main_Page"

billwashere · Post by **billwashere** » Tue Dec 07, 2010 2:10 am

This is a mock of the new tab design.

Should the tabs be split up, like wikipedia's vector skin?
(I like this way)

Should the Search Bar be included like the vector skin?

fingolfin · Post by **fingolfin** » Tue Dec 07, 2010 12:36 pm

bill, very nice, a definite improvement over the current tabs (and might be interesting to have this in the doxygen skin, too. Once the design is finalized, I mean).

As it is, I am not quite happy with how the "Edit", "History" etc. tabs fuse completely together.

While I personally have no strong preference regarding split or non-split tabs, I *do* like to have some visual separation between tabs. That could be a gap, but it could also be an alteration in shading (say an embossing effect) or a thick border). Google Image search makes it easy to find many examples. E.g. this page might give some inspiration for tab designs: http://deluxe-tabs.com/templates/

I am totally open regarding the search bar. If you can make mockups / versions either way for comparison, that might help; otherwise, at least from my point of view, just pick one and focus on making it look good

.

Post by **criezy** » Tue Dec 07, 2010 1:21 pm

Personnaly I like the split tabs. I also agree with Fingolfin regarding the visual separation of the tabs. On that topic Eugene noted in another thread (see here) that ScummVM does not draw the tabs correctly now following a change in the Theme Engine. In that thread he also posted a picture of how it looked before that change and you can clearly see that the tabs have a clear visual separation compared to how they look now.

fingolfin · Post by **fingolfin** » Tue Feb 08, 2011 11:43 am

billwashere, any news on this? I really liked your mockup, and it would be very cool to finalize the Wiki theme and enable it for everybody by default. I have been using the current version as my default Wiki theme for some time now. The tabs are really the only thing I'd like to see improved ; everything else is minor, I think.

billwashere · Post by **billwashere** » Sun Feb 13, 2011 11:37 am

sorry about the long wait, a bit busy over xmas and has finely settled down.

Is a print screen of the tabs
issue:
not working in ie
no border on the left side of the tab

md5 · Post by **md5** » Mon Feb 14, 2011 3:56 pm

billwashere wrote:sorry about the long wait, a bit busy over xmas and has finely settled down.

Is a print screen of the tabs
issue:
not working in ie
no border on the left side of the tab

Which version of IE are you referring to? What kind of bug are you experiencing?

Could you show the (CSS/HTML) code you used for this? People might be able to find the issue (e.g. personally, I have experience in fixing CSS bugs in web page designs I make, as IE can be a pain with CSS). Luckily, IE9 is supposed to have a better support of CSS layouts, so it should behave well...

billwashere · Post by **billwashere** » Tue Feb 15, 2011 1:23 am

New skin is here - http://scummvm.comlu.com/ScummModern-0.06.zip

this is a screenshot of ie6 in a vm

clone2727 · Post by **clone2727** » Tue Feb 15, 2011 2:10 am

billwashere wrote:this is a screenshot of ie6 in a vm

I'm not sure about everyone else, but why would we still want to support IE6? There's already been two iterations of IE since then, both of which are much improved over IE6...

md5 · Post by **md5** » Tue Feb 15, 2011 10:35 am

I did a quick test, and with the following change in ie6.css, I fixed the issues I had in IE6:

Code: Select all

DIV.tabs A &#123;
	padding-bottom   &#58; 0px;
	padding-top      &#58; 0px;
	text-decoration  &#58; none !important;
	font-size        &#58; x-small !important;
	cursor           &#58; pointer;
&#125;

I couldn't reproduce the float issue you're showing in the picture, but I used the HTML that's already on the server with your CSS... It seems like a float drop, so I suppose you're setting a large width of the tab container? Try setting it 1-2% smaller, IE has issues with width - it adds extra margins, thereby causing float drops (which is why a 1-2% smaller width prevents these).

Check here:
http://www.positioniseverything.net/exp ... argin.html

Perhaps it could also be one of these two IE bugs?
http://www.positioniseverything.net/exp ... ndent.html
http://www.positioniseverything.net/exp ... oxbug.html

As a side note, you're missing tab_b.png (defined in DIV.tabs)