I use Gwibber to keep up with the various micro-blogging (Twitter, Facebook updates, identi.ca etc) services and having just installed Ubuntu 11.04 ‘Natty Narwhal’ (which includes Gwibber by default) I thought now is a good time to work on some themes. The supplied themes – ‘ubuntu’ and ‘default’ plus those available in the gwibber-themes package – are good but I found they didn’t contain exactly what I needed so have now been creating some of my own that also integrate with the UI settings.
Here’s one I came up with using the ‘default’ theme to work from. I made changes in the CSS to have rounding and drop shadows for the avatar images, message bubbles and to change the formatting a bit for colouring. Most of the supplied themes seem to have “account colouring” in the theme, i.e. when you have multiple accounts with a different colour attached to them, the theme will use it in the display. This can be useful or sometimes I am using Gwibber just to aggregate and read messages rather than post and reply so am not concerned about the account colouring and wanted it all to have a uniform colour (that fits in with the desktop theme).
Here’s how it appears under the Radiance theme…
… and the Ambiance theme
If a different theme is selected (this is Clearlooks with some custom blue colours) it will pick up the theme colours accordingly.
This is with multiple streams, e.g. for twitter and facebook.
In this version the borders of the messages take on the colour associated with the account (as it is done in some of the supplied themes).
Multiple streams with account colouring
The code I used for these is mostly CSS and I’ve included it below. Generally it can be done by making a copy of the ‘default’ theme folder (in /usr/share/gwibber/ui/themes) to a new folder with the name required e.g. ‘MyTheme’. I’ve overridden the template.mako and added main.css to the folder (with overridden styles compared to the defaults).
In main.css:
* {
color: ${theme['fg'].hex};
}body
{
background-color: ${theme['bg'].hex};
margin: 0px;
}.imgbox {
width: 38px;
height: 38px;
margin-right: 10px;
margin-top: 0px;
-webkit-border-radius: 3px;
border: 1px ${theme['fg'].darker(.6).hex} solid;
-webkit-box-shadow: 2px 2px 5px ${theme['fg'].darker(.4).hex};
}.thumbnails img {
-webkit-border-radius: 3px;
border: 1px solid ${theme['fg'].darker(.6).hex};
-webkit-box-shadow: 2px 2px 5px ${theme['fg'].darker(.4).hex};
}.basemsg .message {
-webkit-border-radius: 0px;
margin-bottom: 6px;
margin-top: 1px;
margin-right: 6px;
}.title {
color: ${theme['fg'].darker(.8).hex};
}.time
{
color: ${theme["bg_selected"].darker(.65).hex};
}
In template.mako I changed the top section as follows for the non-account-coloured theme -
<%namespace name=”base” file=”base.mako”>
<%def name=”msgstyle(data)”>
background: -webkit-gradient(linear, left top, left bottom,
from(${theme["bg"].hex}),
to(${theme["bg"].darker(.9).hex}));border: 1px solid ${theme['fg'].hex};
-webkit-border-radius: 8px;
-webkit-box-shadow: 2px 2px 5px ${theme['fg'].darker(.4).hex};</%def>
</%namespace>
or for the account-coloured one:
<%namespace name=”base” file=”base.mako”>
<%def name=”msgstyle(data)”>
background: -webkit-gradient(linear, left top, left bottom,
from(${theme["bg"].hex}),
to(${theme["bg"].darker(.9).hex}));border: 1px solid ${data['color'].hex};
-webkit-border-radius: 8px;
-webkit-box-shadow: 2px 2px 5px ${theme['fg'].darker(.4).hex};</%def>
</%namespace>
and added the call to main.css at the bottom
<style>
<%include file=”css.mako” />
<%include file=”defaultcss.mako” />
<%include file=”main.css” />
</style>
