**NEW** How to remove transparent background from template
-Do you have the new Picture Window
template? If so you probably have a transparent box in the center that
covers your cute background! You will find out in this easy tutorial how to remove that opaque background behind your blog post!
-Does your post and sidebar hang off the
sides of the center of your background? I will show you how to adjust the width of your posts and sidebars so it fits on your background.
-Also, I will show you how to
remove the annoying gray box that is at the bottom of your blog!
Before:
1.) Go to your 'Design' page and click on 'Edit HTML'
2.) Click on the box next to Expand Widget Template
3.) Next you are going to search for the code that is in the box below. Hit ctrl F and it will bring up a search box. Insert this text in the box: main.background It will bring you to this code:
<Variable name="main.background" description="Main Background" type="background"
default="transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left" value="transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/>
<Variable name="main.padding.sides" description="Main Padding Sides" type="length" default="20px" value="20px"/> You will need copy the code below and replace it over the code above.
<Variable name="main.background" description="Main Background" type="background"
default="transparent url() repeat scroll top left" value="transparent url() repeat scroll top left"/>
<Variable name="main.padding.sides" description="Main Padding Sides" type="length" default="20px" value="20px"/>Once you do that click preview and if it looks good save!
4.)You will now notice you still have the annoying border around the post section. To remove this go back to your 'Edit HTML' page and hit Ctrl F again. Paste this in that box: region.shadow.spread It will bring you to a code that looks like this:
<Variable name="region.shadow.spread" description="Main and Footer Shadow Spread" type="length" default="3px" value="3px"/>
<Variable name="region.shadow.offset" description="Main and Footer Shadow Offset" type="length" default="1px" value="1px"/> You will need to highlight the code above and replace it with the code below:
<Variable
name="region.shadow.spread" description="Main and Footer Shadow Spread"
type="length" default="0px" value="0px"/>
<Variable name="region.shadow.offset" description="Main and
Footer Shadow Offset" type="length" default="0px" value="0px"/> Preview template and if it looks good click save.
5.) Now we will get rid of the gray box that is at the bottom of your blog. This is the gray footer bar with the picture window template. Go to your 'Edit HTML' screen again. Hit Ctrl F and paste this in the box: footer.background
It will bring you to the code that looks like this:
<Variable name="footer.background" description="Footer Background" type="background"
default="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left"/> Highlight that code and replace it with the code below:
<Variable name="footer.background" description="Footer Background" type="background"
default="transparent url() repeat scroll top left" value="transparent url() repeat scroll top left"/> Preview and Save!
6.) Now we will adjust the width of your posts and sidebar. If you notice the picture above the post is hanging off the center of the background. Go to your 'Design' page and click on 'Template Designer'. Notice above you will click on 'Layout', 'Adjust width' and then you can adjust the width to where it looks good on your blog!
After!
