removing unwanted elements from blogger page

Question

I'm trying to embed an iframe into the page called 'test' of my test blog - damianp1.blogspot.co.uk

I've removed a lot of the unwanted items from the page to make as much room as possible, but can't find the id's to remove the blue box which appears behind the iframe, and also can't get the iframe to fit into the white box with the grey border at the bottom.

Here is the code I've used up to now:

<style type="text/css">

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
.main-inner .columns {position: relative; left: -205px; top 50px; width: 1305;padding-left:0 !
important;padding-right:0 !important;}

</style>
</b:if>
<style>]

</style>

<div class="post-outer" style="width:1100px;">
<div id="outerdiv" style="width: 1200px; overflow: hidden">
<iframe width="1300" style="position: relative; left: -190px; top: -34px" height="600" 
src="http://wildlife-ramblings.blogspot.co.uk/" scrolling="yes" frameborder="0"></iframe>
</div>
</div>

Can someone please tell me how to get everything fitting together properly so that the iframe fills the page neatly?

Many thanks, Damian.

Answer 1

The blue box behind the iframe is located here:

.post-outer {
background-color: #eef8f8;
border: solid 1px #e8e8e8;

To remove the blue box, you can hide ".post-outer" or:

background-color: transparent;
border: none;

Add "!important" where needed.

The white box behind the iframe is located here:

.main-outer {

To remove the border, remove:

box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

EDIT: (based on different format idea)

If you're wanting to expand the blue and white portions, you have to expand the width of the blog to the same width or greater than that of the iframe. Click on "Template" > orange button that says "Customize". On the page that loads click "Adjust Widths".

If you don't want to increase the whole blog width, you can use conditional tags to only effect that page. To only affect that specific page, find "/b:skin" and paste the follow code BELOW it:

 <b:if cond='data:blog.url == &quot;http://damianp1.blogspot.co.uk/p/test_6572.html&quot;'>
 <style>
 #Blog1 {
 width: 1200px !important;
 }
 </style>
 </b:if>

To expand the height of the white part, you will have to add a "height: 800px" or however high the iframe is (or 20px-40px more to extend it past the iframe).

Make sure you remove the 110% width on the .post-outer and whatever else edits you have done previously before the first answer.

EDIT: Asked about better way of doing this:

Inside the post page where you want the ifrmae, use this code:

<style>
html, body {
overflow-y: hidden;
} 

#iframe-wrapper {
height: 100%;
width:1100px;
position: fixed;
scroll: no;
margin: 0 auto;
left:0px;
right: 0px;
z-index:9999;
margin-top: -52px;
top: 0px
bottom: 0px;
}

#title-wrapper {
height:70%;
margin:0 auto;
width: fixed;
background-color:  white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
border-bottom:20px  white solid;
border-right:20px  white solid;
border-left:20px  white solid;
text-align:center;
border-radius:30px;
-moz-border-radius:  30px;
-webkit-border-radius:  30px; 
}

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
</style>

<div id="iframe-wrapper"><div id="iframe-inner">
</div><div id="title-wrapper"><h3><span style="color: black; font-size: 30px">Wildlife Ramblings</span></h3>

<div style="border: solid #e8e8e8 1px; padding: 20px; background: #eef8f8; border-radius:20px; -moz-border-radius:  20px; -webkit-border-radius: 20px; height: 83%"><embed  src="http://wildlife-ramblings.blogspot.co.uk/" width="100%" height="100%"></embed></div>
</div></div>

This will put the iframe over the blog itself (but with the same blog style containing the blue and white backgrounds with round corners), only on the page you paste the code in. Perhaps this will be easier for you.

You may need to adjust the positioning of the iframe by changing part of the code shown above. Find this part of the code:

#iframe-wrapper {
margin-top: -52px;
}

To move the whole iframe up (closer to the top of the page), increase the -52px to -62px (or whatever). To move the whole iframe down (closer to the bottom of the page) decrease the -52px to -42px or whatever.

That should be the only part of the code that needs adjusting.

This a snapshot of what the above code should look like when you copy and paste it within the your blogger page:

Answer 2

Using your help from the above posts, I've just tried this within the html of the page itself and it seems to work...

<style type="text/css">

.blog-pager, .footer, .footer-outer, .post-footer, #sidebar-wrapper, #midsidebar-
wrapper, .gapad2, .post-header-line-1, .navbar, .feed-links, #Attribution1, .comments, 
.post-title, .sidebar { display:none !important;}

#Blog1 { width: 1100px; !important; } .main-outer { width: 1170px !important; }

</style>
</b:if>
<style>]
</style>

<iframe src="http://wildlife-ramblings.blogspot.co.uk/" style= border:3px #eef8f8 
solid;" name="Wildlife Ramblings" scrolling="yes" frameborder="1" marginheight="5px" 
marginwidth="5px" height="800px" width="100%"></iframe>

Here is the result... http://damianp1.blogspot.co.uk/p/test_5.html

I'm not sure how good a solution that is, but it's the best I've found so far. I wish I understood this instead of just faffing around with different code! Are there any better ways of doing this?

Thanks again, Damian.