Grow your CSS skills. Land your dream job.

Messing With Firefox’s View Source CSS File

Published by Chris Coyier

Firefox has a number of core CSS files that it uses to render web pages. Most of them are filled with sensible default values for all those pages out there which don't provide their own styling. For example, Firefox has its own CSS file just for forms called forms.css which gives form elements their special Firefox form look. This file differs from defaults in other browsers, hence the common need for CSS resets to yield cross browser consistency. But I digress.

I highly recommended NOT messing with most of these core CSS files. We are web designers, after all, and we really need to be viewing web pages in our browser the same way that everyone else is. If we go around messing with that, we have no common ground. There is, however, one that you can mess with that's not going to do you any harm can be good fun. That is Firefox's viewsource.css.

To get it at it (on a Mac), you'll have to open up the "Package" that is Firefox.app.

Once in there, you can open the folders Contents > MacOS > res.

You can find the viewsource.css file in here, and can edit it with any garden variety text editor. There is a big license block at the top of the file. I didn't see anything in the license which would prohibit altering this for your own purposes, but I'm not very good with all the legal stuff. I imagine that since Firefox is open source and all, and you aren't repackaging it and distributing it in any way, editing this in not a problem.

Before changing anything, I'd also recommend backing up a spare copy. Most just because you might do something wacky, get annoyed with it over time, and want to switch back to the default.

Here is how I messed with mine. Basically just made a special dark/cloudy background image for it and played with the colors:

*|*:root {
  background: url(viewsource-bg.jpg) top center no-repeat black;
}
#viewsource {
  font-family: -moz-fixed;
  font-weight: normal;
  color: white;
  white-space: pre;
}
#viewsource.wrap {
  white-space: pre-wrap;
}
pre {
  font: inherit;
  color: inherit;
  white-space: inherit; 
  margin: 0;
}
.start-tag {
 color: #ff5353;
 font-weight: bold;
}
.end-tag {
 color: #ff5353;
 font-weight: bold; 
}
.comment {
 color: #86d98f;
 font-style: italic;
}
.cdata {
 color: #CC0066;
}
.doctype {
 color: steelblue;
 font-style: italic;
}
.pi {
 color: orchid;
 font-style: italic;
}
.entity {
 color:#FF4500;
 font-weight: normal;
}
.text {
  font-weight: normal;
}
.attribute-name {
 color: white;
 font-weight: bold;
}
.attribute-value {
 color: lightblue;
 font-weight: normal;
}
.summary {
 display: block;
 background-color: #FFFFCC;
 width: 90%;
 border: solid;
 border-width: 1pt;
 font-family: sans-serif;
}
.popup {
  font-weight: normal;
}
.markupdeclaration {
 color: steelblue;
 font-style: italic;
}
.error, .error > .start-tag, .error > .end-tag,
.error > .comment, .error > .cdata, .error > .doctype,
.error > .pi, .error > .entity, .error > .attribute-name,
.error > .attribute-value {
  color: red;
  font-weight: bold;
}

That got me this:

Comments

  1. Permalink to comment#

    Wouw!

    Great trick!

    Thank you very much!!!

  2. jesse
    Permalink to comment#

    Ha! That’s pretty slick. Thanks for the tweek.

  3. Permalink to comment#

    Haha you’re crazy/bored

  4. Permalink to comment#

    Nice one Chris :D

  5. Permalink to comment#

    Cool Trick! Thanks!

  6. Permalink to comment#

    That’s cool stuff. I hope Chrome doesn’t overtake Firefox

  7. Justin
    Permalink to comment#

    How did you get the background image to show? I’ve tried everything but nothing works. I’ve even tried using your code with an image I created.

  8. Permalink to comment#

    @Justin: Not sure, just make sure image is in the same directory as CSS file, that the image is saved correctly and displaying properly (drag it onto a browser window to check). And make sure you set it to display at the “top”. A lot of code windows are super tall, so if you set it to center it might be way down the page.

  9. camilo vitorino
    Permalink to comment#

    great trick!
    for windowns, the file to this trick is:
    C:\Program Files\Mozilla Firefox\res\viewsource.css

  10. Permalink to comment#

    Good find, I’ll probably setup up my view to a black background now. :)

  11. Permalink to comment#

    Cool stuff! Us designer types love being different.

  12. Nice trick, thanks ;)

  13. anon
    Permalink to comment#

    Where is the link to viewsource-bg.jpg ?

  14. Permalink to comment#

    What I’d really like to know is how to get it to display using 4 spaces per tab instead of 8. Any thoughts?

  15. ek
    Permalink to comment#

    Has anyone tried this on a windows machine? I edited viewsource.css under Program Files\Mozilla Firefox\res but my changes didn’t take effect.

  16. Permalink to comment#

    Good trick. It is quite valuable when you are used to a certain style. Thanks

  17. cinemod
    Permalink to comment#

    Thats a good trick although nobody else will see it.

  18. Permalink to comment#

    Now if I can just get it to colour code my Javascript comments.
    // In green would look great!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".