Redesign

[Mr. Krystal]

SFO was the second site I ever built on Wordpress. There have been some significant updates to CSS and Wordpress theory since then. I mean, the design we have now was supposed to be temporary until someone made us a banner. Anyway, I've been tinkering with ideas. Here's the concept I've come up with so far. It's fairly simple and to the point, but looks pretty nice. The only real problem with creating it is that it WILL look different in IE 6. I'll have to make a special stylesheet for it, and it won't look very good in comparison. Yes, that background does repeat. I still haven't gotten around to styling the content areas, so ignore those parts. Focus on the header/layout design.

What do you think?

[evilwaffles]

No complaints here. I prefer the whole color scheme more than the red, gray and black. IMO it gives the site a more of a Space type feeling to the viewers.

[Kursed]

I use the Krystl archive skin but if this is for the main page nice.

Either way nice work.

[DZComposer]

I think the top menu is too big. The eyes are immediately drawn to that instead of the site content.

Is that the final color scheme, or are you going to change it?

I ask because I will end up having to change the forum theme.

[Star Fox Runner]

YAY!!! Its the banner I made!

I agree with DZ on the top menu, it's too big, it would be alright if you were to scale it down a bit. I personally don't like the starry background, the stars are too clumped together, if they were spaced out a little bit, it would look a little better.

I like the blue and white color scheme, it more fits the Star Fox team. Our current red and black scheme matches Star Wolf more.

[DZComposer]

Slightly OT, but as you may have noticed due to the theme change, I am making a major forum upgrade today. Details in announcements board.

[Braux]

Huh... this is what happend, I got on eariler today and couldn't...

[DZComposer]

Forum software upgrade.

This thread is about a main site redesign.

[Mr. Krystal]

The idea is to advertise major sections of the site as "explanation button links". I agree, they could be smaller, but don't worry about them being too distracting, they will be the transparent black until you hover over them. Then they will be grey. You have to click them to make them blue.

I'm also thinking I can make the menus and posts themselves change color to highlight them when reading them.

Making the star field more sparse will take some time.

Update

Try this: Redesign Mark 2

Here's what's up with the colors:

The top buttons turn grey when you hover over them.

The top buttons turn blue when you click them.

The post color turns blue when you hover over them.

The stars appear next to the sub-navigation area you are hovering over.

[Falcory]

SFO was the second site I ever built on Wordpress. There have been some significant updates to CSS and Wordpress theory since then. I mean, the design we have now was supposed to be temporary until someone made us a banner. Anyway, I've been tinkering with ideas. Here's the concept I've come up with so far. It's fairly simple and to the point, but looks pretty nice. The only real problem with creating it is that it WILL look different in IE 6. I'll have to make a special stylesheet for it, and it won't look very good in comparison. Yes, that background does repeat. I still haven't gotten around to styling the content areas, so ignore those parts. Focus on the header/layout design.

What do you think?

I like it.  :x

[Guest Julius Quasar]

  Here's the concept

What do you think?

...sweet! :x

[Star Fox Runner]

The idea is to advertise major sections of the site as "explanation button links". I agree, they could be smaller, but don't worry about them being too distracting, they will be the transparent black until you hover over them. Then they will be grey. You have to click them to make them blue.

I'm also thinking I can make the menus and posts themselves change color to highlight them when reading them.

Making the star field more sparse will take some time.

Update

Try this: Redesign Mark 2

Here's what's up with the colors:

The top buttons turn grey when you hover over them.

The top buttons turn blue when you click them.

The post color turns blue when you hover over them.

The stars appear next to the sub-navigation area you are hovering over.

That looks much better, and the interactivity is a nice touch.  :x

[Mr. Krystal]

I've implemented most of the ideas I proposed in actual HTML and CSS. Interestingly enough, the internet believes what I did with the Arwing's wing that goes off the edge is impossible! I just invented a new CSS technique. As you can see, you can resize the window so that the wing goes off the edge without causing a scroll bar. I didn't test it on IE 6, 7, or 8, but it is probably broken on them.

It does work on Safari, Firefox, and Opera. Try it out. Let me know if you find any errors, and what browser you were using.

http://files.krystalarchive.com/hosted/temp/sfo2/index.html

[GammaRay256]

I've implemented most of the ideas I proposed in actual HTML and CSS. Interestingly enough, the internet believes what I did with the Arwing's wing that goes off the edge is impossible! I just invented a new CSS technique. As you can see, you can resize the window so that the wing goes off the edge without causing a scroll bar. I didn't test it on IE 6, 7, or 8, but it is probably broken on them.

It does work on Safari, Firefox, and Opera. Try it out. Let me know if you find any errors, and what browser you were using.

http://files.krystalarchive.com/hosted/temp/sfo2/index.html

Ah, background images with CSS... I've used a similar technique before to prevent scrollbars.

The transparent PNGs used to create the Arwing and logo are a bit large... nearly 300kb together, but that shouldn't be too much of a problem, and you'll probably fix that in the final version anyways...

Looks great, I love the stars in the background.  The logo and the Arwing look very nice.

I have no problems displaying it.  (Firefox 3.0.11 on Linux).

Also works in Google Chrome in Linux.  In addition, it also looks better than the current site in xlinks2.

Is this going to be implemented soon?  It's been several weeks since the last post on this thread...

[Mr. Krystal]

Ah, background images with CSS... I've used a similar technique before to prevent scrollbars.

The transparent PNGs used to create the Arwing and logo are a bit large... nearly 300kb together, but that shouldn't be too much of a problem, and you'll probably fix that in the final version anyways...

Looks great, I love the stars in the background.  The logo and the Arwing look very nice.

I have no problems displaying it.  (Firefox 3.0.11 on Linux).

Also works in Google Chrome in Linux.  In addition, it also looks better than the current site in xlinks2.

Is this going to be implemented soon?  It's been several weeks since the last post on this thread...

I'm working on it. The header image can't get much smaller, unfortunately. They are large and complicated. The good news is that once loaded, they will be cached.

[GammaRay256]

Here's my attempt to make the header file sizes smaller.  I managed to get the logo down to 60kb, so the whole page should load in ~100kb.

http://silverlinux.net/sfo/

Screenshot on my display resolution:

http://silverlinux.net/sfo/screenshot.png

Download files:

http://silverlinux.net/sfo/sfo.7z

I changed the header into a single JPG with a background.  The only potential issue with this is that on the left side, the backgrounds might not match exactly.  On *most* window sizes, it's hardly noticeable.  (On my display, 1280x800, I can only see it because I know it's there; see the screenshot).  It's fixable, but I didn't go that far.

300kb on the original isn't bad, especially since most people have high speed connections now.  So my version is probably useless anyways.  I just thought I'd give it a try.

Works in Firefox 3, 3.5, Safari, and Opera.  Sadly, it does not work in IE6 (and probably not in IE7 either).

No scrollbars in any browser, the "overflow:hidden;" property under "#wrapper" prevents that I believe.

[Mr. Krystal]

Here's my attempt to make the header file sizes smaller.  I managed to get the logo down to 60kb, so the whole page should load in ~100kb.

http://silverlinux.net/sfo/

Screenshot on my display resolution:

http://silverlinux.net/sfo/screenshot.png

Download files:

http://silverlinux.net/sfo/sfo.7z

I changed the header into a single JPG with a background.  The only potential issue with this is that on the left side, the backgrounds might not match exactly.  On *most* window sizes, it's hardly noticeable.  (On my display, 1280x800, I can only see it because I know it's there; see the screenshot).  It's fixable, but I didn't go that far.

300kb on the original isn't bad, especially since most people have high speed connections now.  So my version is probably useless anyways.  I just thought I'd give it a try.

Works in Firefox 3, 3.5, Safari, and Opera.  Sadly, it does not work in IE6 (and probably not in IE7 either).

No scrollbars in any browser, the "overflow:hidden;" property under "#wrapper" prevents that I believe.

Well sure, if you use JPG. I did the whole design with full quality imagery. As you realized, the star patters might not match up without alpha transparency.

I uploaded a new version just now that has a lot of additional styles and is closer to the final design. Let me know how you like the footer.

Yes, PNG doesn't work in IE6. I created a special setup to work with IE6, but I accidentally deleted it just now with that upload. It shouldn't be hard to readd though.

[GammaRay256]

I uploaded a new version just now that has a lot of additional styles and is closer to the final design. Let me know how you like the footer.

It's looking great.  This is one of the finest templates I've ever seen.

The footer looks good, the transparency is nice.  Perhaps, you could add the same blue horizontal separator on the top of the footer that you used on the bottom of topNav (see the attached screenshot).  I'm not sure, though, it may stand out a bit too much.

Also, the underline on the links seems to have a bit too much spacing (see the other screenshot).

Perhaps, instead of using "border-bottom" for underlines, it could simply be changed back to "text-decoration:underline;"

.content a:hover
{
	/* border-bottom:1px solid #2274c7; */
	text-decoration:underline;
}
.content a:visited
{
	/* border-bottom:1px solid #777; */
	text-decoration:underline;
	color:#777;
}

Problem is, plain CSS underlines don't allow for fancy stuff like dotted underlines.  Is that why you had it that way in the first place?  So that, in the future, special underlines could be possible?

Keep up the good work, it's going to be awesome!

[Pruned to save disk space]

[Mr. Krystal]

Problem is, plain CSS underlines don't allow for fancy stuff like dotted underlines.  Is that why you had it that way in the first place?  So that, in the future, special underlines could be possible?

Actually, the codebase of this template is based off of my design work for the Krystal Archive 3.5. It features the very latest practices with CSS. In fact, on another website I made using it as a codebase, I don't even have an IE6 hack stylesheet, because I don't need it. People have figured out universal CSS rules that go back that far after all.

As for the underlines, it's intentional. Not so I can have stylized underlines, but because it's more when you use plain underlines, you get a cross-out effect on letters that have a lower hang (don't remember the specific term).

For example:

quipped grape jelly

and now with underlines

quipped grape jelly

You see? It blocks the lower hanging parts of some letters. This is a typography error. A border underline doesn't do that, but I obviously need to do some adjusting to the padding and line-height to make it seem more natural. Look at the Krystal Archive. It uses border underlines.

[GammaRay256]

You see? It blocks the lower hanging parts of some letters. This is a typography error. A border underline doesn't do that, but I obviously need to do some adjusting to the padding and line-height to make it seem more natural. Look at the Krystal Archive. It uses border underlines.

Ah, I didn't know that, thanks for the info!  I guess I never noticed it on the Krystal Archive because of the line spacing.

In fact, on another website I made using it as a codebase, I don't even have an IE6 hack stylesheet, because I don't need it. People have figured out universal CSS rules that go back that far after all.

Nice That's hard to do!

[Mr. Krystal]

UPDATE!

I spent most of yesterday restyling everything so it would work with IE6 and IE7. The site should look and work identically, except for IE6's known issues with widths, transparency, and padding (the padding problem in the search bar also applies to IE7). I'd appreciate it if someone could test the new version on IE8 and take pictures of any problems. I've tested it on Safari, Firefox, Opera, Chrome, IE6, and IE7. It's remarkably consistent.

http://files.krystalarchive.com/hosted/temp/sfo3/

If you find any problems, have suggestions, or just want something changed, please reply! Once this is turned into a theme, it'll be hard to change anything.

[DZComposer]

I don't see any obvious issues in IE8.

I do notice one thing that is consistent across Firefox, Opera, and IE: Visited links are underlined, while unvisited are not unless hover.

I must say, this design and the Sargasso forum theme look really nice together.

[Star Fox Runner]

I'll say it looks good, this new design makes the current one seem dark and depressing.

[Guest Julius Quasar]

UPDATE!

I spent most of yesterday restyling everything so it would work with IE6 and IE7. The site should look and work identically, except for IE6's known issues with widths, transparency, and padding (the padding problem in the search bar also applies to IE7). I'd appreciate it if someone could test the new version on IE8 and take pictures of any problems. I've tested it on Safari, Firefox, Opera, Chrome, IE6, and IE7. It's remarkably consistent.

http://files.krystalarchive.com/hosted/temp/sfo3/

If you find any problems, have suggestions, or just want something changed, please reply! Once this is turned into a theme, it'll be hard to change anything.

mmmm, not bad! :yes:

[Guest Brittsta113]

ohh I like both =)