Orchid XP v8 wrote:

> http://wordpress.org/extend/themes/piano-black
> 
> Now, if I can just figure out how it works...

The way it works is rather surprising.

There's a 5x5 pixel image that consists of grey with a black stripe 
across it. This is tiled to form the stripey background.

There is an image named "top". This is the black slab with the rounded 
corners and the drop shadow. The bit that the page title appears on top of.

Yes, that's right. Somehow they put text ON TOP OF an image. Not only 
that, but somehow they put one image ON TOP OF another image, WITH 
TRANSPARENCY. I have no idea how that's possible.

There's also an image that's blue in the center, and fades to 
transparent towards the edges. This is somehow displayed ON TOP OF the 
background image to generate the blue glow at the top of the page.

Then there's an image that's 2 pixels tall, just consisting of various 
shades of grey. This is what generates the two-tone grey for the body 
text and the sidebar. But it's TRANSPARENT, showing the stripe texture 
through from below. (And also the blue glow.) And it has a drop shadow 
at each end, which also blends through.

Finally, there's a "bottom" image, which implements the semicircular 
bottom of the page. (You can just about make out where the edge of the 
sidebar doesn't line up perfectly.)

In a similar way, there are a pair of "top" and "bottom" images 
containing a black bar with a curved end; this is what implements the 
black markers at the bottom of each post, where it tells you the number 
of comments, etc. (This also explains why the curve isn't quite right. 
You can also see a glitch in the dotted line where the two halves of the 
image meet.)



Last time I checked, there are two ways to put an image into a web page. 
You can use the IMG tag, which inserts an image in amoungst the text. 
(But you cannot put anything over the top of this image.) Alternatively, 
you can set the page background image, which is obviously behind 
*everything*. That means you can put things over the top of it.

That gives you two ways to build a page like this:

1. Draw the entire page, with all the borders and lines you want, and 
then use CSS to position the text into the spaces in the graphic. (This 
means the page must be a fixed size, since the background graphics have 
been drawn at a fixed size.)

2. Draw the entire page, and chop it into pieces. Use IMG tags to insert 
each piece of the frame around the outside of the text, keeping the text 
inside the frames. If you want the text itself to have a background, 
things get tricky. But by using a repeating pattern, you might be able 
to make the page semi-resizable.

This theme uses neither approach. Somehow it manages to combine multiple 
layers of semitransparent images *at the client end* to produce the 
final page. I have still to discover how that's possible. (Not to 
mention how the hell you line all the text up nicely...) The fact that 
the CSS code is litered with properties I've never even heard of is 
probably the first clue. Unfortunately, it's not very readable in there...

(I have to find out what tags and classes exist in the HTML and what 
they contain, then see where they end up on the rendered page, and then 
see what CSS is applied to them, and lookup what images are being 
referenced, and then see the JavaScript that's manipulating them, and...)

Post a reply to this message