Navigate / search

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:

gwibber-theme-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.

Gerry Ilagan

Gerry Ilagan is into mobile apps and WordPress development at @speeqs. He loves to write about electronics, the Internet of Things, mobile phones, and #crazyideas.

Comments

Sbl
Reply

The copied theme (or the directory-name) under ~/.local/share/gwibber/ui/theme/ doesn’t appear in the theme selection at the preferences in gwibber. What’s wrong?

cairn
Reply

@Sbl – I had the same issue. Your user theme directory should be ~/.local/share/gwibber/ui/themes/ (“themes” not “theme”)

gerry
Reply

You’re welcome Abhiishek. 🙂

Leave a comment

name*

email* (not published)

website