Translate This Blog
Remember To Always Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Make Designer Templates Stretch (Blogger)

A lot of users have been asking Blogger when they would come out with new stretch templates. Well in this post I will tell you how you can turn your new template into a stretch template.

This may or may not work if you have changed your template coding through the Edit HTML page.

1. Go to Design-->Template Designer--> Advanced-->Add CSS
2. Depending on which template you have you can use the following code below.


Simple, Picture Window and, Travel Templates:
body {
  padding-left: 10px;
  padding-right: 10px;
}
html body .content-outer {
  max-width: 100%;
}
Awesome inc, and Watermark Templates:
html body .region-inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 100%;
}
Sorry but the Ethereal template does not work with this tweak.


3. After you paste the code into the Add CSS box, hit the space bar with the cursor still in the box for it to take effect.


If you do not see your template stretch after hitting the space bar then likely you have a corrupted template.

12 comments:

YoboY said...

This is awesome Aires. You mind if I provide this link to certain askers in the Help forum?

AiresOFwar said...

Lol yeah simple and it works. No go right ahead!

NMitra said...

es genial!

Trisha Ashley said...

ok, now my header is all messed up , so how do I get it back to how do i remove this "stretch"?

AiresOFwar said...

Remove the coding from the Add CSS box and save. However if your having troubles with your header we can probably help you fix it.

kriznizzel said...

Thank you so much for your quick reply I think I commented on the the wrong tweak and you miss understood me. I am trying to stretch my blog (not my header) I have done the above which worked great but it made my header go to the left and I would like to have it centered, is there a way to fix this. note that when you look at my blog you will not see the problem as I have left it as normal until I can figure it out Thanks
http://kriznizzel.blogspot.com/

AiresOFwar said...

To position the header input this code below into the CSS box.

#Header1_headerimg {
position: relative;
left: 100px;
}

Adjust the bold print to your liking. The higher the number the farther right the image will display.

Vera said...

Oh my gosh thank you thank you thank you!!! This was the answer to a whole day's worth of trying to get my blog stretched with the new templates!

Jim (JR) said...

Dude, you so ROCK! You rock to such an extent that you are likely to fall over!!

I have been trying to figure this out for - oh - eons? I figured that I was going to have to get a college degree in CSS to even START the process.

I was going to say "You da BOMB!", but I figured the explosion would do too much damage to the servers. And that would be a shame, depriving all that follow of your useful techniques!

Jim

Claire said...

Thank you soooooooo much, I have been wanting to do this for ages <3 <3

Little Stalky said...

So excited that this works. You're a genius!

Michelle said...

Thank you so much! I've been trying to figure this out forever. I really appreciate it!

Post a Comment

Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.

Web Design Blogs PageRank