This is the site that I went to and followed their easy instructions to change my template. It is The Beginners Blogging Guide
Along with doing that I did a few little tweaks here and their to make my columns line up the way I wanted to. I did not want my main part as wide and I did want the two side columns to be a bit wider, so here is what I did.
It is not explained beautifully because I am just figuring all this out too, but it did work.
After you have done all the instructions from the beginners blogging guide and previewed it to make sure that it has worked.
To me,it worked but it was uneven as I mentioned the main part being too wide and the sides being to narrow. So I saved it because I am a chicken and I wanted to make sure that part was safe anyways.
Next I went back to this part shown below:
starting with:
#main-wrapper {
width: 519px;
margin-right: 15px;
margin-left: 20px;
text-align:center;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
and ended up with:
#main-wrapper {
width: 489px;
margin-right: 15px;
margin-left: 20px;
text-align:center;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
and I changed the width: 519px; a little bit at a time.Which because I'm still a chicken went from 519 to 509 to 499 and just kept changing it a bit at a time by previewing it.(DONT SAVE IT UNTIL YOU HAVE WHAT YOU WANT)you can try changing the number and if it is not what you want,
you can undo edits since you have not yet saved it and it will just put the number that you tried changing back to its original number.
Just in case you forgot the number that you started out with in the first place.
I then did the same with the sidebar-wrapper:
changing only the "width:193px;"
trying again 213,203 and so on until it was what I wanted.
always pushing preview and not save until it is where you want it to be.
#sidebar-wrapper {
width: 193px;
margin-left: 20px;
margin-right: 25px;
float: right;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
This is the last one that I changed the numbers on "width: 143px;".
Again just changing a little bit at a time.
The just of it is if you make your main wrapper 10 px smaller,then you can make your side bar or newsidebar wrapper 10 px wider.
#main-wrapper {
width: 519px;
margin-right: 15px;
margin-left: 20px;
text-align:center;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
and ended up with:
#main-wrapper {
width: 489px;
margin-right: 15px;
margin-left: 20px;
text-align:center;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
and I changed the width: 519px; a little bit at a time.Which because I'm still a chicken went from 519 to 509 to 499 and just kept changing it a bit at a time by previewing it.(DONT SAVE IT UNTIL YOU HAVE WHAT YOU WANT)you can try changing the number and if it is not what you want,
you can undo edits since you have not yet saved it and it will just put the number that you tried changing back to its original number.
Just in case you forgot the number that you started out with in the first place.
I then did the same with the sidebar-wrapper:
changing only the "width:193px;"
trying again 213,203 and so on until it was what I wanted.
always pushing preview and not save until it is where you want it to be.
started with:
#sidebar-wrapper {
width: 133px;
margin-left: 20px;
margin-right: 25px;
float: right;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
width: 133px;
margin-left: 20px;
margin-right: 25px;
float: right;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
ended up with;
#sidebar-wrapper {
width: 193px;
margin-left: 20px;
margin-right: 25px;
float: right;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
This is the last one that I changed the numbers on "width: 143px;".
Again just changing a little bit at a time.
The just of it is if you make your main wrapper 10 px smaller,then you can make your side bar or newsidebar wrapper 10 px wider.
started with below:
#newsidebar-wrapper {
width: 133px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
width: 133px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
ended up with this:
#newsidebar-wrapper {
width: 143px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
#newsidebar-wrapper {
width: 143px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
So, there you have it: I wish I could explain it better and I am sure their are other bloggers that can, but this is how it worked for me.
Good luck to you
No comments:
Post a Comment