Tricking Out Firefox Part 2 – Transparent Twitter Home Page

by on Aug.25, 2009, under Firefox Extensions, Greasemonkey Scripts, Stylish Tweaks

Web 2.0 Graphics Bundle

In part 1 we covered customizing Firefox with a persona. You can also customize the appearance of any web site viewed in Firefox using the Stylish add-on that we’ll use in this post to make a transparent background for our Twitter home page. Part 3 will cover some of the many skins and themes available for Firefox.

Here’s a screenshot of my Twitter home page with the background image from jackrebel.com and a transparent background for the center of the page that we create with some custom CSS injected into the twitter page on the fly using Stylish. We also have to adjust a lot of the colors of various bits to work with a dark background. The sidebar has a hover effect. You can tune the opacity to your liking by changing the opacity numbers for the various elements, but bear in mind the text is made transparent also so too little opacity can be hard to read (click to enlarge):

Transparent Twitter Home Page

You can upload images to use as the background using the Twitter Settings/Design option in the page header. You can also choose solid background colors for the twitter content (tweets) and sidebar sections – choose colors that are similar to your background image for the best effect and choose a contrasting text color – most likely either black or white. You want the text to be readable against the background image.

Then you will need to install the Stylish add-on. It will ask to restart Firefox which you should do – it reloads any tabs you have open. Then install the Transparent Twitter Styles from Userstyles.org. There should be an install button for Firefox in the top right corner of that page, as well as ways to install in Chrome and Opera. There are also style tweaks for many other web sites available on their Site Styles page. Now reload the Twitter page and you should see a partially transparent background. The effect can be tweaked to your liking by modifying the CSS it uses. Right click on the Stylish S icon in the bottom right corner of the Firefox window and select Manage Styles…

Firefox Stylish Menu

This pops up the addon editor dialog with the Stylish User Styles option selected. Select the Transparent twitter style from the list and click on the edit button…

Firefox Stylish Editing Twitter Styles

to show the CSS that is injected into the twitter page to create the transparent effect. This is the standard code that works for most sites with a photo background and solid color message area and sidebar.

Firefox Stylish Editing Twitter Styles

You can change the CSS, either to adjust the opacities for the best effect with your background image and colors, or even make the twitter content and sidebar disappear completely unless you mouse over them. The CSS in the following dialog is what I used to create the first screenshot above. It uses a transparent background for the message area since my background is a color wash without any fine detail.

Firefox Stylish Editing Twitter Styles Hover Effect

Here is the CSS from the above screenshot:

/* code by shao */
/* modified by JackRebel.com for light text on a dark blue background image */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {

textarea#status {color: #FFFFFF !important}
.top-navigation {background-color: transparent !important}
.bar h3 label, #currently, #latest_status, #latest_text, h1#heading {color:#FFFFFF !important}
ol.statuses li:hover{color:#333366 !important}
#content{background-color:transparent !important;color:#FFFFFF !important;opacity:0.9 !important}
#status{background-color:transparent !important}
#side_base{opacity:0.6 !important}
#side_base:hover{opacity:0.9 !important}

Be Sociable, Share!

:, ,
11 comments for this entry:
  1. Eduardo Tapia

    Very cool, thanks!
    Would be great if Twitter itself had a transparency option for profiles or even better, let you mess with your own profile´s CSS.

  2. retgert

    I am using Firefox 2.0~(not the newer 3.x) and I have encountered a problem with the background when loading pages(in particular on yahoo! where text in the background overlaps text in the foreground when zooming). Is there a technique to display the background colors of foreground layers so that I can better read zoomed in text? Is this what the add-on is capable of doing?

  3. Jack

    Can you give the URL of an example?
    I assume background text is part of an image?
    If so you can change the background image to a solid color. The technique on the twitter page above uses a transparent background color on the text portions of the page so you can see the background image on the underlying div.

  4. kris

    how do you change the text collor in the css

  5. Ehsaan

    WOW! Thanx alot. It worked perfectly!!!!

  6. lucybieber

    um yeah it’s cool but i just saw that other people can’t see tht my twitter is transparent hummm why ??

  7. Jack

    This only changes how twitter looks in your browser – it doesn’t change how twitter appears to anyone else.
    For that you need to use Twitter’s customization capabilities.

  8. Michelle

    It doesn’t work 🙁

  9. dav

    How can we inject the code directly in twitter ?
    it doesn’t work in the bar …

    can it work with explorer ?

  10. BinhMucBe

    It doesn’t work at all. Can you give us the Url to have a look please?
    How can we creat borders for twitter?

Leave a Reply

Search JackRebel.com

Find anything we have ever posted:

If you still cannot find what you are looking for, please contact us and we will hook you up.

Jack Rebel's Friends