4 Oct 2007 tonyyarusso   » (Apprentice)

So by now everybody has heard of the countdown script for the Ubuntu 7.10 “Gutsy Gibbon” release. However, when I added it to my blog, I realized that the brown that gathers so much attention generally didn’t look that great next to the color I’m using at the moment for my blog theme. Matt and Gerry at Canonical kinda told me that people are free to modify and redistribute it as they see fit, so I can make it fit in better now. I also want to thank ader10 from #ubuntu-offtopic who helped with with Gimp tricks. You’ll see the result at the top of the sidebar on the right-hand side of my blog.

So, how can you do it yourself you ask? Well, first you’ll need to grab a copy of the images for modification. You can use the following script to do so; you will just need to create or download it to the directory you want the images to end up in, make it executable, and run it.

<span style="color: #808080; font-style: italic;">#!/bin/sh</span>
<span style="color: #007800;">max=</span><span style="color: #000000;">22</span>
<span style="color: #007800;">day=</span><span style="color: #007800;">$max</span>
<span style="color: #007800;">end=</span><span style="color: #000000;">0</span>
<span style="color: #007800;">jsfile=</span><span style="color: #ff0000;">"http://www.ubuntu.com/files/countdown/dist/display.js"</span>
<span style="color: #007800;">default=</span><span style="color: #ff0000;">"http://www.ubuntu.com/files/countdown/dist/710countdown_default.png"</span>
<span style="color: #007800;">base=</span><span style="color: #ff0000;">"http://www.ubuntu.com/files/countdown/dist/"</span>
<span style="color: #000000; font-weight: bold;">while</span> <span style="color: #7a0874; font-weight: bold;">[</span> <span style="color: #ff0000;">"$day"</span> -ge <span style="color: #ff0000;">"$end"</span> <span style="color: #7a0874; font-weight: bold;">]</span>
<span style="color: #000000; font-weight: bold;">do</span>
	<span style="color: #007800;">url=</span><span style="color: #007800;">$base</span><span style="color: #ff0000;">"710countdown_"</span><span style="color: #007800;">$day</span><span style="color: #ff0000;">"days.png"</span>
	<span style="color: #c20cb9; font-weight: bold;">wget</span> -q -nc <span style="color: #007800;">$url</span>
	<span style="color: #007800;">day=</span>$<span style="color: #7a0874; font-weight: bold;">(</span><span style="color: #7a0874; font-weight: bold;">(</span><span style="color: #007800;">$day</span> - <span style="color: #000000;">1</span><span style="color: #7a0874; font-weight: bold;">)</span><span style="color: #7a0874; font-weight: bold;">)</span>
<span style="color: #000000; font-weight: bold;">done</span>
<span style="color: #c20cb9; font-weight: bold;">wget</span> -q -nc <span style="color: #007800;">$default</span>
<span style="color: #c20cb9; font-weight: bold;">wget</span> -q -nc <span style="color: #007800;">$jsfile</span>
<span style="color: #7a0874; font-weight: bold;">exit</span> <span style="color: #000000;">0</span>

Once you have the image, you’ll probably want to change the background color primarily - at least that’s all I did. Here’s the process for doing that in Gimp:

  1. Open one of the the numbered images in Gimp.
  2. Convert the image to RGB, via Image > Mode > RGB in the menu.
  3. Select the “Magic Wand” tool from the utilities panel (”Select continuous regions”, also activated by “Z”), and ensure that it’s using the default settings of Mode:Replace, Antialiasing:Checked, Feather edges:Unchecked, Select transparent areas:Checked, Sample merged:Unchecked, Threshold:15.0.
  4. Click somewhere near the top of the image within the brown background region.
  5. Shift click on another part of the brown right next to the selected area from the previous step, but not yet included.
  6. Repeat step 5 until all of the background is selected. Note that you will need to do the areas inside of closed letters such as “b”, “o”, and “0″ separately.
  7. Open the “Change Foreground Colour” dialogue, and choose the color you would like to base your new gradient off of. It may be useful to skim through your stylesheet for the hexadecimal value if you’re just trying to match a colour you’ve already deployed on your web site. When you have one you like selected, hit OK.
  8. Open the “Layers” dialogue, via Dialogues > Layers.
  9. Create a new layer from your selection (it’s the icon of a page with a yellow star). Give it some sensible name of your choice. Leave the other options as they are and click OK.
  10. With your new layer still selected in the layers dialogue, press Ctrl-, (control and comma at the same time). This will fill in your color.
  11. In the layers dialogue, select “Colour” from the Mode dropdown menu (rather than the default, “Normal”).
  12. Save your image.
  13. Leaving that image and the layers dialogue open, open another one of the numbered images.
  14. Repeat step 2.
  15. Mouse over the first (completed) image to draw focus to its layers.
  16. Drag your created layer (look for the name you gave it in the list) onto the new image and drop. It should fill in the colour and gradient style for you.
  17. Save and close the second image.
  18. Repeat steps 13-17 for the remainder of the numbered images.
  19. Open the default (unnumbered) image.
  20. Repeat steps 2-12 on this one.
  21. Close all of your images and exit Gimp.
  22. Open display.js
  23. Change the base variable to match where you will be placing these items on your web site directory structure.
  24. If you changed the names of the images, edit the src line appropriately as well.
  25. Save this file and close.
  26. Upload all of the images (*.png) and the modified display.js file to your web server in the path you specified for ‘base’.
  27. Add the code snippet like you see on http://www.ubuntu.com/getubuntu/countdown to the appropriate part of your web page code, but replacing “http://www.ubuntu.com/files/countdown/dist/” with the path you used for ‘base’ in both instances.

You’re all set! You could of course change other colours and things as well, but I’m guessing just the background will be the most common customization.

Share This


Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!