Pretty much the last 10 or so theme changes here were pretty minor cosmetic things, but I was unhappy with all of them to a certain extent. No matter how hard I tried, I just couldn’t get the darn thing to work 100% correctly.

In the past two or so weeks I’ve been trying to change the existing theme to make it more user friendly and to make it work correctly on IE 6, the usage of which has surprisingly gone up exponentially in the past two weeks. So, I finally decided the other day to just scrap the old one and start fresh.

The new layout is much skinnier, so some images in posts may overlap the sidebar (the width of the main content area was 700 pixels before, now it is 450 pixels). The sidebar has changed sides, and the main navigation menu has been pushed all the way to the top, along with the RSS subscription information.

The color scheme is completely different, and the whole thing is much more colorful (a common complaint of the old theme is the fact it was 99% gray).

The theme doesn’t work 100% correctly on IE 6 still, but luckily only the sidebar is being a pain. I had to absolutely position the sidebar to force IE 6 to make wide images overlap the sidebar. If the content is smaller than the sidebar then the sidebar overlaps the page footer (only happens on IE 6, because it doesn’t understand the min-height CSS property). Other than that it works perfectly on about 12 different browsers across the 3 main OSes.

Here is the old one:

And the new one:

Before I upload the new theme, I would love to hear your thoughts on it. So, I uploaded a small test page for it.

If you have any thoughts or suggestions feel free to leave them in the comments.

One cool effect that is popping up on a lot of sites is a nifty trick that will fade out the background then make a psuedo-window (I call it that, because it is really just a floating DIV) appear. Here is one way of doing that.

See it in action

Here in that page’s source

Here is a breakdown of the main pieces of the code.

The HTML

<div id="thewindow" style="display: none;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;">

That sets up the actual “window”, named thewindow, and sets it’s style (which can also be in an external CSS file if you’d like). Take note that it is hidden (display: none), and it has 100% height and width, and it is absolutely positioned to 0,0.

<div id="thewindowbackground" style="width: 100%;height: 100%;background-color: #000000;position: absolute;opacity: .5;filter: alpha(opacity=50);"></div>

This sets up the background section of the window, this is what fades-in (and makes the page itself appear to fade-out). It is the same size as the actual “window”, and it’s opacity can be set to whatever for now (the javascript takes care of that, so you can leave it out if you’d like to). The background shouldn’t have any content.

The opacity property is for mozilla, safari, etc, and the filter is for IE.

<div id="thewindowcontent" style="background-color: #000000;position: absolute;left: 50%;top: 50%;width: 250px; height: 250px; margin-left: -125px;margin-top: -125px;">

This is the window content. It is aligned in the center. I do that by setting left and top 50%, then setting the margin-left and top to -125px (half the width, half the height). This is where the actual content goes.

<form><input type="button" value="Close" onClick="hideWindow();"></form>
<div style="color: #ffffff;">
Hello!
</div>

A simple close button and some white text.

</div>
</div>

Don’t forget to close off thewindowcontent then thewindow!

<form><input type="button" value="Show Window" onClick="showWindow();"></form>

You can do whatever you’d like for this, but I decided to make it a button. All this does is call the Javascript function showWindow() upon a mouse click.

Now For The Javascript…

end_opacity = 50; //end opacity, 25 = 25%, 50 = 50%, 100 = 100%, etc.
increase_opacity_by = 10; //how much to increase by each time the timeout ends
timeout = 100; //timeout in milliseconds, 0 = instant fade-out

The first line is the ending opacity for thewindowbackground. I made it 50%, so it makes the page content looked grayed-out. The next line is how much the script should increase the opacity every time there is a timeout, I would recommend making this a multiple of end_opacity. Timeout is how long the script should go before increasing thewindowbackground’s opacity by increase_opacity_by.

win = document.getElementById('thewindow');
winbackground = document.getElementById('thewindowbackground');
wincontent = document.getElementById('thewindowcontent');
cur_opacity = 0;

var timer = null;

This just grabs the elements from the page, and creates the cur_opacity var. A timer object is also made, this is set every time setTimeout() is called, but it is never used. It would be useful for a “cancel” button.

function showWindow() {
	if(timeout > 0) {
		cur_opacity = 0;
	
		winbackground.style.opacity = cur_opacity / 100;
		winbackground.style.filter = "alpha(opacity=" + cur_opacity + ")";
		win.style.display = 'block';
		wincontent.style.display = 'none';
	
		timer = setTimeout("increase_opacity()",timeout);
	}
	else {
		winbackground.style.opacity = end_opacity / 100;
		winbackground.style.filter = "alpha(opacity=" + end_opacity + ")";
		win.style.display = 'block';
		wincontent.style.display = 'block';
	}
}

That entire function is really simple. If timeout is an actual value the current opacity will be set to 0, and the background’s opacity will be set to 0. The window’s display is changed from none to block, but the window content’s display is now none (don’t want that to display until the fade is complete). The timeout is then started. If timeout is set to 0, the background is set to it’s end_opacity and the window is shown.

function increase_opacity() {
	cur_opacity += increase_opacity_by;

	winbackground.style.opacity = cur_opacity / 100;
	winbackground.style.filter = "alpha(opacity=" + cur_opacity + ")";
	
	if(cur_opacity < end_opacity) {
		timer = setTimeout("increase_opacity()",timeout);
	}
	else {
		wincontent.style.display = 'block';
	}
}

This function will increase cur_opacity, set the background’s opacity, then figure out if we should run another timeout. Please take note that you must divide cur_opacity by 100 for the style.opacity property, which uses decimals.

function hideWindow() {
	win.style.display = 'none';
}

For the close button.

Ways To Improve It

This script can pretty easily be improved. One way I can think of is to fade-in the content as well. Making the window moveable would also be pretty easy to do.

I tried this on IE 6 + 7, Firefox 2, Camino, Netscape, and Safari and it worked great on all of them.

CSS does some things that I just don’t quite understand. One thing it does that ticks me off is how absolute positioning works. When positioning elements inside, say a header, you will generally use absolute positioning. However, that alone will not get the results you were expecting, but luckily there is one neat little trick to fix that.

When most people make a CSS header it will may look a bit like this:

.header {
width: 100%;
height: 130px;
margin: 0;
padding: 0;
background-color: #81a0d2;
}

.header h1 {
padding: 0;
margin: 0;
font: normal 1.2em/1.2em Verdana;
color: #1c55b0;
position: absolute;
right: 55px;
top: 25px;
}…etc

However, all it takes is a simple page load to realize your layout isn’t working right. When it first loads it may look alright but if you stretch your browser window it will eventually look like this:

Yeah, YUCK!

Luckily the fix is incredibly easy. Simply insert “position: relative” into the section for your header:

.header {
width: 100%;
height: 130px;
margin: 0;
padding: 0;
background-color: #81a0d2;
position: relative;
}

And now it should work exactly as expected:

Why does it work? I haven’t a clue, it just does.