If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Ok for those of you following along on this re-do of this blog. You have seen so far some image ideas that forest has given me. We’ve tossed up some ideas for the header and general site feel as a whole.

Heres the links to the other posts about my make over.

Blog theme redesign live

Custom wordpress theme make over updates

Custom wordpress theme make over part two

SO he sent me

another mock-up.

Some of the things we’re working out now is the nvigational elements.

I want to feature certain things I like to write more about than others and decided that is going to be the overal theme of the blog. What you see is little birdhouses (yes I took those pics) for now, one of them will be the home ico, it’ll move and giggle when you hover a mouse over it.

SO Im looking at testing some of the images and over all placement of them on the blog. In particular the header and the newsletter sign up form, I’m ugly I know but hey thats me !!!

I was going to do this live but figuring how many times I would have to reload the page to get it right I figured I had better not. SO luckily for me I got a copy of xammp, which allows me to install wordpress locally on my hardrive and go nuts from there.

SO heres is a sneak peak of what it will look like, sort of. I opened up photoshop and started to slice the images so I could then figure out how to place them using backgrounds and Css.

I’ll give you some code because well, I am looking for alittle help to do this, yes I know there’s all kinds of resources and I have been reading those but I have some problems that I am now starting to see will impact the  blog.

Here’s a snap shot.

As you can I havent included the bg of the deck boards, ( i took that pic too !!) Now I am having some problems, as you will notice theres the issue I am having of the blue BG around the header image, and getting the header to fit the whole freaking box, (that was one slice)

as well You’ll notice that the other slice from the knuckles down newsletter sub form is over lapping the side bar. I dont know If that is a problem or not really, But I was trying to do was to get the image to fit into the black rectangle ad box you see there,

Or should try and create it above the adbox? Havent decided that yet.

Ok as for CSS code, here’s some of what I did for the blgo to figure out where things should sit.

#header {
background: #73a0c5 url(’images/Shaners-header_02.gif’) no-repeat bottom center;
}

The deck BG, I’ll need to figre this out as well because of the repeat the image slices dont fit square on each other.

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background: #d5d6d7 url(’images/Shaners-BG.gif’);
color: #000;
text-align: center;
}

and for the rest of the newsletter form slice.

#linkbar {
float:right;
margin-top:3px;
padding-right:275px;
background: url(’images/Shaners-newsletter.gif’) no-repeat bottom center;
position:absolute; TOP:144px; RIGHT:90px; WIDTH:328px; HEIGHT:318px;
}

You dont know how many times I had to refresh this to get it quite right. I think I’ll try with getting the the rest of the nesletter image above the link bar or remove the link bar altogethor? As well as you can see from the mock-up forest sent me, that the nav elements arent included in this first run at it, which is why I am thinking about placing everything above the link bar, would be nice to fit everything in the link bar though, but havent figured that out yet, any one wanna help me out on this?

Share This

Tags: blog theme, blog theme design, custom wordpress theme