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.
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.
Lomography Konstructor - World's First 35mm DIY SLR
Office Warfare Book on Sale Now
List of Upcoming Contests (updated 6/6)
Spanish translations of Instructables / Instructables traducidos al Espanol
JULY 2013 Build Night with SUGRU
High-current, electronic sword-fighting, fancy drink pouring, and more @ Makers Local 256 Build Night!
New Instructables Books for 2013
Souped Up: Projects to Make Everything Better [Book]
Backyard Rockets Book on Sale Now
Visit Our Store »
Go Pro Today »
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
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
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.
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.
Wish I found this sooner.
Sorry about so many comments
No problem. Glad you like it. :)
It does have to do with the programing of the stylish code
-_- You should communicate better instead of expecting me to figure out what you mean...
>Mutters to self< No good deed goes unpunished...
Also, they have these nifty things known as "search engines" now. You should really consider using one once in awhile.
Why am I a jerk for not knowing if your comment is a compliment or not?
.
. jerk
but if you need an example my Halloween theme isnt that bad...
even though both seem to turn the new comment box black
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.....)
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
Hehehehehe. :D (Hey, I'm always up for a new one - anything you don't like about the current interface? :D )