Picture Window Template Settings - iframe

Question

My blog: http://friendsojpblog.blogspot.com/
The questions below relate to the circled numbers shown on the attached
file.
I would like to eliminate the 'Title and the Description' Header section, as noted with #1, so it looks like the image on the right (as shown with the red arrow).
Because the blog scrolls as more is added, this Header disappears from view.
Since I am using this in an iframe, my plan is to add a stationary Title/Description header image above the iframe.
Other sections in the blog can be deleted within Blogger's layout options, but I can't find a way to eliminate the header. Is there a way to eliminate the Header?
When I removed the background image, I chose a solid color.
In this attachment, the background is a medium gray, and the narrow border is a light gray.
I want the Background to be white, transparent or preferably eliminated completely, but when I chose white or transparent from Settings, the color of the narrow border turns white.
Is there some way to set the Background color and still maintain the light
gray narrow border? Or better yet, eliminate it completely?
The 'box' containing the Archive has a dark gray background.
This makes it hard to read the text, no matter what text color I choose.
Is there some way to change the background color of this box?
I have the width of the blog set to the minimum of 500 pixels.
I would like to make it somewhat narrower, but I cannot find any way to do this.
Is it possible to make it narrower?
Screenshot of my Blogger:
************
Update: 7/7/2016
Dani:
Here is the CSS code I added. It is the only CSS code for The Park Blog.
.region-inner .header-inner {
display: none;
}
body {
background: #ffffff; /* White. Confused by your wording here - should be right. */
}
.content-inner {
background: #DCDCDC; /* Light Gray. You can change it to whatever you wish. */
}
.footer-outer {
background: #33CC33; /* Green. You can change it to whatever you wish. */
}
body {
min-width: 300px; /* Now it's 400px. change the "400"s you see to the number you wish. */
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 300px;
max-width: 300px;
_width: 300px;
}
You added a 1B to your previous answer. All your steps seemed to work, and changes appear saved. However, after step 7, when I view my blog, nothing has changed. When I then recheck the steps, ‘false’ has been replaced with ‘true’, and the Header element is back. I tried this several times, and the results were always the same. Did I miss a step?
Blog min-width. It does not work for me, unless I coded it wrong. Viewing the Page Source, lines 487-494, shows a ‘template-skin-1’, with a min-width: 500px, which appears to override the CSS code I added. I cannot find a way to change this ‘template-skin-1’ code.
Update: 7/9/2016
Dani:
Could not get changes suggested for eliminating header to work. Will try again later.
The width changes do work. For a stand alone blogger, only had to add !important to two lines. Also, only the max-width: has to have pix >0, but both lines have to have !important. See new code below.
body {
min-width: 00px; /* Now it's 400px. change the "400"s you see to the number you wish. */
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 00px!important;
max-width: 400px!important;
_width: 00px;
}
To place the Blogger correctly in an iframe, this line must also be modified as follows.
min-width: 400px!important; /* Now it's 400px. change the "400"s you see to the number you wish. */
Harry

Answer 1

1. Hide title and description
.region-inner.header-inner {
display: none;
}
1B. Remove Header completely:
Go to your HTML template, press "Ctrl-F" to open your browser's search box and paste the following code snippet in it:
widget id='Header1' locked='true'
Your browser should now automatically locate the section of your blog's HTML code that contains that snippet.
Replace "true" with "false" to unlock the header and click on "Save Template."
By default Blogger prevents users from being able to remove the blog title element.
Select "Close."
Select "Layout" from the left column and click "Edit" under the Header element.
Click "Remove" at the bottom of the window and select "OK."
Save your new template by clicking on "Save Arrangement."
2. Remove background
body {
background: #ffffff; /* Confused by your wording here - should be right. */
}
Then, to choose background of inner "box":
.content-inner {
background: #ff0000; /* Red. You can change it to whatever you wish. */
}
3. Archive box color
.footer-outer {
background: #ff0000; /* Red. You can change it to whatever you wish. */
}
4. Blog min-width
body {
min-width: 400px !important; /* Now it's 400px. change the "400"s you see to the number you wish. */
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 400px !important;
max-width: 400px !important;
_width: 400px !important;
}
5. Result
(Random colors).
Title and description are hidden.
Background is gone.
Archive box color is chosen.
Blog min-width changed.
Update (July 8):
‘false’ has been replaced with ‘true’:
Backup your code, and try removing that line of code from your HTML template, saving, and checking blog again.
Blog min-width: add !important right before the ; of the lines stating the wanted width, in your custom CSS (see edited question).
Note: this company customizes Blogs. And for full disclosure I'm affiliated with it: alldani.com