nuclear powerpack – keyboard navigation and theme mods for geekhack

[nuclearsandwich]

I've been lurking on geekhack for a couple of weeks and very recently created an account. Shortly after I started browsing the forum, I also started tailoring it to my viewing habits using a browser extension similar to greasemonkey / userscripts for *nix developers called w3d. I also added some javascript to identify moderators and thread starters so I could visually identify them. The javascript is totally independent of the styling and can probably be used no matter what the theme is!

Now with a Nostalgia mode!

Screenshotsssss

More

The geekhack homepage


The forum listing


The topic listing



The thread view (the thread starter's badge is highlighted on each post)


Starred individuals are highlit wherever they go


And if they start a thread...


A quick and minimal Nostalgia version

I used the Austere theme, my preferred, as the base and made the following changes:

• Eliminate the dark background panel
• Reduce the maximum body width to 1080px for a readability-friendly line width
• Use the open source Source Sans Pro font from Adobe
• Use 18px as the base font and 12px for smallfont
• Override all custom colors in posts
• Scale all inline images to 300px wide
• Scale avatars to 96px wide
• Completely hide the upper section (avatar and personal links)
• Use a light grey for the menu bar
• Remove borders from the menu bar
• Darken the greys in the austere theme so they contrast a bit more
• Highlight thread starters posts
• Highlight starred folk

Installation Instructions

For use with the nostalgia theme save this file as geekhack.org.css instead of the one linked in the instructions below. The javascript file is theme independent.

Firefox on Windows Vista/7/8

More

• Install the dotjs addon
• Download the stylesheet and save it to C:\Users\%username%\css\geekhack.org.css
• Download the script and save it to C:\Users\%username%\js\geekhack.org.js
• Refresh

Firefox on Mac OS X / *nix

More

• Install the dotjs addon
• Download the stylesheet and save it to $HOME/.css/geekhack.org.css
• Download the script and save it to $HOME/.js/geekhack.org.js
• Refresh

Chrome for Mac OS X / *nix

More

• Follow these instructions to install w3d
• Download the stylesheet and save it to $HOME/.w3/geekhack.org.css
• Download the script and save it to $HOME/.w3/geekhack.org.js
• Run the w3d daemon using your xinitrc or just nohup w3d > /dev/null &2>1
• Refresh

Hopes and dreams (todo list)

• Publish to userstyles.org and userscripts.org for ease of installation
• Clean up padding and boxes all over the place
• Add keyboard navigation for forums Done!
• Add keyboard navigation for topics and posts
• Use dubious javascript to add emoji support from the emoji cheat sheet

[microsoft windows]

HOW DO YOU MAKE FORUM THEMES LIKE THIS? I'VE ALWAYS WANTED TO MAKE A HOTDOG STAND THEME FOR THE FORUM.

[Photekq]

I'm not a moderator..

[BunnyLake]

I'm not a moderator..

thats to show you as a thread starter

[vun]

No love for Opera :/

[Photekq]

I'm not a moderator..

thats to show you as a thread starter

No, I mean in the 'moderators are highlit wherever they go' picture.

Kangaroo was the thread starter so he's highlighted red, and i'm highlighted blue.

[vun]

I'm not a moderator..

thats to show you as a thread starter

No, I mean in the 'moderators are highlit wherever they go' picture.

Kangaroo was the thread starter so he's highlighted red, and i'm highlighted blue.

Probably confused the star with mod status

[mauri]

No love for Opera :/

Shh they'll never have something as beautiful as we do.

[nuclearsandwich]

I'm not a moderator..

thats to show you as a thread starter

No, I mean in the 'moderators are highlit wherever they go' picture.

Kangaroo was the thread starter so he's highlighted red, and i'm highlighted blue.

Probably confused the star with mod status

Not confused with mod status as much as gave up distinguishing between starred folk and mods because I didn't feel like using regular expressions. I can always go down the dark path.

[nuclearsandwich]

No love for Opera :/

Shh they'll never have something as beautiful as we do.

Sorry, y'all lack a thing called ecosystem. But if Opera supports greasemonkey/userscripts and userstyles this will work there too once I get these up there. Right now this is still in alpha-stages.

[SeriouSSpotS]

This is really awesome, nice job

[esoomenona]

Can you separate administrators from moderators by color? Admins have purple stars, so should be purple, mods have blue stars, so should be blue.

Also, possibly mark "buddies" a certain color?

[nuclearsandwich]

This is really awesome, nice job

Thanks <3. Were you able to try it out?

Can you separate administrators from moderators by color? Admins have purple stars, so should be purple, mods have blue stars, so should be blue.

 I don't feel like making the JS hax check the star color, plus it looks like there's a ton of them.  I updated OP to refer to them as starred people instead of moderators. So I need to find an explanation of them in a stickied post or wiki. Or just spend enough time here that I know what they mean.

Also, possibly mark "buddies" a certain color?

Maybe when I get some buddies.

[nuclearsandwich]

Pushed up a new version that includes really super primitive keyboard navigation. Press Tab to focus on the next post and shift+Tab to go backwards.

For all you web developers out there, it uses tabindex and focus/blur events to add navigation-focus classes to the focused post. The current version of the stylesheet adds a subtle highlight to the focused post using that class.

Next up: binding these events to j/k and scrolling to the top the focused post instead of relying on the browser to bring it on screen.

[nuclearsandwich]

Behold keyboard navigation on the keyboard forum!

Navigate downward with j, s, or tab. Head back up with k, w, or shift+tab



The animations are a bit wonky (don't work) in Chrome on OS X. It may be a jquery bug specific to the version used by w3d, it may be an cross-browser incompatibility in jquery's animate() function. I'm not ninja enough to know.

[sth]

looks good... now we need a nostalgia version

[nuclearsandwich]

looks good... now we need a nostalgia version

The javascript is theme independent and will remain so. I'm going to take a look at Nostalgia right meow but all you need to do is write a CSS rule for #forumposts .js-navigation-focus to make your own.

[nuclearsandwich]

looks good... now we need a nostalgia version

Happy birthday sth! Check OP for Nostalgia instructions. Spoiler: Save this stylesheet in place of the one listed in the instructions.

[nuclearsandwich]

When following a post-specific link (such as last post) the selected post is now focused instead of the first post.