339Views69Replies

Author Options:

Change instructables header from orange! Update 4 Answered

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

Discussions

I just got greasemonkey for IE, I don't understand how to download the themes!

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.

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)

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.

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

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.

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

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.

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.

AAlittle to white for my taste(I can't even see what I'm typing)

ummm.....bmp

No, too white. The text is white, and so is the background...You should figure out what I mean...

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.

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?

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?

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.

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.

The black has bugs.
Sorry about so many comments

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

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

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.