Introduction: Instructables Enhancer - a Userscript That Enhances Instructables

Picture of Instructables Enhancer - a Userscript That Enhances Instructables


Instructables Enhancer is a userscript which enhances your experience when using instructables.


Features

  • Settings menu as a new sub-menu on the you-settings page
  • Auto-checking for updates and notification bubble
  • Displaying comments in the old tree from
  • Displaying comments in the old way
  • Display page buttons for orange boards
  • Fix comment page navigation
  • Fix line-break bug when editing the about-zone
  • Full screen-width for widescreen monitors
  • Hide (removed by author or community request)
  • Make the font size smaller again
  • Make the background orange
  • Fix the comment deleting
  • Added a 'cancel reply' button when replying
  • Fixed the image-uploader in comments
  • Display Ible embed button
  • Better answers navigation
  • Brought back the rich editor and preview button to comments
  • Inline editor on instructables
  • Use the old instructables editor!

This instructable is a guide on how to install and use this userscript.

If you have any suggestions/complaints/questions feel free to leave a comment below!

If you like this project, be sure to check out my website!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 1: Installation

Picture of Installation

First you'll need an add-on to run userscripts. Which on to take depends on your browser:

Chrome

The plugin for chrome is called Tampermonkey.
get Tampermonkey in the Chrome Store

Firefox

For Firefox, Greasemonkey is needed
get Greasemonkey in the add on section

Internet Explorer

For Internet Explorer, IE7Pro can be used, however, not all features might work with this program.
IE7Pro download

Safari

For Apple's Safari, GreaseKit works with Greasemonkey userscripts
GreaseKit on Macupdate.com

The Script

To install the script, simply go here: http://ibles.sorunome.de/iblesEnhancer.user.js
In Firefox, you have to wait about 5 seconds, then click 'install', in Chrome, simply hit 'ok'

Step 2: The Settings Menus

Picture of The Settings Menus

This script has it's own settings menu, you can access it via different ways:
First there is a new option in settings, labeled 'Instructables Enhancer'. Hit it and you will see the options. In adition it also displays you the current version and if you'll be able to update.

The other way is by using the new option in the 'you' drop-down menu:

The pop-up menu looks like this:


Step 3: Check for New Updates

Picture of Check for New Updates

The userscript automatically searches for new updates.
When there is an update available, a notification pops up in the top-right corner of your screen. You can choose to either update it, or dismiss it.
In addition it will also display you on the setting pages if there are new updates available.
To update it simpley click the link, if the browser asks you if you want to update it hit ok. The page will refresh automatically after 10 seconds and the settings menu will pop-up to show you the changes.

Step 4: Display Comment Trees

Picture of Display Comment Trees
Comment trees, remember that old feature?
Wasn't it awesome to be able view the comments in tree format?
Well, here you have your feature back!
Before After

Step 5: Use Old-style Comments

Picture of Use Old-style Comments
How comments used to look before instructables changed it......just looks far better together with the comment trees.
Using old-style comments Using old-style comments and comment trees

Step 6: Display Page-Buttons on Comments

Picture of Display Page-Buttons on Comments

This option brings back page buttons on OrangeBoards and Instructables!


BeforeAfter

Step 7: Fix Instructables Indicator on Comments

Picture of Fix Instructables Indicator on Comments
On orangeboards the indicator of how many instructables the poster has is broken, this option fixes it.
Before After

Step 8: Fix Line-break Bug When Editing the About Zone

Picture of Fix Line-break Bug When Editing the About Zone
This fixes the problem that occurs when editing your "about zone".
Without the script, when editing this part of your profile, any enters you make won't show up when you save it.
The text would just show up, with everything behind each other.
The script fixes this, and the enters you added will show up on your profile.
Before After

Step 9: Make Page Change Size With Screen Size (especially Good With Widescreen)

Picture of Make Page Change Size With Screen Size (especially Good With Widescreen)
Instructables looks pretty ugly on widescreen monitors, as the content is only in the center.
This option will strech the content based on your screen resolution, so it also looks good with non-widescreen monitors!
Before After

Step 10: Hide (removed by Author or Community Request)

Picture of Hide (removed by Author or Community Request)
Deleted comments leave a comment containing "(removed by author or community request)" behind.
That can be very annoying, to hide them all activate this option!
Before After

Step 11: Smaller Font-size

Picture of Smaller Font-size
Ugh, just recently 'ibles changed the font size to be huge, this option make it back to the previous one!
Before After

Step 12: Make Instructables (color)

Picture of Make Instructables (color)
This option changes the background color to whatever you want! To figure out which color code to use, go to a site like this one. The Instructables orange color code is #d44400 (this is the default color when the enhancer is first installed).
You can also use the pre-defined colors and type in like 'red' to have it red, or 'black' to have it black.
For the more advanced users: any valid CSS color will work, also colors in the rgb() mode or any other mode.
Before After

Step 13: Add More Comment Buttons

Picture of Add More Comment Buttons

This option adds 3 buttons to comments: cancel, preview, and rich editor. 

Cancel: Allows you to cancel a comment to make the box disappear into the void.

Rich editor: Brings back the old rich editor that was removed from the comments on 1/9/14.

Preview: You can preview a comment to see what it'll look like before posting (especially useful if you're using custom html). Like the rich editor, this was removed from the normal comment boxes, so this brings it back.

Step 14: Enhance Comment Deleting

Picture of Enhance Comment Deleting

Often, when you try to delete a comment, the page will either reload without deleting it, or you are sent to your You Page.
This option makes deleting comments easier, without having to reload the page.

Step 15: Comments Pager AJAX

Picture of Comments Pager AJAX

Load comment pages without the need of a whole page refresh when clicking the page buttons!
This also speeds up the comment loading.

Step 16: Save the Ponies

Picture of Save the Ponies

SAVE THE PONIES!

Step 17: Fix Upload Form in Comments

Picture of Fix Upload Form in Comments

This feature, at the moment, does nothing. In the future it will bring the old look of the image uploader back, like the one in the pictures.

Step 18: Display Embed Button

Picture of Display Embed Button

This feature adds a button so you can easily embed Instructables on other sites! You can also modify the iframe and JavaScript and preview the embedded Ible. The look of the embedded Ible is different from the default embedding to allow for it to be larger, faster, and more simple.

Step 19: Better Answers Navigation

Picture of Better Answers Navigation

The default answers page only has one set of options for sorting answers. This feature adds options to sort by the main categories and channels so that you can further narrow your search. These can be selected in the drop-down menus. The main categories can also be selected via the icons in the header.


Step 20: Enable Inline Editor

Picture of Enable Inline Editor

This option will make it possible to edit the text of your Instructables by double-clicking the text when viewing it! No need to go to the edit page!

When editing a box will appear that has many features of the rich editor.  

Warning: Spell check doesn't work, and if you click on any drop-down menu the editor will close.

To save just simply click somewhere else on the page, on the bottom right of the text you just edited it will say 'Saved'.

Step 21: Upcoming

Picture of Upcoming
So, what's next?
Here are a few feature ideas I'll (maybe) be working on, if you have any more ideas, please leave a comment!
  • Fontsize buttons in the advanced editor
  • Color button in the advanced editor


That's it for now!
Thanks to Shadowman39 and dr. richtofen for helping me create this documention!

Comment, rate and subscribe!
Also, check out my website!

Comments

Laral (author)2014-11-14

This is all well and good, and I appreciate the work that went into it, BUT it only changes the appearance for individual users and not the general community.

Sorunome (author)Laral2014-11-14

Well it'd be impossible for it to make it change the experience for the whole community as that would require me being an instructables developer which I am not and even if I was every single idea would need to go through discussion etc and I bet some wouldn't come through.

Laral (author)Sorunome2014-11-14

Oh, I agree. I saw your comment in the (removed by author or community request) thread. I tried to add a comment there but it didn't go through. BTW when I first clicked the 'make comment' button just now, my reply wasn't saved and I then got a blank page. I couldn't get the page back in Firefox so I had to switch to Safari. This is so typical of this site. I recently removed a reply I made to a comment in my own Instructable so I could fix a URL which was not displaying correctly. When I again replied to the same comment, it ended up in some random position in the comments, far from the guy's comment, completely out of context. This is what is considered 'editing' your own comment. Heh-heh…

BTW do you know the current URL of userscripts.org? It was userscripts.org:8080 but that is no longer working.

Sorunome (author)Laral2014-11-14

I think userscripts.org pretty much vanished :(

Laral (author)Sorunome2014-11-14

I know. That is so sad and so wrong.

bergerab (author)2014-10-01

Incredible.. Just installed this and I think everyone on instructables needs this script. Beautifully written! Now if only we could save those ponies...

Sorunome (author)bergerab2014-10-04

Hehe, thanks!

A lot of time went into it so far :)

andrea biffi (author)2014-02-26

Thanks Sorunome :-))

mikeasaurus (author)2014-01-24

Wow, impressive stuff!

Sorunome (author)mikeasaurus2014-01-25

Haha, thanks!

bertwert (author)2013-12-17

Sorunome,
I have a request:
Have a choice input for color (in rgb) so it not just orange.
(I changed mine in the code, but every update will change it back)
Thanks
BERTWERT

Sorunome (author)bertwert2013-12-24

new version up with this :)

And Merry Christmas :)

Sorunome (author)bertwert2013-12-17

Good idea! Thanks!

bertwert (author)Sorunome2013-12-17

Your welcome.
:)

bertwert (author)2013-12-15

Hey Sorunome,
This is as good as you claim it is :)
Bertwert

Sorunome (author)bertwert2013-12-16

Thank you!

dr. richtofen (author)2013-12-13

I said it before, but this is really awesome!
Everything works perfect so far :)

Sorunome (author)dr. richtofen2013-12-13

yay, thanks :D

dr. richtofen (author)Sorunome2013-12-13

You're welcome :D

dickheijboer (author)2013-12-12

Clever!

Sorunome (author)dickheijboer2013-12-12

Yay, thanks, does it work well for you?

dickheijboer (author)Sorunome2013-12-12

Not done yet.. :)

Sorunome (author)dickheijboer2013-12-12

try it out! :D

dickheijboer (author)Sorunome2013-12-12

I will try it out! :)

Sorunome (author)dickheijboer2013-12-12

yay :D

dickheijboer (author)Sorunome2013-12-12

Fantastic! Have you done this! Wow!

Sorunome (author)dickheijboer2013-12-12

hehe, thanks :)

dickheijboer (author)Sorunome2013-12-12

You're a boss!

Sorunome (author)dickheijboer2013-12-12

Hehe, thanks, that thing *only* has like 2 months development so far ^^

dickheijboer (author)Sorunome2013-12-13

Haha..

Shadowman39 (author)2013-12-11

As I have said before, this userscript is awesome! :-) Looking forward to those future additions.

Sorunome (author)Shadowman392013-12-11

yay, thanks! :)

Also, nice (new) avatar :P

Shadowman39 (author)Sorunome2013-12-11

You're welcome, and thanks! That avatar is actually one I used years ago near Christmas time, I just decided to re-use it, lol.

Sorunome (author)Shadowman392013-12-11

i know, that is why i put new in brackets ;)
(p.s. i stalk you)
/me hides

Shadowman39 (author)Sorunome2013-12-11

Haha :-P

hunter999 (author)2013-12-11

Wha....This is great! Thanks, it works perfectly and don't worry, I have saved the ponies :-)

One thing I would like is a "Save the bronys" button! Other than that, a featured project this should be (5*)

Sorunome (author)hunter9992013-12-11

Hehe, glad you like it and that it works well for you :)

And yeah, ponies are important :D

ASCAS (author)2013-12-11

Thank you very much! Ible's new font size is kinda bothering me :(( I hope they revert them.

Sorunome (author)ASCAS2013-12-11

Hehe, no worries, it was a lot of fun for me to make, and still is, keep in mind that it is still in development! :D

sandroknexmaster (author)2013-12-10

Awesome! Works perfect!

Yay, glad you like it!

About This Instructable

2,316views

30favorites

License:

Bio: You can find me over on Knexflux! https://knexflux.net
More by Sorunome:Knex Ball Machine IcarusHow to add a speaker to your TI-84+Knex Ball Machine Dysphoria
Add instructable to: