If you're tired of giving up half your browser window real estate to the greedy twitter web UI here's a nifty hack that puts you back in control of your local css.
First install the Stylish extension or plugin.
- for Chrome/Chromium
- for Firefox
(User Styles will show up on add-ons, haven't test this on firefox yet)</ul>
For Safari users here's a way to customize your css, and on Opera you can leverage user scripts.
*update* After installing the Stylish addon or greasemonkey scripts here's a one click install for firefox users.
Firefox friendly css code:
@-moz-document url-prefix('http://twitter.com/') {
div.dashboard { max-width: 255px !important;
min-width: 230px !important}
div.your-activity { float: none !important;
width: auto !important; }
div.main-content { width: 780px !important; }
div.latest-tweet .tweet-row { height: auto !important;
width: 200px !important; }
div.dashboard .footer { font-size: 8px !important }
}
For Chrome/Chromium users you can grab this css snippet:
.main-content {
-moz-border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 3px 4px #999999;
background:none repeat scroll 0 0 #FFFFFF;
display:inline-block;
float:left;
height:100%;
min-height:700px;
position:relative;
width:75%;
z-index:4;
}
.stream .new-tweets-bar {
-moz-border-radius:3px 3px 3px 3px;
background:none repeat scroll 0 0 #E3F1FA;
border:1px solid #C6E4F2;
cursor:pointer;
display:block;
font-size:13px;
margin:10px 15px;
padding:5px 1px;
text-align:center;
text-shadow:0 1px 0 #FFFFFF;
z-index:2;
}
#message-drawer .message .message-inside {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
background:none repeat scroll 0 0 #FFFFFF;
display:inline-block;
font-size:13px;
min-width:100px;
padding:8px 12px 8px 16px;
}
.dashboard{
min-width:100px;
max-width:auto;
width:20%;
position:relative;
padding:12px 20px;
overflow:hidden;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
border-top-right-radius:5px;
}
Finally in your plugin/extension Stylish options you'll add a new style. Mine's called twitter web. You paste the css above into the style box, and then change the Specify button to "URLs on the domain" and enter twitter.com. Save the change and reload your twitter.com page to see the results. You can tweak the css however you like by going back and forth and inspecting the twitter styles and adding your own customized views to the Stylish code block. This same method can be applied to any site.
Related Article:
Designer get's a job at ZenDesk for sharp review of Twitter web UI.