Clock applets in the Xfce panel in Xubuntu 15.10

Both Xfce and Xubuntu have had new releases relatively lately. In a way or another, this has resulted in an issue with Xubuntu 15.10 release: the Orage clock doesn’t show a transparent background even if it is set to show one. (Upstream bug in Xfce: 11915.)

Don’t be afraid! Instead of using the Orage applet, you can use the DateTime and Clock applets to get a transparent background – and while they itself do not allow for changing the color of the text in the applet, you can work around that with a .gtkrc-2.0 file in your home directory. Here’s how.

Set up the applets

To set up the applets, simply add the DateTime and/or Clock applets to your panel. You can control the format in which the time/date is shown in the applet via their preference dialogs found from their right-click context menus.

Bear in mind, if you wish to have two different clocks in the panel, we will be using the regular panel foreground (text) color for DateTime (white for Greybird) and modify the text color for the Clock applet in the steps below.

Modify the Clock applet color

To modify the Clock applet foreground color, we will need to make a modification in a theming file. The best way to do this is to use the per-user config file, found at ~/.gtkrc-2.0. If you don’t have this file, simply create one.

The code snippet to modify the Clock applest text color is the following:

style "panel-clock-custom"
{
fg[NORMAL]    = "#66CCCC"
fg[PRELIGHT]    = "#66CCCC"
fg[ACTIVE]    = "#66CCCC"
text[NORMAL]    = "#66CCCC"
text[PRELIGHT]    = "#66CCCC"
text[ACTIVE]    = "#66CCCC"
}
widget "Xfce*Panel*clock*"    style "panel-clock-custom"

In this snippet, we’re setting the foreground color for all the Clock applets to a certain turquoise – #66CCCC – which compliments the 15.10 wallpaper well.

You can substitute this hex color value with any other that fits your needs.

The end result

For me, the end result looks like this:

Xfce panel clock applets

Have fun modifying your own!

A series of minor improvements for Ubuntu websites

In addition to using developer documentation (see A compact style for jQuery API documentation), people who work with communities need to use community and communication related websites. The bigger the community, the more tools it needs.

In a large community like Ubuntu, the amount of maintenance is big and the variety of platforms is huge. On top of these, many of the website aren’t directly maintained for the community (which has both good and bad sides). For these reasons, it’s sometimes hard and/or slow to get updates landed for the CSS files for the websites.

While workarounds aren’t ideal, at least we can fight the problematic styles with modern technology. That said, I’ve created a gist for a Stylish style that provides some minor improvements for some ubuntu.com websites.

Currently, the style brings the following improvements:

  • The last line of the chat is completely shown in Ubuntu Etherpad pads
  • Images and code blocks aren’t overlapping the content section in Planet Ubuntu, avoiding horizontal scrollbars fix is in production!
  • In the Ubuntu wiki, list items do not have a large bottom padding, making the lists more readable
  • Also in the wiki, tables are always full width but not too wide, keeping them aligned nicely

If you are constantly hitting other annoying styling issues on the Ubuntu websites, leave me a comment and I’ll see whether I can update the gist with a workaround. However, please report the bugs and issues for concerned maintaining parties as well, so we can stop using these workarounds as soon as possible. Thank you!

A compact style for jQuery API documentation

Everybody who develops websites – or pretty much anything – knows that you sometimes need to check something from the documentation. When you do that, you want to do that as quickly as possible, without distraction from the documentation itself.

One of the documentation I use more or less frequently is the jQuery API documentation. Unfortunately, while the website design is nice enough and works well for the non-documentation part, it is a bit distracting on the API documentation section and slows me down.

To fight this, I’ve written a simple Stylish style for api.jquery.com that makes the layout a bit more compact and thus gets less in the way. Again, the easiest way to get this Gist is the Raw button.

Enjoy!