747Views138Replies

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

Tags:woot

Discussions

0
None
Rock Soldier

9 years ago

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

0
None
Lithium RainRock Soldier

Reply 9 years ago

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

0
None
Rock Soldier

9 years ago

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

0
None
Lithium RainRock Soldier

Reply 9 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...).

0
None
Rock SoldierLithium Rain

Reply 9 years ago

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)

0
None
Lithium RainRock Soldier

Reply 9 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.

0
None
Rock Soldier

9 years ago

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

0
None
Lithium RainRock Soldier

Reply 9 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.

0
None
Rock SoldierLithium Rain

Reply 9 years ago

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.

0
None
Rock Soldier

9 years ago

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?

0
None
Lithium RainRock Soldier

Reply 9 years ago

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" />

0
None
Kiteman

10 years ago

Green is ... unnatural.

Sorry.

0
None
Lithium RainKiteman

Reply 10 years ago

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

0
None
bumpusLithium Rain

Reply 10 years ago

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

0
None
KitemanLithium Rain

Reply 10 years ago

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

0
None
KitemanLithium Rain

Reply 10 years ago

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

0
None
Lithium RainKiteman

Reply 10 years ago

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

0
None
KitemanLithium Rain

Reply 10 years ago

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

0
None
Lithium RainKiteman

Reply 10 years ago

=O

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

0
None
KitemanLithium Rain

Reply 10 years ago

>desperately jams Burning Questions bumper sticker over gaping wound<

0
None
Lithium RainKiteman

Reply 10 years ago

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

0
None
KitemanLithium Rain

Reply 10 years ago

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

0
None
KitemanLithium Rain

Reply 10 years ago

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

0
None
kelseymhKiteman

Reply 10 years ago

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

0
None
PKTraceurKiteman

Reply 10 years ago

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

0
None
KitemanPKTraceur

Reply 10 years ago

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)

0
None
PKTraceurKiteman

Reply 10 years ago

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

0
None
gimmelotsarobots

9 years ago

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

0
None
ReCreate

9 years ago

oh look,little pictures of kiteman!

0
None
Goodhart

9 years ago

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.

0
None
Lithium RainGoodhart

Reply 9 years ago

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.

0
None
GoodhartLithium Rain

Reply 9 years ago

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.

0
None
Lithium RainGoodhart

Reply 9 years ago

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. :-)

0
None
Goodhart

10 years ago

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.... :-(

0
None
GoodhartGoodhart

Reply 10 years ago

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.

0
None
Lithium RainGoodhart

Reply 10 years ago

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.

0
None
GoodhartLithium Rain

Reply 10 years ago

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

0
None
GoodhartLithium Rain

Reply 9 years ago

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