Watch of the Web Warlocks

You can add any kind of custom background to the ZYX Analog Clock widget, for even further customization. If you're familiar with CSS, you'll find it really easy. If not, we hope it'll give you no big trouble...

For the CSS-familiar, here's the short version: add whatever you want to the .zyx_analog_clock div.widget_content class. Inside, it has the <object> tag for the Flash file.

Ye Olde Ritual To Style Ye Clocke

This is the process to style the widget, explained with a bit more of detail.

First and foremost, you'll need a image to put as background. Use the GIMP, Inkscape, Photoshop, whatever. You should then upload that image to your theme folder — or any subfolder within it, that doesn't matter. Let's assume you call it clock_bg.png, because you want to remember that it's the clock_b(ack)g(round), and you wanted to use the PNG file format alpha feature, to allow it for blending with the sidebar background. And, also, let's assume that you keep your image assets all tidy and clean in the images subfolder. (Hey, that's quite a bunch of things, isn't it? Well, you don't need to do all of this stuff, but if you wanted, you see you can.)

The Stylandum Horologium Spell

Open your theme style.css file and write the following code (it's the spell to style the widget):

.zyx_analog_clock div.widget_content{
	text-align: center;
	background-image: url('images/clock_bg.png');
	background-position: 50% 50%;
}

This will cause the following:

1. The clock will be centered in the sidebar
2. The clock will display the background image selected
3. The background image will be centered horizontally and vertically (to allow room for resizing, for instance, for users with different resolutions and flexible, liquid, fluid or overally variable width sidebars)

So, if we translated it to a more human-readable magic invocation, it would be something like:

Hear me, hear me, all the analog clock widgets that be! Thou shalt center thyselves in the sidebar, not to near, not too far; thou shalt put my image behind thee, for anyone wishing to see; and shalt center that image too, for the power of the bar and the power of the foo! Hark, hark! Do my bidding stark!

Let's see which part does what.

.zyx_analog_clock div.widget_content

All the ZYX Analog Clock widgets (or, to speak more properly, all of its widget instances) are displayed with the zyx_analog_clock class. The tag for the widget, though, is theme-dependant: some use <li> but others do use <div>s, like the Proteus theme. That's why we don't assign the style to a tag, just the class. The widget creates a wrapper div for the Flash clock, which has the classes widget_content wrap (btw, the same used, for instance, in the ZYX Term Meta widgets). This allows you to create richer formats than if there was just the object tag.

text-align: center;

This is the bit which center-aligns the widget horizontally. Remember that, quite counter-intuitively, the text-align property not only affects the text elements inside the element.

background-image: url('images/clock_bg.png');

Do you recognize this file? Yes, this is the part where our image is set as background. The path inside url() can be either absolute or relative to the theme path.

background-position: 50% 50%;

And finally, this is the bit that sets the position for our custom background. Here we tell the browser to display it perfectly centered, both horizontally and vertically.

Some final notes

If you want the sphere to be see-through (because you want not only a frame for the clock, but also a background for it), remember to lower the opacity of the sphere in the widget form.

Adjustments of pixel precision can be a bit tricky on some image programs. Maybe you'll need to fix everything a pixel up or down if you want an exact fit. Bear this in mind when doing your image.