“Very Simple” theme – help fix formatting

Hi derb,
nice to see you moving to wordpress 🙂

The reason your header overlaps with the sidebar is because your sidebar isn’t positioned well enough. That’s easy to fix with some trial and error positioning. But first, are you planning to mimic the former 100% width or are you staying with the fixed width you have now?

Ok, we’ll do this one step at a time and see how far we get everytime.
I’ll assume you know how to open a css file (with your texteditor) and edit it.

In your stylesheet you will find a line that reads:

.wrapper {
width: 700px;
margin-left: auto;
margin-right: auto;
}

Change it to:

.wrapper {
margin: auto;
}

That will make your whole blog 100% width.

The next thing is setting the width of the main elements in it: your header, main content (articles) and menu.

For the header, change:

.header {

}

to:

.header {
text-align: center;
background-color: #336699;
}

We can change the color later.
For the main content, change:

.content {
width: 500px;
}

to:

.content {
width: 80%;
}

And for the sidebar, change:

.sidebar {
position: absolute;
top: 40px;
margin-left: 520px;
font-size: x-small;
width: 200px;
}

to:

.sidebar {
position: absolute;
right: 0px;
top: 140px;
font-size: x-small;
width: 19%;
}

The top: 140px is how far your sidebar is away from the top and right:0px should be that is aligns to the right (though there could be some trouble here).

One more thing: the footer. Change:

.footer {
width: 700px;
margin-left: auto;
margin-right: auto;
font-size: x-small;
text-align: center;
padding-top: 10px;
}

with:

.footer {
margin: auto;
font-size: x-small;
text-align: center;
padding-top: 10px;
}

Post back after the changes and we’ll check the result and improve further.

At least we see some improvements. 🙂

The sidebar was positioned against the rigth side, so we’ll have to update it’s positioning with the width: 90% you chose. 90% means 5% on each side so instead of:

.sidebar {
position: absolute;
right: 0px;
top: 140px;
font-size: x-small;
width: 19%;
}

we’ll change the right: 0px to 5%. If we’d keep using pixels it wouldn’t end up ok. But I’m not sure the 5% will be perfect. You may have to try other percentages, and vary your browser window width to see the effects. Also keep in mind to vary the 19% width of the sidebar itself if that displays better. It’s a matter of trial and error here.

The blogtitle’s color is simply:

.blogTitle a {
text-decoration: none;
color: #999;
}

and changing the #999 to white, which is #ffffff or shorter #fff.

The datestamp: change

.dateStamp {
font-size: x-small;
color: #999;
text-align: right;
border-bottom: 1px solid #999;
margin-bottom: 20px;
}

and add: font-weight: bold;

The headline actually is already bold. You can see it here:

.postTitle {
font-size: normal;
font-weight: bold;
margin: 0px;
margin-bottom: 2px;
}

You can try and use ‘bolder’ instead of ‘bold’ and see if that makes any difference.

The static content should be inserted either in your themes index file if the sidebar resides in there, or in your sidebars own php file if there is one. You need to look for <div class=”sidebar”>, since that’s where the sidebar starts. Try playing with inserting some text and see where it appears. You’ll quickly discover where you can put your static content.

If your link list gets long, and you have a short post that layout is going to bork. Specifically the menu will burst through the footer.

Hey root,
you’re right about what you say. But I’ve chosen not to mention this because I wrongly thought his postnumber was long enough not to have any problems with it. So, without changing the index file that probably means reverting to floats.
Also, IE messes up with a small window. It keeps those 5% from the right side as a fixed width!?

I’m going to mimick the basic layout on my computer tonight and try some things. Then I’ll post back with my solution.

I’m not sure how to do it as you want :/ , as the tags for time should be within the loop. Maybe you could ask that in a new post and if someone can help you we’ll go further with that code.

ps: if you want to thank someone thank wordpress and the wordpress community. 🙂