SoCalChris's Journal: How to change Slashdot's (And other sites) color scheme

Tired of Slashdot's weird colors, and how each section is in a different color scheme? If you're using Mozilla or Firebird, you can change this by modifying your userContent.css file.

The sample I attached changes all of the section colors to black background for titles, with a light grey background for other areas. You can easily customize it based on what you want to see, just change the RGB color values.

Add the following to your userContent.css file. If you're unsure how to do that, check out the instructions, here.

If anyone knows how to replace images (Like the specialized Slash title in the Apple & Games sections), or make the link color change, please post a comment and let me know. This just shows the flexibility of Mozilla, and open source products in general.

-------------

/* Make Slashdot look decent
* By Chris Wilson
* Append to your userContent.css file, and restart your browser to take effect
*Sections*/
/*Main*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
/*Apache*/
*[bgcolor*="#660066"] {background-color: #000000 !important;}
*[color*="#660066"] {color: #000000 !important;}
*[bgcolor*="#cc6666"] {background-color: #d3d3d3 !important;}
*[color*="#cc6666"] {color: #d3d3d3 !important;}
/*Apple*/
*[background*="stripe_background.gif"] {background-image: url(http://www.hanstkd.com/images/belts/white.jpg) !important; background-color: #d3d3d3 !important}
*[background*="slashbar.gif"] {background-image: url(showNothing.gif) !important;}
*[background*="apslc.gif"] {background-image: url(showNothing.gif) !important; background-color: #000000 !important;}
/* - For the top left Slashdot title
img[src*="games-title.gif"] {img-src: url(http://images.slashdot.org/title.gif) !important;}*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
/*Articles - Same as main page, for now*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*Ask*/
*[bgcolor*="#666666"] {background-color: #000000 !important;}
*[color*="#666666"] {color: #000000 !important;}
*[bgcolor*="#CCCCCC"] {background-color: #d3d3d3 !important;}
*[color*="#CCCCCC"] {color: #d3d3d3 !important;}
/*Books - Same as main page, for now*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*BSD*/
*[bgcolor*="#990000"] {background-color: #000000 !important;}
*[color*="#990000"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*Developers*/
*[bgcolor*="#336699"] {background-color: #000000 !important;}
*[color*="#336699"] {color: #000000 !important;}
*[bgcolor*="#e0e0e0"] {background-color: #d3d3d3 !important;}
*[color*="#e0e0e0"] {color: #d3d3d3 !important;}
/*Features - Same as main page, for now*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*Games*/
*[background*="games-slashbar.gif"] {background-image: url(showNothing.gif) !important;}
*[background*="games-slc.gif"] {background-image: url(showNothing.gif) !important; background-color: #000000 !important;}
/* - For the top left Slashdot title
img[src*="games-title.gif"] {img-src: url(http://images.slashdot.org/title.gif) !important;}*/
*[bgcolor*="#3300cc"] {background-color: #000000 !important;}
*[color*="#3300cc"] {color: #000000 !important;}
/*Interviews - Same as main page, for now*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*Polls - Same as main page, for now*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*Science - Same as main page, for now*/
*[bgcolor*="#006666"] {background-color: #000000 !important;}
*[color*="#006666"] {color: #000000 !important;}
*[bgcolor*="#cccccc"] {background-color: #d3d3d3 !important;}
*[color*="#cccccc"] {color: #d3d3d3 !important;}
/*YRO*/
*[bgcolor*="#663300"] {background-color: #000000 !important;}
*[color*="#663300"] {color: #000000 !important;}
a:link[link="#663300"] {color: #006666 !important;}
*[bgcolor*="#CCCC66"] {background-color: #d3d3d3 !important;}
*[color*="#CCCC66"] {color: #d3d3d3 !importa

-------------

Any comments or ideas are welcome.

formatting...

[jtheory]

I think I'll be able to figure it out, but I think the formatting of your CSS additions got screwed up.

What are all those break tags? And at first glance it looks like *everything* is commented out -- obviously if I leave it that way it won't change anything at all, but it's not clear which bits to uncomment.

Useful tip if this works, though!

Re:formatting...

[SoCalChris]

What are all those break tags?

I had put those in so /. would display the lines correctly. I didn't realize the ecode tage would take care of linebreaks automatically. I removed them now, so it should be a little clearer.

more

[jtheory]

Okay, I realized the *s were mostly pattern-matching, not part of the comment notation.

I'm still concerned that the changes you're making seem to apply to any website, not just /. and I'm still researching that problem.

By the way, here's another userContent.css file that you might find useful as an example:

http://mywebpages.comcast.net/alanjstr1/mozilla/ us erContent.css

Here's what looks like a way to change an image:
img[src="http://www.mozillazine.org/5years /image/m z5years1998-2003.png"]{display:none;}

(That's hiding the image, but I couldn't you just set the source instead?)

Re:more

[SoCalChris]

I'm still concerned that the changes you're making seem to apply to any website, not just /. and I'm still researching that problem.

Yeah, the way this css is, it will apply to all websites. I'm not sure if it is possible to apply it to only certain domains? Also, the /. colors are pretty unique, so it shouldn't be a big problem for other sites. I haven't noticed any sites displaying wrong though.