Creating your own Gwibber theme

One of the social sites I like is twitter.com. I’ve heard about identi.ca but really haven’t tried it yet. Recently, I came across a twitter client that runs on Ubuntu that I liked a lot. It’s called Gwibber. It’s actually not just a Twitter client but also supports identi.ca, laconi.ca, digg, ping.fm, facebook and some other stuff.

It’s very easy to use and can handle multiple accounts so I’d probably try out identi.ca now that I use Gwibber. One of the things I like about Gwibber is that it lets you have your own customized theme. If you know basic HTML and CSS, it’s actually easy to customize.

The easiest way to make a custom Gwibber theme is to actually copy an existing theme into the ~/.local/share/gwibber/ui/theme directory of your home directory. You can find several examples of Gwibber themes under the /usr/share/gwibber/ui/themes/ directory.

For example you can copy the default Gwibber theme to a theme called “mytheme” by doing:

cp -av /usr/share/gwibber/ui/themes/default ~/.local/share/gwibber/ui/theme/

After copying the files, what you need to edit is the theme.html file in your newly created mytheme directory. Here’s a sample content of the file:

The look and feel of your tweets are controlled by the CSS settings inside the file. Here’s several familiar tags to help you get started on customizing your Gwibber theme:

body – controls the whole window client screen under gwibber. You can change things such as backgound, even setup your own background image, even the color and size of your fonts.

a – the a tags control the links. In twitter twits, these can be those tinyurl links you find in the messages.

.message – controls the way the actually messages will be rendered

.time / .time a – for the time tags in your twits

.title – is for the title text for your twits.

.imgbox – for the photos/images. You can even put some fancy stuff like reflections because gwibber uses the Webkit engine to render the theme

Here’s the gwibber theme I did for myself. You can download it from here.