x
shiny
"Lock the doors and close the blinds -- we're going for a ride..."
 
"How did you do that?"
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... :-)
 
Profile
In the interrogation room
Friends

I Know the Economy is Bad, but Geez!
- Aren't there better ways to supplement your income? Teacher arrested...
...
One more way stem cell research could save the world
- You know, if Christians and Republicans would get the...
...
Bullshit.
- And this is why Republicans and conservatives are full of shit. It makes shittons of sense for a...
...
Calendar

August 2008
12
3456789
10111213141516
17181920212223
24252627282930
31

June 2008
1234567
891011121314
15161718192021
22232425262728
2930

May 2008
123
45678910
11121314151617
18192021222324
25262728293031


Older

Crazy 40

hmm
- i wonder if i am coming down with something. my stomach is a little upset again. don't go in until 930.
...
4/40 replies (Reply Now)