A Fresh Coat of Paint

Section: 

You probably notice a few updates to the site today. We wanted to do more to promote the awesome writing our staff produce here, which kicked off a bunch of layout tweaks. Here are the patch notes, for lack of a better term:

- The top area of the site now showcases the latest "feature" articles and rotates some classics into the mix in case folks missed them.

- The main page and article areas are now running at a fixed 1024 pixel width to save us the nightmare of trying to make things look nice at the old variable width style. This is going to give us more flexibility as we tweak the site.

- The forums have been left as a variable width, because it just works better that way. We've also changed it so the first post of a thread doesn't show up at the top of each page, but it's still easy to refer to it if needed.

- Secret back end updates have also been made and some small changes to the front page article layouts. I'd like to wish fond farewell to the article category icon; enjoy your imitation Rolex watch and fruit basket as you step into retirement.

That's all for now! If you find any bugs, let us know in the comments.

Comments

Edwin wrote:

How do you install that in Chrome?

Here you go. Make sure you name the script fileName.user.js

Hey it worked. Neato. Thanks guys.

Lucan wrote:

I wrote a Grease Monkey script.

Works great in Chrome. I looked briefly at whipping one up for the fixed width issue yesterday but don't have anything done yet.

[Edit] This isn't perfect, but it does unlock the full width on the constrained pages. There's a redraw as the script gets applied though.

// ==UserScript==
// @name Free the width
// @namespace Liquidmantis
// @description Removes the 1024px width restriction. May break page layout in the future.
// @author Liquidmantis (Code bastardized from Coldforged's Sear Eyes Less script)
// @homepage Foo
// @include http://www.gamerswithjobs.com*
// ==/UserScript==
(function() {
var css = "#navigation{margin-left:250px;margin-right:50px;min-width:600px;width:auto;}#page{margin: 0 10px;min-width:950px;width:auto;}";
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
heads[0].appendChild(node);
}
})();

Thanks to Coldforged as I used his Sear Eyes Less script as my framework as I don't know javascript.

[Edit2] Updated the script as the navigation bar wasn't stretching to match the forums.

I made an update to my script to fix the navigation bar. Let me know if you see an idiosyncrasies. I'm mainly doing this for the exercise anyway.

LiquidMantis wrote:

I made an update to my script to fix the navigation bar. Let me know if you see an idiosyncrasies. I'm mainly doing this for the exercise anyway.

Works fine so far! Cheers.

I like a smaller page so I dropped the minimum size. But the top bar uses a spacer.

I moded your script to go for a minimum of 650 and take out the spacer.

// ==UserScript==
// @name Free the width
// @namespace Liquidmantis
// @description Removes the 1024px width restriction with a 650 minimum. May break page layout in the future.
// @author Liquidmantis, Lucan (Code bastardized from Coldforged's Sear Eyes Less script)
// @include http://www.gamerswithjobs.com*
// ==/UserScript==

//Overide the fixed width with a minimum width of 650
var css = "#navigation{margin-left:210px;margin-right:10px;min-width:300px;width:auto;}#page{margin: 0px 5px;min-width:650px;width:auto;}";
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
heads[0].appendChild(node);
}
//Clear out the spacer
var squeeze = document.getElementById("squeeze");
var spacer = squeeze.childNodes[1];
squeeze.removeChild(spacer);

edit:

Made a bit more space for the nav bar. Still trying to get the right margin to be smaller.

The whole website is centered for me. I am guessing this is a mistake..

I'm getting the same thing.

Seems like it coincided with the inclussion of Impulse button

Should be ok now. My bad!

All good!

EDIT: Removed comment on centered text

Also, I've not commented yet, but even after a week, the top bar does nothing but bug me. I really liked the low graphics presentation of GWJ and this feels like its being ruined in that regard, not to mention the addition of a 2nd ad (for impulse) at the side. Now when the GWJ main page loads, I see mostly graphics at 1280x1024.

I have yet to do anything with that top bar except glance at the retro article pic/description. Guess I'll just get used to it eventually.

mrtomaytohead wrote:

Also, I've not commented yet, but even after a week, the top bar does nothing but bug me. I really liked the low graphics presentation of GWJ and this feels like its being ruined in that regard, not to mention the addition of a 2nd ad (for impulse) at the side. Now when the GWJ main page loads, I see mostly graphics at 1280x1024.

I have yet to do anything with that top bar except glance at the retro article pic/description. Guess I'll just get used to it eventually.

My comment on this is that you have to scroll a bit to get at the content. I'd say either use vertical space or horizontal space for the 'extras', not both.

When I use the site lately, I find it seems to switch randomly between the thinner, fixed width layout and a fatter full window layout depending on what forum thread I read. Is there supposed to be a predictable behavior here? I don't really mind either layout, just looking for consistency.

FWIW: The behavior seems to persist even across browser cache and cookie resets.

Threads attached to front page posts will still fall inline with that narrow width, it's the forums themselves that get to let it all hang out.