Blog Template Design

I stayed up until 3:30AM last night working on the template for this blog. I probably should have stayed focused on getting some work done on the website, but taking a break from programming to do creative work once and a while helps keep me interested and prevents burnout.

I tend to do my best work during the late night/early morning hours, and that's really where the idea for this theme came from. A sketchbook, lit by a single lamp, filled with scribbled notes and doodles seemed appropriate. It really did not take long to create the graphics for the template. I already had the sketchbook illustrated for a different project a while back, so it was just a matter of creating the mask and the lamp.

After all the graphic elements had been created, it was time to start working on the HTML and CSS. The sketchbook part of the layout is very simple. It's a table (id wrapper) with two rows and one column. The first row is the header cell which contains the header image, and the second row contains the blog widgets. That's it, nothing fancy.

Next comes the fun part! For the lamp and mask, I created five divs below the wrapper table:

<div id='topMask'/>
<div id='rightMask'/>
<div id='bottomMask'/>
<div id='leftMask'/>
<div id='light'/>

Each element above has a fixed position on the page. I specified a z-index for each, the light div having the highest number since it needs to show up in front of the mask divs.

Of course, just when I think I'm finished, I realize I have a huge issue with this design. Although it's mostly transparent, the light.png image is actually 475px square, and (at least on my screen) covers up a lot of the text. You can still see the text because of the transparency, but you can't click on any links that fall below the image!

What I had to do was implement some simple Javascript. I created a function which gets the light div display style and hides or shows it accordingly:

<script language='JavaScript'>
function hideLight() {
document.getElementById('light').style.display =
(document.getElementById('light').style.display != 'none') ? 'none' : '';
}
</script>

Lastly, I created one more div below the other five. This div holds a light bulb icon with a link which calls the hideLight() function when clicked. Again, this div has a fixed position with a z-index above the mask divs:

<div id='toggleLight'>
<a href='javascript:hideLight();'>
<img src='http://www.gregsproject.com/images/blog/lightIcon.png'/>
</a>
</div>

That's it! Now, time to get back to work on the website. I have made some good progress in the past few days and plan on writing a blog post with an update very soon.