"Lock the doors and close the blinds -- we're going for a ride..."

Thanks to everyone who has been praising my new layout. I've received quite a few questions about it, most of which fall under the category of "How did you do that?" Well, here's the scoop:

(1) I made the background image. I use Jasc Paint Shop Pro, which I find to be more user-friendly and considerably less expensive than Adobe Photoshop. I decided on making the TV image slightly smaller than an 800x600 resolution so most would be able to see it, and I extended the background to 1600x1200 resolution so those of you with hi-res screens won't see any repeats of the TV.

But Shiny -- where did you get the funky aqua TV? I gleaned it from the web. Google's image search works wonders...

I decided to add the banners and the art credit to the background. That way, I know that these elements will not move.

(2) I sifted through people's themes and learned how to "absolute" position text. It meant fooling around a bit with a test blog I have up, seeing what would happen if I change some attributes. And I wanted to see how everything would fit in the TV screen on the blog.

So, for example, my theme looks a bit like this:

<div style="position: absolute;
font-family: Georgia;
font-size: 15px;
color:#000000;
top: 70px;
left: 150px;
width: 480px;
height: 370px;
padding: 50x;
z-index: 1;
overflow: auto;
border-width: 10px;
border-color: #FF9933;
border-style: solid;
border-width: 0px;
scrollbar-face-color: #61B1B0;
scrollbar-arrow-color: #000000;
" id="layer1">
$BODY
</div>

To clarify a few of the attributes:

top, left, width and height are all pretty self-explanatory. They are the number of pixels from the top and from the left, as well as the width and height, in pixels, of the main window on the screen. You'll need to play around with this a bit to get it just right.

z-index and overflow: hard to explain. But if you want your text to scroll once you reach the limits of the borders you just created, use these parameters.

The #123ABC is a hexidecimal format for defining color. I used Paint Shop Pro to calculate these...

id="layer1":This simply identifies the object for the page layout. A label.

$BODY is the code used by Mindsay which says "insert blog here."

(3) Create a new "layer" and do the same. When I finished with the blog text that goes in the space over the TV screen, I then come up with another box -- with its own width and height and position from the top and left edges. I used HTML to come up with the links in each of those boxes. On the current layout I have five layers: the main blog, the yellow links on the right panel, the XML/RSS button, the box on the bottom with blogs I frequent, and the "Best of" button on the lower left.

So -- that's basically it. Congrats if you actually understood anything I was saying... :-)