Introduction: 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

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

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

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

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

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

This option brings back page buttons on OrangeBoards and Instructables!


BeforeAfter

Step 7: 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

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)

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)

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

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)

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

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

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

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

SAVE THE PONIES!

Step 17: 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

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

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

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

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

author
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.

author
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.

author
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.

author
Sorunome (author)Laral2014-11-14

I think userscripts.org pretty much vanished :(

author
Laral (author)Sorunome2014-11-14

I know. That is so sad and so wrong.

author
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...

author
Sorunome (author)bergerab2014-10-04

Hehe, thanks!

A lot of time went into it so far :)

author
andrea biffi (author)2014-02-26

Thanks Sorunome :-))

author
mikeasaurus (author)2014-01-24

Wow, impressive stuff!

author
Sorunome (author)mikeasaurus2014-01-25

Haha, thanks!

author
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

author
Sorunome (author)bertwert2013-12-24

new version up with this :)

And Merry Christmas :)

author
Sorunome (author)bertwert2013-12-17

Good idea! Thanks!

author
bertwert (author)Sorunome2013-12-17

Your welcome.
:)

author
bertwert (author)2013-12-15

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

author
Sorunome (author)bertwert2013-12-16

Thank you!

author
dr. richtofen (author)2013-12-13

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

author
Sorunome (author)dr. richtofen2013-12-13

yay, thanks :D

author
dr. richtofen (author)Sorunome2013-12-13

You're welcome :D

author
dickheijboer (author)2013-12-12

Clever!

author
Sorunome (author)dickheijboer2013-12-12

Yay, thanks, does it work well for you?

author
dickheijboer (author)Sorunome2013-12-12

Not done yet.. :)

author
Sorunome (author)dickheijboer2013-12-12

try it out! :D

author
dickheijboer (author)Sorunome2013-12-12

I will try it out! :)

author
Sorunome (author)dickheijboer2013-12-12

yay :D

author
dickheijboer (author)Sorunome2013-12-12

Fantastic! Have you done this! Wow!

author
Sorunome (author)dickheijboer2013-12-12

hehe, thanks :)

author
dickheijboer (author)Sorunome2013-12-12

You're a boss!

author
Sorunome (author)dickheijboer2013-12-12

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

author
dickheijboer (author)Sorunome2013-12-13

Haha..

author
Shadowman39 (author)2013-12-11

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

author
Sorunome (author)Shadowman392013-12-11

yay, thanks! :)

Also, nice (new) avatar :P

author
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.

author
Sorunome (author)Shadowman392013-12-11

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

author
Shadowman39 (author)Sorunome2013-12-11

Haha :-P

author
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*)

Brony.png
author
Sorunome (author)hunter9992013-12-11

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

And yeah, ponies are important :D

author
ASCAS (author)2013-12-11

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

author
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

author
sandroknexmaster (author)2013-12-10

Awesome! Works perfect!

author

Yay, glad you like it!

About This Instructable

2,308views

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: