I’m quite content with using Identi.ca, a microblogging service that runs on top of the open source microblogging engine Laconica, where thankfully custom backgrounds are just not done (no patches please). On that other microblogging site however, you know the anti-freedom one, that’s most definitely not the case. Some folks have even build an entire business model around providing background design advice.
So to stop the madness once and for all I decided to take the law into my own hands and user customize the user customizations using Stylish (userContent.css is too unwieldy as you have to restart Firefox). All you have to do after installing Stylish is add the following user style (note that the !important bit is required to override the original author’s rules with those from the user stylesheet):
UPDATE: turns out users can could customize colors too so I added the necessary declarations to put an end to that to.
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("twitter.com") { /* Change the background image and color */ body { color: #333333 !important; background: #9AE4E8 url(http://assets2.twitter.com/images/bg.gif) no-repeat fixed left top !important; } /* Change the default font color */ body, ul#tabMenu li a, #side .section h1, #side .stat a, #side .stats a span.stats_count, #side div.section-header h1, #side div.user_icon a, #side div.user_icon a:hover, #side div.section-header h3.faq-header, ul.sidebar-menu li.active a, li.verified-profile a, #side .promotion a { color: #333333 !important; } /* Change the font color for most links */ a, #content tr.hentry:hover a, body#profile #content div.hentry:hover a, #side .stats a:hover span.stats_count, #side div.user_icon a:hover, li.verified-profile a:hover, #side .promotion .definition strong { color: #0084B4 !important; } /* Change the font color of the line containing the time of the notice and some other bits */ ol.statuses span.meta a, .hentry .meta a { color: #999999 !important; } /* The rest is for for the menu on the right */ #side_base { background-color: #DDFFCC !important; border-left: 1px solid #BDDCAD !important; } #side hr { background: #BDDCAD none repeat scroll 0 0 !important; } /* Headers in the side menu */ ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, #side div#custom_search.active, #side .promotion, .notify div { background-color: #EDFFE5 !important; } }
And you’ll end up with just a pretty cloud and the default theme colors :-)
UPDATE: turns out somebody else had already written another user style to achieve this. No problem though as it was fun to do this myself and I learned quite a bit in the process about using Stylish properly :-)