Tweak the new Oppo layout with Greasemonkey

Kinja'd!!! "BJ" (benjamin-bignell)
10/19/2013 at 17:54 • Filed to: tweak oppo, oppo tools, greasemonkey, tampermonkey, can we all stop complaining now?

Kinja'd!!!19 Kinja'd!!! 40

2014-03-13 - Final Update
With the arrival of Tiger, this script is now officially end-of-life and will no longer be maintained or supported.

!!! UNKNOWN CONTENT TYPE !!!

If you have Firefox, you can install the Greasemonkey plugin and then install my simple user script, Oppo. It also works in the Tampermonkey plugin for Chrome. It's a very simple tweak that changes the following:

Shrinks the sidebar and expands the main content area

Changes some colours and text sizes

Bigger avatars, bigger preview images

Tweaks the preview of image-only posts

Standard header sizes for all posts

Tweaks for the Jalopnik front page (and potentially other Gawker sites)

Handles the new discussion format currently in preview on the front page (2013-12-14)

Automatically applies to Jalopnik front page and all sub-sites (Detroit, Drive, Oppo, and Releases)

For complete information and release notes with the changes in each version, see !!!error: Indecipherable SUB-paragraph formatting!!! .

Here's Oppo in its unmolested form:

Kinja'd!!!

And here it is with my Greasemonkey script:

Kinja'd!!!

Here's the tweaked front page:

Kinja'd!!!

And here's a post with the larger avatar and meta data:

Kinja'd!!!

Download link to the script (currently v20): !!!error: Indecipherable SUB-paragraph formatting!!!

These changes work on the full-size desktop version; I don't know what will happen if you try to use the mobile version with this script. Use at your own risk. Sorry, I can't help you to install the plugin and figure out why it's not working.

I hope this helps some of you.

Some notes.

1) Once the script has changed the layout, resizing your window does some funny stuff. I guess that most of the time we're not resizing our windows as we're reading an article/post, so I'm not going to try and fix this. Too much effort, too much lazy.

2) Works in Greasemonkey (Firefox) and Tampermonkey (Chrome). Your results may vary depending on browser version, plugin version, and operating system.

3) Nothing has been done to deal with the maximum width that leaves a lot of blank space on either side when using very wide windows. In another version, perhaps...

4) This script works for the front page and should be OK on the other Gawker sites as well; I haven't tested it yet. I'm not the only one who reads Jezebel, right? Guys? Anybody? ... OK, you just need to add the site to the inclusion list, like this: !!!error: Indecipherable SUB-paragraph formatting!!!

5) The thumbs on the Jalopnik front page come in three flavours - only the simple left-aligned thumbs have been handled for now.

6) AdBlock users: I don't use AdBlock and don't know how it affects Greasemonkey, my script, or the site in general. Please try disabling AdBlock for Oppo and the front page - there are very few ads when you're logged in.


DISCUSSION (40)


Kinja'd!!! Blondude > BJ
10/19/2013 at 14:56

Kinja'd!!!1

If only someone made an extension for Chrome that did this!


Kinja'd!!! BJ > BJ
10/19/2013 at 14:56

Kinja'd!!!0

This script may also work with Chrome/Chromium browsers and the Tampermonkey plugin. If anyone out there is willing to try, thanks for letting me know how it goes!


Kinja'd!!! All Motor Is Best Motor > BJ
10/19/2013 at 14:56

Kinja'd!!!0

Any way you can push the sidebar headlines further to the left? On my Firefox there's a huge gap on the left side of them. It's a complete waste of space.


Kinja'd!!! Ghost Dog - For the kittens > BJ
10/19/2013 at 14:56

Kinja'd!!!0

Done. Thanks.


Kinja'd!!! BJ > All Motor Is Best Motor
10/19/2013 at 14:59

Kinja'd!!!0

I'm sure it's possible. The layout is your typical liquid layout - a fixed-width box, centered in the screen, that resizes up to a certain point to accommodate the actual screen size.

My laptop screen is quite small (1280x800?) so I don't have the wasted space on the sides. I'll take a look and see what I can do.


Kinja'd!!! BJ > Blondude
10/19/2013 at 15:00

Kinja'd!!!1

Check out Tampermonkey and let me know if it works. Thanks!


Kinja'd!!! nobody > BJ
10/19/2013 at 15:01

Kinja'd!!!0

It works with Tampermonkey


Kinja'd!!! nobody > Blondude
10/19/2013 at 15:01

Kinja'd!!!1

It works with Tampermonkey


Kinja'd!!! BJ > nobody
10/19/2013 at 15:02

Kinja'd!!!0

Awesome, thanks.


Kinja'd!!! BiTurbo228 - Dr Frankenstein of Spitfires > BJ
10/19/2013 at 15:11

Kinja'd!!!0

Sweet. That's much nicer. The Top Stories bit is useful, but it was a little overbearing before.

Now, if only there was a way to get full-size uncropped pictures back.


Kinja'd!!! Ferrero1911 > BJ
10/19/2013 at 15:13

Kinja'd!!!1

Thanks for making this. I'll try it when I get home. Right now I use a feed reader for all gawker sites except Oppo.


Kinja'd!!! bobkustofawitshz > BJ
10/19/2013 at 15:14

Kinja'd!!!0

Installed.
This is great. Thank you!


Kinja'd!!! BJ > BiTurbo228 - Dr Frankenstein of Spitfires
10/19/2013 at 15:14

Kinja'd!!!3

I'm pretty sure I can fix this - the images appear to be resized in the display - they're actually much bigger. It's been added to the TODO list.


Kinja'd!!! All Motor Is Best Motor > BJ
10/19/2013 at 15:34

Kinja'd!!!0

I'm running 1920x1080 if that helps. I like what you've done so far on this btw.


Kinja'd!!! Slave2anMG > BJ
10/19/2013 at 15:57

Kinja'd!!!1

Well that works pretty darn well in Chrome...REALLY helps the readability for my middle aged eyes. But...on the front page I'm getting banner adverts at the top of the page I wasn't getting before...adblock doncha know. Interference? Or more diabolical Denton?

EDIT - when I signed in...the banners went away. Peculiar.


Kinja'd!!! Slave2anMG > Slave2anMG
10/19/2013 at 15:58

Kinja'd!!!1

Kinja'd!!!


Kinja'd!!! Slave2anMG > BJ
10/19/2013 at 16:14

Kinja'd!!!0

Doesn't seem to work on Deadspin - where do I edit the inclusion list in Chrome? Can't find that list under Tampermonkey or in the script itself...


Kinja'd!!! Bandit > BJ
10/19/2013 at 18:27

Kinja'd!!!0

Awesome man, thanks!


Kinja'd!!! BJ > BiTurbo228 - Dr Frankenstein of Spitfires
10/19/2013 at 22:01

Kinja'd!!!0

This has been fixed - download the latest version and install it.


Kinja'd!!! BJ > Slave2anMG
10/19/2013 at 22:55

Kinja'd!!!0

The change is made at the top of the script. Look for this line:

// @include http://oppositelock.jalopnik.com/*

Just simply make a copy of it and change the site name; you can do this as many times as you like:

// @include http://oppositelock.jalopnik.com/*
// @include http://deadspin.com/*
// @include http://jezebel.com/*


Kinja'd!!! Slave2anMG > BJ
10/19/2013 at 23:28

Kinja'd!!!0

Got it...thanks!


Kinja'd!!! sebdel > BJ
10/20/2013 at 02:36

Kinja'd!!!0

Thanks! I was thinking on doing this myself (not that i have any idea of how to, I just knew it was possible). Great work


Kinja'd!!! BiTurbo228 - Dr Frankenstein of Spitfires > BJ
10/20/2013 at 05:51

Kinja'd!!!0

Hum, it seems they're bigger but still cropped.

Don't worry, you've still done a better job tweaking than the Gawker IT bods.

To be honest, it could be that they're crap at web design, or it could be that they're given sod all time to do it with a changing brief while they are. Sounds about right for anything IT related.


Kinja'd!!! BiTurbo228 - Dr Frankenstein of Spitfires > BJ
10/20/2013 at 05:57

Kinja'd!!!0

You know what, don't worry at all. That's much better.


Kinja'd!!! BJ > BiTurbo228 - Dr Frankenstein of Spitfires
10/20/2013 at 07:00

Kinja'd!!!0

I can't control the crop of the images because they're generated on the server and sent to your browser like that. The only thing I could do was to make them bigger by removing the forced resizing.


Kinja'd!!! BiTurbo228 - Dr Frankenstein of Spitfires > BJ
10/20/2013 at 07:22

Kinja'd!!!0

Bummer. Still, I like not having to squint at the pictures.

I get the feeling that we would be much happier if pictures were coded to fit a certain pixel width, rather than cropping it down.

You'd end up with worse quality pictures, but if they're quite small that shouldn't matter.


Kinja'd!!! desertdog5051 > BJ
10/21/2013 at 00:01

Kinja'd!!!0

Thank you, sir.


Kinja'd!!! JasonStern911 > BJ
10/21/2013 at 01:26

Kinja'd!!!0

It's beautiful... now.

Thank you!


Kinja'd!!! D > BJ
10/21/2013 at 02:07

Kinja'd!!!0

Thanks for putting in the effort to make this. I'm giving it a go right now in Chrome and everything works fine. My only suggestion would be to add space between the avatar and lede picture (in an expanded oppo post) if that's possible.


Kinja'd!!! Pabuuu, JDM car enthusiast & Italian parts hoarder > BJ
10/21/2013 at 18:25

Kinja'd!!!0

I do not know how to do all this.. So I just want Kinja to change back..

I don't need the Top stories thing.

I want my bigger headline pictures back.

Kinja'd!!!


Kinja'd!!! BJ > Pabuuu, JDM car enthusiast & Italian parts hoarder
10/21/2013 at 20:07

Kinja'd!!!0

If you're using Firefox, it's very easy:

1) Open the Add-Ons option from the Tools menu, search for Greasemonkey, and install.

2) Go to the download link I provided - you'll find an Install button on the page. Click it.

3) Go to Oppo. Bask in the glory, or whatever.


Kinja'd!!! Ferrero1911 > Slave2anMG
10/22/2013 at 01:43

Kinja'd!!!0

replied to the wrong person...


Kinja'd!!! Ferrero1911 > BJ
10/22/2013 at 01:44

Kinja'd!!!0

Works great in Chrome. Thanks for saving Oppo!


Kinja'd!!! phenotyp > BJ
10/22/2013 at 12:14

Kinja'd!!!0

Finally got the chance to install. Big improvement! Giant thank you, person who is smarter at code than I.


Kinja'd!!! 99TelepodProblems > BJ
10/25/2013 at 04:01

Kinja'd!!!0

Definitely looks better. Thanks!


Kinja'd!!! 99TelepodProblems > BJ
10/25/2013 at 04:28

Kinja'd!!!0

Confirmed success with Tapermonkey in Chrome here as well.


Kinja'd!!! A3R0 > BJ
11/08/2013 at 16:48

Kinja'd!!!0

Are you positive this is completely virus free and will only change Oppo? Thanks for the help.


Kinja'd!!! BJ > A3R0
11/08/2013 at 22:01

Kinja'd!!!0

I'm quite sure that this script is safe to use. While I can't guarantee the safety of your browser or computer, I assure you that I did not use anything unsafe and have no intention of harming you or your computer! I simply modify the CSS (styles) of the site to make it prettier, and added a little vanity footer with information about the plugin. The script can be viewed by anyone, but only I may change the official version downloaded from the userscripts.org website.

The script applies only to the jalopnik sites (oppositelock, drive, etc) as well as the front page.

If you're uncomfortable leaving the Greasemonkey plugin enabled at all times, it can be very easily disabled - simply click on the monkey face and he'll turn gray. Click once again, and he's colourful - the plugin is activated. You can do this to ensure that the plugin can't interfere with your browsing on other sites, but I don't think it's necessary.


Kinja'd!!! DiHydro > BJ
09/12/2015 at 11:59

Kinja'd!!!0

Kinja'd!!!

Why in the heck does Jalopnik not look like this anyway?!?


Kinja'd!!! BJ > DiHydro
09/12/2015 at 13:21

Kinja'd!!!0

Ha! It’s crazy how much Kinja has changed. I gave up trying to keep up a long time ago...