Change instructables header from orange! Update 4

(Made new topic because old one was getting crowded and ugly)

Yes, folks, the moment we've all been waiting for...you can customize the header at long last!

For years the instructables header has been full of orangey goodness. Maybe a little too much orangey goodness. When I first saw the site, I thought, "Huh. It's February. A little early for halloween...". No lie. When I realized it's like this all the time, I realized something had to be done. I finally got around to sitting down and once and for all giving full control of the header to the user. Now, don't get me wrong. I love orange. I think the admins did a great job picking colors, I'm not trying to hate on them. But let's face it, sometimes change is good.

With these handy-dandy styles, you simply install stylish, load them, and presto! No more header screaming ORANGE ORANGE ORANGE and pounding you over the head with shocking vibrant hues until you die. No more co-workers saying "are you on instructables again?! " Yes folks, the header is in your control! Yellow! Green! Invisible! Lots more! Links are all black, to avoid conflict with buttons and such. Link colors (and header color) are easily edited.

To install, Firefox users can just install this addon and load the ClearHeader style. However, that's not the only way to install. Firefox users can use greasemonkey if you want. Opera users, IE 7 (ptooie!) can load the style as a userscript. It's cross browser!

Many thanks to Gmjhowe for his generous contribution of mad photoshop skillz.

New! Red: http://userstyles.org/styles/21622

Blue: http://userstyles.org/styles/14765

Invisible: http://userstyles.org/styles/15029

Yellow: http://userstyles.org/styles/15107

Green: http://userstyles.org/styles/14804

Eric's shoes Purple taken from his famous shoes instructable!: http://userstyles.org/styles/15032

Gray: http://userstyles.org/styles/15030

New! Black: http://userstyles.org/styles/21620

Kiteman: http://userstyles.org/styles/15039

Ewilhelm: http://userstyles.org/styles/15099

Edit, tweak and post these to your heart's content.

If you want THE WHOLE ENTIRE HEADER gone, not just graphics - you want EVERYTHING GONE from that bad boy, see here: http://www.instructables.com/community/Remove-the-entire-instructables-header-NOT-just/

If you have questions, problems, etc, please post them here or PM me and we'll get it worked out.

Many, many thanks to Yokozuna for providing me a handlogo file so I didn't have to color them in pixel by pixel like I was earlier, or mooch off gmjhowe like I did after that. :-D

UPDATE: I have made substantial changes to all scripts. Please update your old versions. Due to name changes, some of them may not even update properly. If this happens, please uninstall any previously installed versions and install the new ones.


* Fixed bug in Blue header causing header to appear in all websites, not just instructables

* Added the hand logo to Blue header

* Marked obsolete versions of scripts

* Changed all titles to reflect the application to instructables

* Changed all descriptions to reflect the application to instructables

* Made Black header

* Made Red header

* Gave all headers (except black) hand with proper white outline


Q: I installed one header, then another one. Now I see the first one that I installed flash briefly before it goes to the current one. Now what?

A: Make sure you disable all header scripts except for the one you are currently using.

Q: Why are there CSS color codes at the top? That's extraneous code! You're dumb!

A: Actually, I left it there on purpose, to make it nice and easy to refer to should you wish to change the link colors.

Q: It's not working! Ahh!

A: Make sure you have greasemonkey/stylish and the script itself enabled. If you continue to have issues, uninstall and reinstall.

Q: I want to make my own. How do I do this?

A: How to change the scripts:

To change link colors, open the script and go to the section

links */

a {

color: #000 !important;

and change from #000 to whatever color you wish.

To make custom-color scripts, download this file: . Edit it to whatever color you wish. Upload the file to an image hosting site such as tinypic or picoodle.

Next, go to the first place where you see a url like (www.foo.jpg) and replace the url with the url of your uploaded picture.

To make avatar headers, upload the appropriate file to an image hosting site and change as above. Then, go to the second url location and delete the url.

Please upload any cool new scripts you make so others can enjoy them! If I like them I'll link them up here, too. ;)

As always, please post bug reports and color requests in the comments.

Picture of Change instructables header from orange! Update 4
sort by: active | newest | oldest
1-10 of 69Next »
NatNoBrains5 years ago
I just got greasemonkey for IE, I don't understand how to download the themes!
Lithium Rain (author)  NatNoBrains5 years ago
These themes are super-old, and due for a complete rewrite. However, if you still want to use them, just go to the links to the right of each color - those will take you to each theme's page, where you can install the themes.
Where's the install button?
Chromatica6 years ago
Chrome please
Lithium Rain (author)  Chromatica6 years ago
As in silvery? I tried that but it turned out pretty much the same as gray. Got any experience in digital design?
i could see like a steel, but im not sure how one would do chrome...
Steel/brushed meta type would be awesome and yes somewhat(the most a 13 year-old can do)
Lithium Rain (author)  Chromatica6 years ago
Put your graphics where your comment box is. ;) Care to give it a go? If you could give me a sample of the look you mean I'll certainly try it. I tried before to make a style like this but couldn't really get a satisfying result.
I'll take a shot at it.
Lithium Rain (author)  Chromatica6 years ago
Awesome! I look forward to it. :)
1-10 of 69Next »