the Fiddler's picture

[Website] Help with site theme redesign

Project:The Open Toolkit library
Version:all versions
Category:support request

Hello all,

I am looking for feedback for a new site theme.

If you have a few moments to spare, please select the "community2" theme in your account settings ("My account" -> "Edit"). Make sure to refresh your browser cache (just press F5) and simply browse the site for a while. You can revert to the previous theme at any time.

Once you have seen the new layout, post your impressions:

  1. How did you find the new layout and color theme? Did you prefer it to the previous one?
  2. Did you encounter any glitches, like misplaced or missing items?
  3. Is the site easy or hard to navigate?
  4. Thoughts on the new frontpage?
  5. Any other suggestions for improvement?

Please post your impressions and make suggestions for improvement. Don't forget to mention your browser and OS if you encounter any glitches!


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
the Fiddler's picture



But the "demo" link is the same as the "OpenTK" link.

For now.


What will the Demo package contain?

It's a secret.


The example runner?

No. ;-)

objarni's picture



I like surprises ;)

zahirtezcan's picture


I have made a quick search on google about "glossy button"s. There is a tool named IconWorkshop which was quite useful for me creating menu icons. The tool has the ability to manipulate transparent images. Please take a look at "Create attractive icons using Image Objects" section on given link. It is a brief description of creating glossy buttons from overlay images.

I guess "div"s can be put as a stack such that div layer zero containing back color, layer 1 containing text, layer 2 containing overlay and layer 3 containing border. So, a glossy button can be "mimic"ed with div layers. I have seen such samples on the net but i have no idea about css .name{} syntax.

I have made 2 overlays (i am neither an expert nor an intermediate on photoshop or gimp just created these in a few minutes for a quick preview) for early stages of frontpage if you accept.

edit: overlay.png is not a plain white or plain transparent image. you can see the effect on colorful backgrounds

base.png49.31 KB
highlightedoverlay.png49.31 KB
overlay.png49.31 KB
the Fiddler's picture


Thanks! I didn't try IconWorkshop specifically, but a few programs/scripts didn't really give satisfying results.

In the end, I spent a couple of hours reading tutorials and playing with the Gimp and I think I've created something acceptable:

You can see them in action on the new frontpage. The basic layers are surprisingly similar to yours, I've just added a metallic border and a few highlights.

I'm not too keen on the colors but thankfully this is trivial to change (suggestions?)

zahirtezcan's picture


geez the buttons look great. The colors could be a bit more similar to the top frame (bluish back color instead of violet and martian sand color instead of brown). Actually buttons' colors look better only if you can change the top frame :P

the Fiddler's picture


Right, I see what you mean. I'll try to tweak the colors to match better.

I've managed to cut down the frontpage size by about 20%-25%, compared to the previous theme. It's still possible is to improve performance by reducing the number of elements in the page but I'm leaving that for last - the colors should be finalized before that.

Two steps left:

  1. Find a way to add screenshots to the frontpage. Even one would suffice - the problem is where to place it without destroying the layout.
  2. Try to fix the frontpage for IE6, IE7 and Fx2. None of those support display: inline-block.
the Fiddler's picture


#2 is now fixed more or less. I've also added a workaround for IE6 not respecting table widths - it's not really possible to get 100% identical layout without proper support but the site looks relatively consistent even on older browsers now.

The theme is now tested and known to work on IE5.5-8, Fx1-3.5, Opera 9.6-10, Chrome 3-4, Safari 4. IE5.5/6 and Fx1/2 have some rendering issues (alpha PNGs and link colors on the former, download buttons on the latter) but otherwise work fine despite their age.

Now all that's left is to find a place to add screenshots to the frontpage and then the theme will be ready to go live.

the Fiddler's picture


Status:in progress» closed

The new theme is now available and set as the default site theme. Thanks to everyone who tested and made suggestions!

If you encounter a bug, please report it as a new issue.

flopoloco's picture


Just a test, based on my new idea

Get the full pack of graphics

opentk-web-header.png78.85 KB
zahirtezcan's picture


This website has some generators that is for free use. Just to keep in mind if we need