Instructables

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.

Changelog:

* 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

FAQ:

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
blueheader.gif
Purplehand.gif
NatNoBrains3 years ago
I just got greasemonkey for IE, I don't understand how to download the themes!
Lithium Rain (author)  NatNoBrains3 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?
Chromatica4 years ago
Chrome please
Lithium Rain (author)  Chromatica4 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)  Chromatica4 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)  Chromatica4 years ago
Awesome! I look forward to it. :)
It's going to take a while because the new Paint.net is mainly for Windows 7. So it's very slow and usually crashes.:-(
Lithium Rain (author)  Chromatica4 years ago
:( Tried the Gimp?
I guess that is the only option...
But Paint.NET and Gimp is like PC and Mac for me...
Paint.NET is my favorite because it is a little more user friendly (but still like PC) ...
Cari Cooney agrees

"On a personal note, I enjoyed learning how to use Paint.NET much more than GIMP. The layout was much easier for me to navigate, and personally, the more time I can save not having to go through tutorials, the better. Speaking of tutorials, when I did need them, Paint.NET directed me to them faster than GIMP. I also appreciated the program knowing where I kept my picture files on my computer. I didn't have to dig through file folders because it just pulled them right up for me when I clicked upload photo."

See the rest: www.connectedphotographer.com/issues/issue200710/00002067001.html
 Alright, finally got a new Laptop (yay) heres what I mean. I did make this myself, by the way.
Brushed metal.jpg
 It looked a lot better before Ibles toned down the quality.
 Come on have you seen it!!
Lithium Rain (author)  Chromatica3 years ago
FYI, yes, I've seen it - if I ever get around to redoing this I'll give it a shot. ;)
Two quick questions.
How can I change the text and link color in the black theme? I can't seem to figure it out.
Also, (for the black theme) is it possible to delete, or hide the instructables hand logo and leave the empty space black? I manged it for the grey theme, but I forgot how.
Thanks
Lithium Rain (author)  Rock Soldier4 years ago
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.

Should be the same for text, except of course you have to search for "text". IIRC it's under "text color".


And yes, just erase the line that has "no repeat". If that doesn't work, just make the URL in that line blank.

Thanks for the help. My only problem is, I can't find the part to change the text color. This is what I found that might be it, although I'm sure because when I change the code to my desired color, it didn't work.

button,

.button_over,

.buttonSmall,

.buttonSmall_over,

.buttonSmallBlue,

.buttonSmallBlue_over,

.buttonLarge,

.buttonLarge_over {

    font-size: 11px;

    padding:2px 10px;

    font-weight: bold;

    text-decoration:none;

    text-align: center;

    color#857561;

    cursor:pointer;

    background:#FDDEB0 url(/static/img/buttonBG.gif) repeat-x;

    border:1px solid #c2bab0; /*darker */

    white-space: nowrap;

}

(Please excuse any spelling mistakes. I couldn't see everything I was spelling (which is why I need to change the text color.) Thanks.
Lithium Rain (author)  Rock Soldier4 years ago
I'm afraid not. As far as I know although, that's only the case for the black stylish. For the gray one, I remember having no problem changing the font color.
Lithium Rain (author)  Rock Soldier4 years ago
That's very odd. I'll look into it. 
Thanks.
AAlittle to white for my taste(I can't even see what I'm typing)
ummm.....bmp
Lithium Rain (author)  Rock Soldier4 years ago
Too black you mean? (There are other colors.)
No, too white. The text is white, and so is the background...You should figure out what I mean...
Lithium Rain (author)  Rock Soldier4 years ago
Well, the text on the black header *has* to be white (or at least some lightish color) - else you couldn't see it. And by the white background, I can only assume you mean the background on all pages that is white whether or not you install one of my styles. That can certainly be changed, but you have to make the text a contrasting color, otherwise it's unreadable.

-_- You should communicate better instead of expecting me to figure out what you mean...
I posted a picture. If you clicked it and saw the (looking) lack of text on the white parts, you should have figured out what I meant pretty easily.
Lithium Rain (author)  Rock Soldier4 years ago
I find your tone irritating. I appreciate bug reports, but it is not very polite to respond in this manner, especially when I do this in my spare time for no reimbursement (ie, you are not paying me). In any event, I will rectify this in the next release.
Sorry, but don't you think you should test these before you release them?
Lithium Rain (author)  Rock Soldier4 years ago
I tested them extensively. I am not Superman. Stuff slips through. Lots of code has bugs - that's why I asked for people to report any they found.

>Mutters to self< No good deed goes unpunished...
Extensively as in you just reread the code, or as in I do not know what extensively means?
Lithium Rain (author)  Rock Soldier4 years ago
Extensively as in both Firefox and IE (ptooie!) on 3 different OSs, every theme, multiple times. For your edification, "extensively" means "a lot".

Also, they have these nifty things known as "search engines" now. You should really consider using one once in awhile.
There is also a thing as in being nice, and not punishing people for asking questions.
.  ROFLMAO  You certainly will go a loooonnnngggggg way to make yourself look like a jerk. I must admit that you are doing an excellent job. Sorry for laughing, but you are a funny jerk. But still a jerk.
(Since I can't reply to your comment with the video)
Why am I a jerk for not knowing if your comment is a compliment or not?
I honestly don't know if I should take that as a compliment... Thanks, I think...Maybe.
.  What we've got here is failure to communicate

.
jerk
Hilarious
She's Right. She takes time out of her day to make our lives more colorful and customizable. You should be thanking her and posting your bug reports clearly and nicely.
Have the same Mozilla skin
Chromatica4 years ago
The black has bugs.
Sorry about so many comments
Lithium Rain (author)  Chromatica4 years ago
What bugs? Which browser and OS?

No problem. Glad you like it. :)
Im not sure if its a bug but the comment box is black, the text should at least be white.
 It is in fact not a bug,  I tried to mention it earlier but i guess it was over glanced
It does have to do with the programing of the stylish code
Lithium Rain (author)  Chicken22094 years ago
Apologies for missing it - I must indeed have overlooked it (I never ignore bug reports; thank you very much for reporting it. :) ) I'm not sure offhand what would cause that...in fact, that's quite baffling. Since it wasn't a problem with the old editor, I'm guessing it has something to do with the new one. I'll take a look at it this weekend and see if I can fix it.
 I dont remember exactly since its been a while since I used my desktop, but Im pretty sure it recognizes the new editor as a separate window so it repeats the header inside it, not sure how you would go about fixing it
Lithium Rain (author)  Chicken22094 years ago
If that's the case it shouldn't be too too hard to fix - the tricky part is where that is set, if it's in the html or if it's called later when you actually click to comment.
I figured. Change one setting change all that are affected.
Lithium Rain (author)  Chromatica4 years ago
That is strange. I'm not sure what would cause this behavior. I'll try to take a look at it over the weekend and see if I can straighten it out. Thanks for reporting this bug, and please continue to report any issues. :)
Chromatica4 years ago
AMAZING!!!
Wish I found this sooner.
Lithium Rain (author)  Chromatica4 years ago
:D Thank you! Comments like these warm the developer's heart and keep fresh styles in the works...
Chromatica4 years ago
Good job Adrian.
Lithium Rain (author)  Chromatica4 years ago
Thank you! :)
DJ Radio4 years ago
Can you do one for me?  Just like you did for Kiteman or Eric?
Chromatica4 years ago
(RED)
mhkabir5 years ago
YAY!!
wenpherd5 years ago
hehe i had an idea like this but blue.
Lithium Rain (author)  wenpherd5 years ago
Blue is available! Green is just a sample screenshot.
Chicken22095 years ago
Links are completely wrong for black theme
but if you need an example my Halloween theme isnt that bad...
even though both seem to turn the new comment box black
Lithium Rain (author)  Chicken22095 years ago
Mm, sorry. You can change them, you know.
=SMART=5 years ago
that looks really cool, i think i would have it blue though
Lithium Rain (author)  =SMART=5 years ago
Blue is available! Green is just an example screenshot.
But it's not a true 'Ibles experience without the orange :-P jk

I love the look with the different colors. It would be nice if the 'Ibles team could give you the ability to change the site color in your preferences (maybe just for pro accounts.....)
kelseymh5 years ago
Doesn't this deserve to be a full-on I'ble?  That forum topic is getting pretty long...
Lithium Rain (author)  kelseymh5 years ago
Hm. That is a very good point! I just wasn't sure it was "worthy" of one. It would be a lot easier to read, though. I'll switch it over. :D
Very fancy, lady! You did a great job - it looks really clean!

I admit I don't think I can change the color though - I'd probably freak out if I clicked here and things were suddenly a different color, even if I had done it myself. :P
Lithium Rain (author)  jessyratfink5 years ago
Thank you very much!

Hehehehehe. :D (Hey, I'm always up for a new one - anything you don't like about the current interface? :D )