AltEnToday.com is up and running

Man, between GoDaddy and Wordpress, launching a website could hardly be easier. After deciding on a domain name (AltEnToday.com) I went ahead and registered it, got the hosting configured, and deployed WordPress, all within about 5 minutes of pressing buttons and about an hour of waiting for the domain name to propagate. Once that part was done, it just took a little time to tweak the Cutline theme that I’m using to look, well, like it’s an alternative energy site rather than a random blog.

This is actually my first time playing with the new Wordpress 2.5 release - with the new dashboards, etc. It took a couple minutes to get my bearings, but overall I think it’s a pretty well-done upgrade and I’ll have to get around to upgrading the rest of my sites to it. In the meantime, I hope you’ll take a quick stroll over to my new site and of course let me know your thoughts.

The tweaks to the code were fairly straightforward. The standard Cutline theme features a 3 column layout, but I don’t like left-side columns (not to mention they offset SEO benefits by having the left-hand navigation show up first in the search results). So I went in and tweaked a few of the pages to shift the columns from left to right. The other tweak that I made was to change the header so the words floated over the background image. I’m not sure if I like it the way it is now or if I want to push the text up or down (so it’s lined up with the banner a little better). For the time being it works, and gives me a lot more above-the-fold real estate than the original design.

The main piece of code that I tweaked was in the stylesheet to make the header float over the background image. Here’s the tweak:

#masthead { width: 970px;
position: absolute;
margin-top: 85px;
z-index: 999;
background: #fff;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
line-height: 1.1em;
padding: 5px;
/*height: 100px; background: url(’images/logo.gif’) no-repeat;*/ /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ }

The #masthead DIV is the text portion that was previously sitting above the image. This was about a 100-pixel piece of real estate that didn’t fit the redesigned layout I was working on, as well as sacrificed that all-important above-the-fold real estate. [Above-the-fold is a newspaper term turned in to a web term that means whatever appears when the browser first loads the page on the screen.] Important to this style update is the z-index, which moves the DIV and the H1 & H3 forward of the background image.

The images themselves are straightforward - there are 5 header images that show on different types of pages. After some quick Google Image searching I found a few that would work. I dropped them in to Photoshop, tweaked them until I had my 970×140 dimensions, and moved on from there. I may rebuild the header just a little to randomly rotate between images, but for the time being this works fine. Over the next several months I’m hoping to build out this site dramatically, so stay tuned and feel free to link to AltEnToday.com if you find something you like!