How to change width of blog. ~ The Blog Doctor.
Loading...

How to change width of blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

To change the width of your blog.................

you will have to change certain parameters in the CSS (CASCADING STYLE SHEET) part of the template. The CSS part is the fourth part of the template and is described in How to do CSS in Beta Blogger.

To do this login to Dashboard and click on Layout under the name of your blog. This takes you to Page Elements. Then click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.


FIRST BACKUP YOUR TEMPLATE TO YOUR PC USING METHODS DESCRIBED IN : HOW TO CHANGE THE TEMPLATE.

Then without putting a check in the Expand Widget Templates box at the top of the Edit Template text box scroll down in the box till you come to :


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1025px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 530px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#newsidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


The Outer wrapper contains the main wrapper and the two sidebar wrappers. Their dimensions are described by the width parameter. Their positions are described by the float parameter. Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter. To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.

IMPORTANT :

CHANGE ONLY ONE PARAMETER AT A TIME.........AND

HIT THE PREVIEW BUTTON (at the bottom of the box) TO SEE THE EFFECT........BEFORE

SAVING TEMPLATE.

IF YOU DON'T LIKE IT RELOAD OLD BACKED UP TEMPLATE AT ANY TIME.

You will have reason to increase the width of your blog when you find your main column of posts below the sidebar or the sidebar below the posts column. This happens when a large photograph or a large link is added in the posts column. This prevents the sidebar from rising up to take its normal place besides the posts column. Increasing the width of the outer-wrapper then accomodates the sidebar.

To change the width of the HEADER scroll down in Edit Template text box till you come to :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

then change 750 to whatever width you want it to be.

IMPORTANT : To allow your blog/site to be viewable in all resolutions restrict the width of the outer wrapper to less than 750 px.


SOME TEMPLATES MAY NOT HAVE OUTER WRAPPER AS A DIVISON : Then go to Edit Html under Template tab and usually the first division after 'Body' and the a links will usually correspond to the outer wrapper.

Technorati Tags:, , , ,

134 comments:

lisa ~* said...

very helpful article!

btw, you might want to add where to change the width of the header too. thanks for the help!

Sam said...

after deleting my side bar, i want to central my posting coloum any ideas??

vin said...

sam
The width of your outer wrapper is 744px. So change width of your main wrapper to 730px to widen it.

Willis said...

When I try to increase the width of the outer wrapper, sidebar wrapper or main wrapper, it skews my sidebar test. It shifts everything on the sidebar down. Any suggestion
Willis

vin said...

Willis
Make only one change at a time.
Use Preview button after every change.
Make sure that the sum of the widths of all your columns and their paddings and margins is not more than the width of your outer wrapper. Otherwise one column will slide down in the blog.
Also see

How to correct sidebar at bottom problem

Willis said...

Thanks Vin:
Sorry to be a pain. IIf I just want to increase my sidebar size then do I need to decrease my content width to compensate. Also I have not messed with the padding. Should I?
I am trying to place a form in my sidebar that is wider than the current. But Proportionally I seem to be having some problems.
Thanks a bunch
Great tips so far. I am getting there

vin said...

Willis
To get something you have to give something. :-) Just Joking! Of Course you will have to decrease content width. For further questions try my email link in left column.

LAURA said...

I want to have my information on one side and a slide show on the other with my journaling in the middle. Can't find a way to do this.
Any suggestions???
Thanks

vin said...

LAURA,
Choose a three column template. See :
http://tinyurl.com/32apau

Then widen the columns so that your content fits in. For any detailed help you can email me. The address is in left column of this blog.

Joe said...

Thanks for the tip!

Samanvaya India said...

i am probably using the new templates, where the css are all in new sections. section :

/* Page Structure

and it has attributes for
outer-wrapper
main-wrap1
main-wrap2
main
sidebar-wrap
main.widget
main.blog

Width and padding do not add up to the width of outer-wrapper. some of the width values are in percentages. How to make changes to this format?

vin said...

Samanvaya India,

What is your blog url? Use my email address in middle column for detailed help.

Nikki said...

YOur site is sooo helpful! I found a template that finally works for 3 columns. However, I need to get rid of the frame around my header. How do I do this without messing it up? Also I view my blog in a smaller screen. Any idea how to make the sidebars fit without scrolling back and forth? I followed your guides for changing the width but I am still scrolling.

vin said...

Nikki,

What is your blog url? What is your monitor resolution? Use a template which fits the width of your monitor resolution.

Pradeep said...

Its brilliant work...
I have to try it
will try and post another back for u
good work dude.

BayingAtTheMoon said...

Thanks so much for this. Worked like a charm. The only glitch is that when I go to the layout page to edit my layout now, the page elements on the right hand side (not the left!) run off the page so I can't get to the word "edit"! Any help here?

vin said...

Bayingatthemoon,

See how to modify the Layout editor here :

http://betabloggerfordummies.blogspot.com/2006/12/css-tips-and-tricks-for-blogger.html

Admin Hye said...

Hi Vin,

I followed your steps and it worked well on my blog. However, one problem is that the horizontal slider is missing. How can I have it back? When I try to minimize the window of my blog, the left slider is missing. Can you help me find why the horizontal slider is missing? Thanks.

vin said...

Admin Hye,

What is your blog address so we can check it out?

Rikki said...

I actually stretched my blogger template sideways (just the header and the main body and not the right column).

check it out here.

I just did a trial and error with the html code - but thanks to sites like this one, people can actually learn how to and discuss about it!

http://12feet.blogspot.com

Sara Swanberry said...

Hi Vin, I am using the Rounders 4 layout and have figured out how to increase the areas for my postings and sidebars except for the header. There is a design in this header that I can't seem to stretch out with the rest of the Header. Can you help me?

Thanks!

vin said...

Sara,

Have a look at :

Rounders Three Column Template

Suman Pahari said...

HI! thanx for your links, One more help required, "How do I shift the the column which shows the clok and the archives a bit more to the right of the screen, so that the rest of the text fills up the space"

Regards,
Suman
spaharionline.blogspot.com

vin said...

Suman Pahari,

Go to Template--->Edit Html and scroll down to this code :

#sidebar {
padding: 7px 11px 0 14px;
....
}

!4px represents the left padding. Increase number '14' and click on Preview. Save when correct.

power/speed said...

HI

I need ur expertize :D
Is it possible (and how?) to make my blog look like webpage (the center r posts and on the left there is a little sidebar and on the right little sidebar) 'cos when I modify my HTML like this the POSTS r always on the left and i get huge spacing between my post and right sidebar (I dont see the new sidebar that I've added [probably 'cos there's no content in it XD])

p.s. here's a example of how i want my blog to look like... 2 little sidebars and 1 large post/content
any help would be appreciated ;)
Marko

Vin said...

power/speed,

The easiest way would be to Google for a three column blogger layout template and load it.

After that if you have any difficulty customizing it you can contact me. I have some free templates on this site also. Take a look.

power/speed said...

Thanx mate ;)

Anonymous said...

hi,
I did like what was given to enlarge my page. Before changing the matter was in middle, sayspace on both sides.
after I changed, now all the matter is shifted to left side, leaving more space on right side.
how to make the matter spread the whole page.
secondly how to make label appear on left side?
help me

Vin said...

Anonymous,

Your blog address is required for detailed help.

Anonymous said...

http://www.playthrillinggames.blogspot.com/
In it the main matter is in left side & ads by google is not in right side.
I want ads by google to go to the wxtreme right & the main matter on the middle & list of menus & one more ad by google on left side

Vin said...

Anonymous,

Have a look at :

How to Add Third Column to Blog.

Rockerchick2006 said...

I have no idea how to widen it so that my chinese horoscope can be under my punkymoods. I tried and failed... i need really easy instructions.

Vin said...

Rockerchick2006,

Is that the "Click here to know what Chinese animal you are?" graphic at bottom of your posts column?

Rockstar2006 said...

Yes, I wanted to post at the side but it cuts the sides off.

Vin said...

Rockstar2006,

In your Template code box first increase width of whole blog here :

#outer-wrapper
{
...........
width: 740px;
}

Then increase sidebar width by the same amount here :

#sidebar-wrap
{
...........
width: 240px;
........
}

Preview and save template.

Chris And Marisa said...

YOU ROCK!

M.Yu said...

Hi Vin,

I have a "Scribe" template for my blog. I widened it but it seems the backround is 2 pieces a color and a texture. I can not seem to find how to widen the texture part.
Do you know what this is called?

Thx,

Bambudist

Vin said...

M.Yu,

You have to download the images, resize them, upload them and put their links in the template.

See method I used here :

Rounders Three Column Template Modified.

Blake said...

Thanks for the help (post) about template width editing. I used it to change one of my blogs. I have been trying to figure this out for some time until I found your blog.

... said...

Can't seem to find how to extend the width of a page element below my main posts. Any direction could be appreciated!
Nan

Vin said...

Nan,

It would be helpful if you gave the blog address and pointed out which page element you want widened?

NO ANGEL 4U said...

Hello Vin,

My sidebar went at the bottom of my blog
http://na4u.blogspot.com
I'm following your very helpful instructions without a result. Can you help?

Thank you

Anonymous said...

onmyway2work.blogspot.com
the side bar is what I want widened.

Vin said...

No angel 4u,

Have a look at :

Why my idebar keeps falling down?

Vin said...

Anonymous,

onmyway2work : Follow instructions in above post.

Harkabir said...

Hi. Thanks for the great solutions. You really make life easy for so many of us thick wits.

my blog is historyview and I have managed to increase the main wraper width (and outer wraper width) by 200px. It has worked and now the main wraper is widder but the space devoted to the actual text of the post is till the same. The dotted line on the right hand side border of the text is till in the same place and it does not allow the text to utilize the new extra space created in the main wraper.
I have undone the wraper increase for now and taken the template back to the original till I get your ideas on this.
What should I do?

Vin said...

Harkabir,

You have the Rounders Template. To increase width of blog you will also have to increase width of images in the template. See how to do it in Rounders Three Column Template Mod"

You should also increase width in this code :

.main .Blog {
margin: 0;
padding: 0;
width: 484px;
}

by same amount.

Chip, Emily & Jackson said...

Hi!

I am using a pretty simple minima template (www.therunyonfamily.blogspot.com) and have widened my outer wrapper. The one small problem I have is that all of the text is left justified with no margin at all. How can I add space so the words don't look chopped off like that? It is happening with the main and sidebar.

Thanks!

Vin said...

Chip, Emily & Jackson,

Hi!

To increase margin modify this code :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

In margin line instead of '0' add '10px'. Preview and save.

Harkabir said...

Hi Vin,
Thanks for your help. I understand that I must makes some changes to the images and I have read the post you have provided in your reply but to be honest I haven't quite understood :
1. which things need to be changed
2. how to change them

I am sorry for bothering you so much and I understand if you don't have the time to reply :0
Thanks for the effort

Vin said...

Harkabir,

Follow the steps in the link provided and report exactly at which stage you faced difficulties and exactly what you did not understand.

More details are required. So help us to help you. :-)

Amanda said...

Thanks for the helpful article! I was wondering though, can you widen blogger templates that are not from Blogger? Like, ones from finalsense.com?

Vin said...

Amanda,

You can widen ANY template. However if the template contains graphics you have to widen them also.

Check out how I did so in widening the Rounders Template.

Pet Haven said...

Thank you, I don't know what I'm doing but with your help I think I did it!

Amy said...

Very helpful! Thanks so much! I learned so much about code tonight. It was the first time I have ever really messed with code.

Amy said...

PS - I linked you in my blog to thank you for your help. Hope that is okay. If not let me know and I'll remove the link!

Have a great week!

Vin said...

Amy,

Thanks for the link. Remember to backup template to PC before and after making any changes to it.

Deborah Habora said...

Hi. My blog is http://www.deborahhabora.com/ and on my main page, the text/images aren't spreading out to the new width given.. I'm not sure what to change in order to fix it. Please help.

Vin said...

Deborah Habora,

Seems OK in Firefox. What browser are you using? What new width have you specified and where in the code?

Deborah Habora said...

I'm using Firefox as well.. The width's are about in the middle of my coding, and they look like this..

#outer-wrapper {
width: 740px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main1-wrapper {
width: 480px;
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 */
}

#sidebar2-wrapper {
width: 160px;
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 */
}

#main2-wrapper {
width: 300px;
float: right;
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 */
}

#sidebar1-wrapper {
width: 160px;
float: right;
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 */
}

Vin said...

Deborah Habora,

What do you wish to change the width of? Which column?

Deborah Habora said...

The middle column.. The text/images isn't forming to the width of the actual table. The layout thing shows the same thing.. http://i31.tinypic.com/11skwnt.jpg

Vin said...

Deborah Habora,

Change width here :

#main2-wrapper {
width: 300px;
..
..
}

to 380px. Preview and save.

Deborah Habora said...

I ended up just having to change them all just a little bit.. When I did what you said, the right sidebar ended up at the bottom so..I ended up going thru and seeing which 1 needed to be fixed and ended up changing them all (I think) by a little bit. Thank you for all your help Vin. =)

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main1-wrapper {
width: 650px;
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 */
}

#sidebar2-wrapper {
width: 200px;
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 */
}

#main2-wrapper {
width: 500px;
float: center;
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 */
}

#sidebar1-wrapper {
width: 100px;
float: right;
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 */
}

Jimwgreen said...

Vin-

Hi. I recently found your site and it is extremely helpful, however on one particular issue I want to lengthen my header to spread from edge to edge (to fill up the entire width of my site) without effecting the body content or column structure. Is there a way to do that?

If need be, I can give you my URL as well as another URL I'm attempting to emulate. Thanks.

Jim

Vin said...

Jimwgreen,

Increase the header-wrapper width and the outer-wrapper width to match width of your screen.

Check Start----->Control Panel---->Display Properties---->Settings tab lower left.

LOLLYGAG said...

Hi, I'm totally new at this HTML thing and trying to understand your instructions. Sorry, I don't know the lingo so I'll try to explain as clearly as I can.

I want my "posts" column to be wider. I found the #main-wrapper{ section and increased the width by 500 (from 428px to 928px) and then also increased the width of the outer wrapper by 500 (from 700px to 1200px). But all it does is move my "posts" column to the left of the screen without changing its width. It leaves a big empty gap between the posts and the column on the right that has About Me, archives, etc. (not sure what to call that, sorry!).
What am I doing wrong? I'd like the posts column to be about twice as wide as it is now.
Thanks!

Vin said...

Lollygag,

What is your blog address?

Purple and Paisley said...

vin, help! i think my blog is too wide for people with narrow screens...can you take a look at it and help me? i've messed around so much with the html code, i am now lost... thank you in advance...www.purpleandpaisley.blogspot.com

Vin said...

Purple and Paisley,

The Three Column Fluid Width Template is good for any monitor width.

kelly said...

I need your help as well and you seem to be my last hope. I have played around with the width and i know how to change it all, but my problem is i have a 24in monitor and if i go in and change the width of my outer wrapper and get it to where i like it and then later on get on my husbands laptop i cannot see the design on the sides, because it's a smaller monitor. I have seen blogs where they have their's fitted for their larger screen but it also shrinks down for smaller monitors as well. Do you have any tips on this?
Please help

Vin said...

Kelly,

Load a Fluid template which resizes according to monitor width/resolution.

kelly said...

Vin,

thanks for your help. I was looking at the fluid template is there a way not to have the third column? Or an easier way so i don't have to add all the widgets on it? Thanks

Vin said...

Kelly,

Go to Layout---->Pick New Template and choose one of the 'Stretch' Templates and Save.

They are two column templates and 'Fluid' in nature.

Fred said...

Hi Vin!
I think I'm using a stretch template, so I dont find the code you're talking about in this post. But I do want a fixed width website. This is what I have after the #outer-wrapper line:

#outer-wrapper {
font:$bodyfont;
}

a {
color:$linkcolor;
}

a:hover {
color:$titlecolor;
}

a img {
border-width: 0;
}

#content-wrapper {
padding-top: 0;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
}

@media all {
div#main {
float:$endSide;
width:75%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 22%;
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 */
}
}

@media handheld {
div#main {
float:none;
width:90%;
}

div#sidebar {
padding-top:30px;
padding-$endSide:7%;
padding-bottom:10px;
padding-$startSide:3%;
}
}

I've tried changing the percentages to px but it didnt quite work. What to do? Thanks for your help in advance!

Fred said...

Hi Vin,
don't waste time on my previous comment on this post, I've figured it out! Thanx anyways! One thing tough, when I check a preview of the site after changing some HTML, the links are inactive... why is that?

Vin said...

Fred,

The preview only shows what the site looks like. Not the function!

Soja said...

Thank-you! Exactly the information I was looking for.

Sara said...

Very helpful! Thanks so much!

ms.zebra said...

Your site is a godsend, btw. I refer to it daily- especially since I am completely new to this whole blogging craze. I have tried following your suggestions on this particular topic, but to no avail. Either pictures start getting cropped, or the columns are reversed or completely centered. What I'd like to do is create more space between the columns so they don't look so cramped, and widen at least the left column. Here's my site if that will help: http://make-upcinema.blogspot.com/
Thanks.

Vin said...

Ms.zebra,

To increase width of posts column change the number here :

#main-wrapper {
width: 410px;
...
}

Then increase the number here by same amount :

#outer-wrapper {
width: 660px;
...
}

Then save template. Clear cache and view blog.

Tigger2097 said...

LOVE THIS!!! It help me changed the size of my columns with no problem, easy to follow!!! Keep them coming!!

Hot Bhojpuri said...

wow that's great man

Johnny The Anomaly™ said...

Trying to tweak the right sdebar on my blog to no avail...any help would be greatly appreciatted!

Vin said...

Johnny The Anomaly™,

What seems to be the problem?

Johnny The Anomaly™ said...

Sidebar cutoff in safari & explorer but looks fine in firefox...I dont know whats going on

Vin said...

Johnny The Anomaly™,

Which versions of Safari and IE are you using? Update to latest versions and check again after clearing cache.

The Lush Ess said...

very helpful! I'm trying to determine to switch to using RapidWeaver to create and manage my blog as I *think* there are too many limitations...but I may be wrong! Thanx so much for the help!!!

Sweater Weather said...

Hi Vin,

I think I'm having the same problem Fred was having -- I just can't find the code you're referencing. I'm a relative newbie to html, but I see nothing about headers or wrappers in my code. (I take that back -- I found a "content wrapper" section.) I'm using the Tekka template, and I just want my header to extend over the sidebar, rather than just the main body.

Vin said...

Sweater Weather,

What is the blog address?

Sweater Weather said...

Vin,

It's

http://mandatoryfuntime.blogspot.com/

(And I've actually changed the template.

Vin said...

Sweater Weather,

You are using the Jellyfish Template now. It is a fluid template adjusting width according to viewer's screen.

The width of each column is in percentages. Example :

div#main-wrapper {
float: left;
width: 65%;
....
}

Sweater Weather said...

Vin,

So is there some percentage I can change to get the header to extend over the sidebar? This is all I see regarding the header:


#header {
padding-top:7px;
padding-$endSide:0px;
padding-bottom:20px;
padding-$startSide:0px;
margin-top:23px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0px;
border-top:1px solid #eeeeee;
background: $descriptionBgColor;
color: $descriptionColor;
}

I just think it looks very awkward to have a big chunk of white space with nothing in it.

Thanks for your help!

Saik said...

Done! Thanks a lot.

Anonymous said...

I've adjusted the wrapper, post and sidebar widths but still haven't found a way to increase the image size for my posts. I'd like the image in the top post to be at least 500px wide, and possibly as wide as 600px.

Here's the link:
http://nermusmegus.blogspot.com/

Vin said...

Anonymous,

Use Windows Live Writer.

Rhonda and Gerry W said...

I am trying to increase the width of my sidebar as my widgets are getting cut off. I followed the instructions, but its still looks bad. My blog address is:
https://ourjourneytosurrogacyinindia.com

Thanks,

Pilgrim said...

Thank you for spelling it out for me!

Awdrey said...

I got my template wider, yeah, but my pics are still the same. Any ideas on how to get them bigger?

Vin said...

Awdrey,

Have a look at : Upload Pictures Without Changing their Size.


The Vegard
said...

thanks alot for the tutorial! Love your blog! I'll leave a link to it on my blog

Start Loving said...

By any chance, sorry to bother you, but is there an easy way to increase the amount of a title that shows in the sidebar? The template automatically truncates the length adding a "..." if it is long. I'd VERY much like to lengthen the amount of title that shows before the "..."

Thanks so much for your work. Your brother, Start

Vin said...

Start Loving,

What is the blog address?

@LiYaNNuaR said...

i cant do it... plz help me!

the lp's said...

Vin, I was organizing my posts and something caught my eye. I am trying to reposition my blogger button. It is running into the middle column. To do this, I thought I had to widen the left sidebar. You directed me to look at this thread and I just realized, I may have to widen my whole blog? I am afraid I may have confused you with the e-mail I sent to you yesterday. I have the worst habit of focusing on just one thing at a time, and not seeing the whole picture.

Lucy, the old gray mare!
http://lpalta.blogspot.com/

Vin said...

the lp's ,

If you want to increase width of sidebar you have to increase width of whole blog also.

the lp's said...

Hey Vin, I thought I would just play around with changing the width of my blog. I added 20px each to both sidebards and the main wrapper, then I added 20px to the Outer Wrapper. Next I added 20 px to the Header? It kind of looks the same to me. Oh, how do I find the width of my screen; the kids just purchased a wide screen monitor for me? One thing I am good at--making mountains out of molehills. I spent a day trying to change the html in Layout so I could link on a person's name and it would take me to their website. Nothing. Then when creating a post I found instructions on how to make this happen. Success!

Lucy

http://lpalta.blogspot.com/

Charlotte said...

Hi there, just wanted to say that this blog was so helpful. Excellent instructions on how to expand my sidebar to fit my widgets!
In the end I only had to change the width and float to make this work. Thanks again!

#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}#

Charlotte

Marianne said...

Hi! I used your tips to widen my blog, but I have some background color/pattern on my sidebar and now part of the pattern is still where it used to be = under my posts and it looks really messy. How can I move the sidebar-background as well?
url: http://designoginspirasjon.blogspot.com/

Vin said...

Marianne,

Can you link to a screenshot image showing the defect?

Marianne said...

Done! Thanks so much for helping

Anne said...

Hi there,

I´m sorry if I might repeat anyone´s request, if so, please give me the link to the corresponding thread. I tried to widen the side bar and the main column, but it results not to widen also the backround (colour), plus I would like to have the side bar give more space for text. That´s my blog: zeitloses.blogspot.com. A good example of how I would like to use it is el-cuatro.blogspot.com.

Thanks for any help on that!

Anne

Vin said...

Anne,

The background color is due to images. See this type of code in template :

#main-top {
width:700px;
height:49px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide;
....
}

You have to download this image :

http://www.blogblog.com/scribe/bg_paper_top.jpg

then in image editor on PC you have to resize it to new width Then upload it to Photobucket.com and put Direct Link of image in same above code in template.

Scrip said...

Hi, I could change the widths of the columns, but the text did not spread to the additional space thus created. the url is http://funparyatan.blogspot.com/

plase advise

Vin said...

Scrip,

Check out How I increased width of Rounders template here.

Anonymous said...

Hi Vin,

I wanted to further widen my scribe template to 1025px but I don't know how find the images, resizing them and uploading them and put their links up in the template.

could you give me directions as to how? I would really appreciate it. Thanks!

Monkey

Vin said...

Anonymous,

Check out how I did it with the Rounders Template mod.

Garrett Goerl said...

I want to move my sidebar further right, a little help?

Vin said...

Garrett Goerl,

Only the sidebar? What to do with the blank space created due to the move?

noirohio vintage said...

Hey! I've followed everything to widen my text but then my side bar with the info and history gets moved to the bottom. How can I still have big photos AND have the sidebar still to the right?
url :http://noirohiovintage.blogspot.com/

noirohio vintage said...

SORRY! disregard the last post.
i figured it out. my brain hurts now ;)

Xenophanes said...

I think my problem is the same as Lollygag above. I expanded my outer wrapper from 740 px to 940, and my main wrap 1 from 485 to 685. It gives me approximately the width I want, but does it by creating a blank column in the middle of the page. I want the posts to expand to fill that space. It also messed with the header, but that's less important to me.

blog address: http://kalypsosenvy.blogspot.com

Thanks for your help.

Vin said...

Xenophanes,

In the Rounders Template there is another div inside the main wrapper whose width you have to increase by same amount :

#main {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y left;
padding:0;
width:485px;
}

Xenophanes said...

OK, I added 200 px to just about everything, and it expands to fill the area; but now there's a line down the middle of each page. Here's the relevant code (this is for http://kalypsosenvy.blogspot.com):

#outer-wrapper {
width:940px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:685px;
float:$startSide;
background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide;
padding:0;
width:685px;
}
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

.main .widget {
margin-top: 4px;
width: 668px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 684px;
}

I tried something similar with my other blog (http://xssf.blogspot.com), and it looks OK until you scroll down.

Vin said...

Xenophanes,

To get rid of the lines delete :

http://www.blogblog.com/rounders/rails_main.gif

Ian Timshel said...

Vin
Thank-you very much for the help. Your patience with the public is commendable. I looked at and tried several sets of instruction before I found yours that worked. I learnt a lot reading your replies and look forward to looking around here some more and making it a regular stop.

===

Vin said...

Ms.zebra,

To increase width of posts column change the number here :

#main-wrapper {
width: 410px;
...
}

Then increase the number here by same amount :

#outer-wrapper {
width: 660px;
...
}

Then save template. Clear cache and view blog.

===

This was what worked for me. It was so simple.
My journal/blog has a much wider posting area now. Yeah!

http://clickspring.blogspot.com/

Thanks again.
Cheers!

Brook said...

I have read and reread your post on changing the width of my header. I'm still having trouble.
Problems: I can't get my picture to fit inside the wrapper completely. Image fits on left, top, and bottom but goes over the right side an inch or so. I would also like the whole image and wrapper to decrease inside, mostly the height. the width is fine. any suggestions would be so appreciated. Much thanks!
http://thebestfamilydays.blogspot.com/

Brook said...

Sorry to send another message. I played with my page a bit more and now have the header smaller. I just can't get the image to stretch across the entire header.The image is on the far left side of my header and I can't figure out where/how to change that. I wouldn't mind the header being a bit small too.
the html template shows this:
/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:50px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;

}
thank you so much for your time.

Vin said...

Brook,

It is a "Stretch" Template. The width resizes according to width of the viewer's monitor.

What is the resolution/width of your monitor? Go to Display Properties on your PC from Control Panel and click Settings tab and in lower left gives you the resolution in pixels.

SARiX said...

Thank you very much sir , very clear :-D

Scott said...

Thanks Vin - very nice, succinct, and helpful answer!

Scott

Carlyn said...

Hello, i can't find OUTER-WRAPPER in my edit html box :(

HELP PLEASE ! Thanks a bunch.

Kathryn said...

Worked perfectly! Thanks for the easy to follow steps!

narayguy said...

Holy cow there are a lot of comments here. Used this hack to widen my college advice blog! Thanks for the tip!

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.