Change instructables from orange! - Update 3 2/18

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

Picture of Change instructables from orange! - Update 3 2/18
kiteibles.GIF
sort by: active | newest | oldest
1-10 of 138Next »
Now the grey header isn't working right. I uninstall, and install, but it won't work. Help?
Lithium Rain (author)  Rock Soldier7 years ago
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.
Lithium Rain (author)  Rock Soldier7 years ago
 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)
Lithium Rain (author)  Rock Soldier7 years ago
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...)
Lithium Rain (author)  Rock Soldier7 years ago
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.
Lithium Rain (author)  Rock Soldier7 years ago
 Exactly! Have fun with it. :)
1-10 of 138Next »