Remove Background on “Picture Window” Template – Blogger

Remove background on “Picture Window” template on Blogger by following the directions below. If you have just installed a free blog background onto the “Picture Window” template from Bloggers Template Designer you may be seeing a transparent/clear white background over the blog post/sidebar section and footer that you don’t want there – You will see this unwanted transparent background mostly when you choose a free background with a colored post (middle) section, the problem is the Blogger “Picture Window” template has a built in post background color, it’s a transparent white but it doesn’t look good with the colored post section backgrounds so you will need to remove it, don’t worry I’ll walk you through it because I want you to be able to use all of my free backgrounds, even the backgrounds with a colored post section!

 

How to remove background on "Picture Window" template Blogger

So here we go! Follow the steps below to remove transparent background and other unwanted areas on the “Picture Window” template.

//////ALWAYS download a copy of your template before changing the html, you can do this right from this page just click on “Download Full Template”//////

From your blog click on “Design” in the upper right hand corner

From there click on “Edit Html

You will be brought to a new page, if the page is blank hit “back” and then click “edit html” again.

Now you will see the template code!

Step 1: Remove Outer Border Around Post and Sidebar Area

The 1st thing we have to do is remove the very thin border around the transparent background before we actually remove the background on “Picture Window” template. Or else you will have a border with nothing inside and it will look really bad.

 

////IMPORTANT: For all instructions you will have to locate the code to edit. The easiest way to do this is to click inside the html box at the very top/beginning of the code. Just take your mouse and click and then hit “ctrl” and “f” on your keyboard and a little box will pop up where you can enter text to search for as stated in the instructions below.////

Look for the code below. Again the easiest way would be to hit ctrl F from your keyboard and then copy and paste this in the box: “region.shadow.spread” and then hit “enter” this will bring you to the code you need to edit.

 

Right now it 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"/>

It needs to look like this:


    <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"/> 


All you have to do is change every number you see in that section of code (I put them in red in the top code) change them to 0 (zero). That’s it! Now the border is gone!

Click “Preview” and you should see that the border is gone, if so click “Save Template” before you continue editing.

Step 1 is done, now you are ready to remove the background!

 

Step 2: Remove the transparent background from the “Picture Window” template
This is the part that will remove background on “Picture Window” template Blogger template.
Now earch for the below section of Html:  “main.background”  (again click ctrl/f and enter it into the box that pops up) and it will bring you right to the section of code you need to edit.
So right now the code looks like this:

   <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"/>

It needs to look like this:


  
<Variable name="main.background" description="Main Background" type="background"  default="transparent url() repeat scroll top left" value="transparent url() repeat scroll top left"/>
 
value="transparent url() repeat scroll top left"/>   

It's not as bad as it may look. All you need to do is delete what you see in red in the 1st block of code.
 
You actually have 2 options you can either delete the above code you have in there now and replace it with the edited code I have above in blue
OR
You can simply delete the url’s in the code directly in the html window. You will see the url’s in between ( ) leave the brackets but remove the links you see inside of them.

Click “Preview” and you should see that the background is gone, if so click “Save Template” before you continue editing.

That’s it for this part- see not so bad so far! This step just removed the transparent white background.

Step 3: Remove Border Around Post Section(optional)

 

Look for the code below. Again the easiest way would be to hit ctrl F from your keyboard and then copy and paste this in the box: .post-outer this will bring you to the code you need to edit.
 Right now it looks like this:
.post-outer {
background-color: $(post.background.color);
border: solid 1px $(post.border.color);
It needs to look like this:
.post-outer {
background-color: $(post.background.color);
border: solid 0px $(post.border.color);
Click “preview changes” you will see the border is gone. If you want to change the background post section of the Picture Window template just use the template designer – it’s much easier.

Extra helpful instructions:

 

——–How to remove the grey footer bar from the “Picture Window” template———

So whether you have chose a colored blog background or a white mid section blog background you will most likely want to remove the grey footer bar that you see at the bottom of your blog. This is also part of the “Picture Window” template so you will need to remove it.

Search for the below section of Html. The easiest way to do this is to hit ctrl F on your keyboard a box will come up enter: “footer.background” and it will bring you right to the section of code you need to edit.

 

Right now it looks like this:

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”/>

 

It needs to look like this:


       default="transparent url() repeat scroll top left" value="transparent url() repeat scroll top left"/>

All you need to do is delete what you see in red in the 1st code block.



Again, all I have done is removed the url link from the brackets ( ). So, just like removing the white transparent background above you have 2 options:

You can either delete the above code you have in there now and replace it with the edited code I have above in blue

Or

You can simply delete the url’s in the code. You will see them in between ( ) leave the brackets but remove the links you see inside of them.

Now, click “Preview” and you should see that the grey footer is gone, if so click “Save Template” and you are set to go!

 

——–Change background color of post section——–

You may notice that you now have a navigation menu with a background color that looks like it is floating. This is an easy fix just go to the template designer and change the color for the tabs to transparent. To do this:

Make sure you save the changes you have already made.

Go back to the template page and click on “customize”

Click “advanced”

Click “backgrounds” and then choose the colors you want!

Click “save” and you are all set!

——Remove navigation tab background colors——

////CAUTION: This is a bit more difficult! If you remove the wrong code you will not be able to change the background colors!////

Delete this:

background: $(tab.background);

AND

delete this:

background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
color: $(tabs.selected.text.color);

You now have successfully removed the background and edited your picture window template! If you need a background for your customized template check out our free blog backgrounds!

Want a cute template without having to edit anything? Check out premade blog templates for Blogger!

If you have any questions feel free to leave a comment!

Comments

  1. Hi! I put my own background image in using the blogger picture window template, and I’m trying to make my blog title not visible on top of it. Can you tell me how to do that? Thanks!!!

  2. I put my own background image in the blogger picture window template and am trying to make my blog title not visible since I have that in the background image. Can you tell me how to do that??

    • @Tracy

      To remove your blog title (have it not appear) simply remove the the header widget. So go to “layout” and click “edit” on the header widget and then click “remove”.

      If remove is locked (if it is locked it won’t let you remove it) then try removing your name so that the blog title box is empty and then saving the widget.

      If neither of those work, you can go into the html and look for the header widget. It will say locked=”true” change “true” to “false” save and then go back to the layout page and now you should be able to remove the header widget by clicking “edit” and then “delete”.

  3. hi…
    i’d follow your instruction but, my grey background is still there..
    i’m blur as i’d really hate the grey background..it makes my blog looks funny & dark even in transparent mode.
    is there any way to permanently remove it?

    • Hi,

      Your code won’t come through on comments can you send me a link to your site and I can try and look at the code. The grey should be removed if following the directions above so not sure why it is still showing up for you. Send me your link and I will look as soon as I can. Thx

  4. Hi. I followed the instructions but nothing has changed! My blog is as transparent as before. What am i doing wrong?

  5. Hi! I don’t know why, but everytime i change something in html, my blog goes back to the original background and don’t want to change anything after that. So I have to start again from the beginning every time… Any ideas how to fix it?

    • @Katie, it looks like you got it! Sometimes backgrounds from other sites are really hard to remove the code often hides in misc. widgets so you have to go through widget by widget until you find the code from the other place you got your previous background.

  6. Hi Emily,

    I followed all your instructions,and it really worked……

  7. Anonymous says:

    Thank you very much for this tutorial. I tried everything and it worked but I still have problems with the tabs background. It shows grey and I want them to look transparent. Any idea? Thanks

  8. This is a great tutorial, and I fixed two blogs with your instructions! Thank you!!!

  9. Awesome! Thank you so much!

  10. Thank you thank you thank you !

  11. Thank you so much. This was very helpful.
    How do I add some sort of background that will make my widgets show up more visible? Now that the gray background is gone, my widgets cannot been seen at all. is there anyway to fix this?

  12. Thanks! I search it almost a yearrrrr :)

  13. Thank you so much….!

  14. Thanks for the tute! My only proble is it removes any background from behind the side bar which makes it harder to read. Can I keep the white bacvkground but make it non – transparent? Thanks. sorry if that makes no sense x

  15. Thank you so much!!!

  16. @Melissa,

    You actually did remove the transparent background from the template but the blog background you choose has a middle transparent section that is what you are seeing. :)

  17. Hi Emily

    I followed your instructions for removing the transparent background but it’s still there :( Any idea what I could be doing wrong. I removed the code and pasted your code in there, previewed and tried saving but it remains.

    Your help will be appreciated!

    My blog http://melissa-thesweetestgift.blogspot.com

  18. Thank you so much for the tut!!! Very easy when you walk us through it!

  19. Lol, I’m glad you fixed it!

  20. OH-M-G I was putting up the post for you and somehow I have fixed it in all my aimless tweaking! YAYAYAYAY

  21. I have not posted one with the photo border yet because i just made these changes today. I will put up a test tab to show you. THANKS FOR YOUR HELP

  22. @Leslie I took a look at your blog but do not see any ugly border? Are you referring to the post and sidebar transparent background?

  23. Hey Emily
    Thanks so much for doing this! I consider myself pretty savvy.. just totally dumb when it comes to code! Could you help me figure out how to get the UGLY border that Picture Window forces upon me out of the code? I would be EVER so grateful!!!

  24. hi,

    im a bit of a noob, i want the footer but i want to change the color from grey to white like my background. is there a way to do that without too much damage? which part of the code is it?

    thxxx

  25. Anonymous says:

    Thanks!!! Just what I needed!

  26. @Brinna- The white you have on your blog is the post background not the outer transparent white background. I would look for the post section and remove where it says “white” or #ffffff. I have not played around with that section of the code. Hope that helps.

  27. I have tried everything you said but I still have it around my post do you know where else I could try changing the code or what I can do to get rid of the white shadow. Could it be in my template or background maybe? Heres my page so you can see a visual http://www.laughyourwaythroughlife.blogspot.com

  28. I followed all your directions successfully, except for removing the black bar. It’s still there! I did everything you said…Any suggestions?

  29. Thank you so much! You just saved my life! :)

  30. @ Heather,

    So glad you pointed that out, I will write a post on it ASAP. So that you can fix it on your blog here is how to do it:

    Look for this:

      

      

      

      

      

    CHANGE ALL NUMBERS ON THE ABOVE CODE TO 0 (ZERO) THIS WILL DELETE THAT BORDER

    Hope that helps! :)

  31. thank you so so much!!!

    i still have a little bit of a “ghost” outline around where the boxes were previously…. any ideas on how to remove those?

  32. I have not yet altered the sidebar but I am thinking you would alter
    .column-right-outer or .body-fauxcolumn-outer div. I know you can change a lot just by adding CSS directly through the template designer but as for within the html I only know that sidebar items are referred to as “outer” not sidebar. Hope that helps, if I find out any more I will let you know!

  33. Thanks I really appreciate this. I had been looking around for tutorials on how to customize the Picture Window template.

    BTW how do i find this “div id=#sidebar” or “div id=#sidebar-wrapper” in the template. I want to add mutlti-tab widget on the sidebar but i can’t find the sidebar id.

    Thanks in advance!!!

Speak Your Mind

*