Author Options:

Change instructables from orange! - Update 3 2/18 Answered

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

(For real this time. See, I actually PUBLISHED the topic! Note to self: do not save forum topics with intent to publish later. Stalkers will find them first and leak it. :-P )

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 this handy-dandy style, you simply install stylish, load it, 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 invisible! Links are all black, to avoid conflict with buttons and such. Link colors (and header color) are easily edited. 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.

Instructions for making your own styles coming soon.

To install, Firefox users can just install this addon and load the ClearHeader style. However, opera users and those whose browser supports greasemonkey can load the style as a userscript. It's cross browser!

So for headers that are different colors, install the scripts/styles below. Many thanks to Gmjhowe for his generous contribution of mad photoshop skillz. More are coming soon. Check back with this forum topic for updates and more colors - I'll mark it each time with the date updated. The headers might be a little bit rough - if you don't like them, go to the second image entry and clear out the URL in parenthesis to get a colored header with no hand.

Red: (Coming soon)

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

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

NEW! 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

Black: (Coming soon)

Silver: (Coming soon)

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

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

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

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



Now the grey header isn't working right. I uninstall, and install, but it won't work. Help?

Delete the gray header style entirely and redownload it and then try reinstalling.

Okay, I change the links to orange(to see if changing the links could work), now I can't change it back from orange.

 Why not? I would attempt again. Worst case scenario, delete your custom one and reapply one of mine and start over. If I were you I would open one of them and remove the specifics, and save it as a template (again, all stuff I plan on doing, but since you're interested right now...).

I am interested, but it never quite works out the way I want it to. For example, to change youtube, I tried to make the top a picture of my own off of my computer, but it just grey, the bottom part white, and the links black(I didn't change the link color though, so that's obvious)

My code is pretty specific since it is lightly modified source code for instructables itself. I would view youtube's source and deal with it rather than trying to tweak this specific project to work - it's very touchy, sometimes for no apparent reason.

Two things:
First of all, thanks for posting this. Now everything is more...Grey I guess. Now it shouldn't hurt my eyes at night.
Second, I think I encountered a problem, and a suggestion. All links work, however, you can't tell if a link is there unless you hover or click it. Is it possible that you can change the color or links to black, or something, or another corresponding color?(Dark red for red, white for yellow, or a dark yellow, dark yellow for blue, ect...)

You're welcome. :)Ah, yes, I meant to fix that as well. It's very possible; just go to the script source and find the line containing the link's color (I don't remember specifically where it is, but it should be a very short script and not hard to find). Change to anything. This is added to my list of things to do in the next release.

I figured it out
Tools-add ons-Stylish-Edit
Then you go to the part with the link color and change the code.
Thanks for you help.

Any idea when black is coming?(Not to rush you guys.)
Also, how do you(Gmjhowe?) do this? Like, if I wan't to make a color only I had, how could I do that?

Ah, yes, I should finish this. I will release it...as soon as possible. :D<br /><br /><br /><br />You download the header file and change the color where it is orange to whatever you wish in an image editor. You also need to change the orange bar that is used to the correct color. (It's really self-evident what I mean if you look at any page's source code and source images.) Then you upload it to any hosting site, and change the basic script I have provided accordingly. Any of them will do. This is probably confusing, and I will post full instructions on how to make your own styles hopefully quite soon. :)<br type="_moz" />

Green is ... unnatural.


There are other colors! Blue, purple, gray, invisible, and lots more coming soon.

Invisible isn't a color, its a lack of which...

Nope, sorry, Instructables was, is and always will be ORANGE.

Pass me a cloth, I think my ego just burst...

Eww...ego juice all over the place! Get this man an ego transplant, stat!

>staggers all over website, spurting essential fluids into several unfortunate crevices<


We're losing him! Quickly, to the trophy store! We have to patch that up!

>desperately jams Burning Questions bumper sticker over gaping wound<

You've got like thirty, so you should be fine. :D

Actually, my second is in the post, and I put my first away safe, so I lost it.

Hah, I was answering BQ before they thought of bemper stickers.

My God, Kiteman! You're wasting your Precious Bodily Fluids!

LoL. It's chlorophyll! Well, Chlorophyll is technically blue and green, but blue is much more less dominant, and... Hey, you're the teacher Kiteman, you should say it... -RoAr

Unnatural for Instructables - I've been looking at this particular shade of orange for three years now. If it changed, it would be like one of my children getting a tattoo - all I would be able to see would be... the new colour.(shudder)

Dang, three years? I've barely gotten one... I think? I suppose I still like this shade or hue of orange... but still... just the fact that I can change it gives me a sense of power... (refer to C&H; strip.) -RoAr

Yay! Kiteman goodness! Why isn't he working at instructables yet?

oh look,little pictures of kiteman!

I did notice something however: when I put a link into a post when using one of the headers.....it doesn't appear "red" or any color actually.

You're trying to edit the style to change the colors? You have to upload an edited file to a hosting site and put that link in the header field, the one marked top left x-repeat or something like that. Ditto for the hand graphic.

I just downloaded and installed the GM script for Green, with hand, and it works, except that when I post a link, it does not show as red (at least, not on my machine)......Like this is not red... unless I disable GM.

Ah, I see. Yeah, this is a known bug. I'll fix it in the next release - shouldn't be too terribly long before that. :-)

Ok, I tried the Kiteman one.....then I deleted it and tried the blue then the green one.....but the Kiteman one will not go away.... :-(

I get the orange back when I uncheck the Green script with hand....but if I click it, I get back the no header condition.

That's strange...I tested it and it works perfectly for me.

Ah, I think I know the problem, please check to make sure that all scripts are unchecked, then check the one you want.

I started with Just the Kiteman one, and it simply blanked out the header. I have uninstalled Stylish, and will try with my Gmonkey

I see why it isn't working in GM, with the new install, my shortcut no longer goes to the current version grrrr and although I have a script downloaded, the new version can't find it....because it is out there, somewhere, on that 40 gb HD.....as soon as I remember how to install the script on GM, and get the two together ;-) I should have it working....but so far, no dice...