Wednesday, March 16, 2005

Apply CSS to Specific Sites

Web developers can serve "author stylesheets." If you as visitor are not happy with those, you can apply a user stylesheet; user stylesheets are skins for web sites. However, a typical browser won't allow you to add a user stylesheet on a per-site basis (once you decide to go for a style, it will be applied to all sites).

The URId extension for Firefox changes all this. Once installed, you can apply a CSS on a per-URL basis by locating your Chrome folder's "userContent.css". Gmail (and many other tools & sites) may never look the same again.

Sample: Writing a "Butler"

Of course, you may also replace the Google logo with an Ask Jeeves butler logo and censor all Google ads. Apply the following CSS (you need to close all Firefox windows and restart):

body#www-google-com img[src="/intl/en/images/logo.gif"],
body#www-google-com img[src="/images/logo_sm.gif"]
{
    display: none !important;
}

body#www-google-com
{
    background-image: url(http://blog.outer-court.com/files/jeeves-logo.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 50% 10px !important;
    margin-top: 180px !important;
}

body#www-google-com #aw1,
body#www-google-com #aw2,
body#www-google-com #aw3,
body#www-google-com #aw4
{
    background-color: #000 !important;
    color: #000 !important;
}

The result will look like this – shown here is Google.com:

Apply CSS to Specific Sit ... by Philipp Lenssen | Comments (0)

>> More posts

Advertisement