Greasemonkey Scripts

Tricking Out Firefox Part 2 – Transparent Twitter Home Page

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

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}

Web 2.0 Graphics Bundle

11 Comments :, , more...

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