[SOLVED] Construct 2 Blogger Header?

Hmmm I'm unfamilar with blogger, I'd guess sticking it after the closed brace would work.

Here's my source:

<img src="http://i.imgur.com/v1sgOcg.png" border="0" />

The iframe HTML exists within your existing block, yes.

I'd try:

#layout .region-inner {

        min-width: 0;

        width: auto;

      }

#iframe {

    width: 1150px;

    height: 300px;

    margin: 0 auto;

    background-color: #777;

    display:block;

}

      ]]>

    </b:template-skin>

</head>

— E Bear ,

Hmmmmmm. That didn't really seem to do anything. The way its loading up now (super slow on my work computer) seems like the iframe is behind the body of the draft and then everything slides down to make room for it. Clicking on the red block does nothing.

In the version you created, did you just import the iframe in the code without going through the widget? Maybe I can just delete the widget I have in the blogger tool and just put the iframe in through code?

I realize that I'm going to owe you a big favor, but draw the line at a kidney ;-)

Bummer!

Incidentally the effect you mentioned is what happens to my work when I remove the widget container, I assume that talks to whatever Blogger uses to format it's pages.

Could you dump all the code as it appears in Blogger? It might make more sense in context.

If Blogger has a HTML area where you can put pure HTML, I'd use one of those; but from my understanding that's what we were already doing?

Here is the HTML code that I'm pulling from blogger. It has a section where you can upload new "templates". You just get the code from some site and then paste it into this area. The differences I'm made so far is just adding the ability to add extra widgets and I deleted the Header widget. The widget that I inserted inside Blogger's interface is called Construct2.

HTML with Open Widgets

If you think it would help to see how their interface works, I can add you as a user of the blog to see what I have going on in there. You seem trustworthy enough and I have all of the original code saved to my computer so I can fix any problems that may come up. Thanks again.

Okay, wishful thinking but try:

#layout .region-inner {

        min-width: 0;

        width: auto;

      }

      ]]>

    </b:template-skin>

#iframe {

    width: 1150px;

    height: 300px;

    margin: 0 auto;

    background-color: #777;

    display:block;

}

</head>

Didn't seem to work. It put the code at the top of the blog. You can see it at my site:

Need Your Disease

If you want, we can throw in the towel on this. You've spent a lot of time on this and it might just not be possible in blogger. Let me know what you think.

-Ben

Actually, if you have a second to skim over something I would appreciate it.

When I first started this, I was able to create an extra "header" widget in blogger and put my iframe in it. The problem I had was that the iframe was showing up behind my header description and couldn't be interacted with.

Looking at these tutorials, do you think its possible to ignore the widgets, place the code for the iframe directly into the html, and then set it to "float" above the actual blog?

If you look for "CSS Positioning Code" you'll see where they talk about it: Floating Content in Iframe

I also found that if you set the "left" property to 50% that it will center in the page: Center Iframe

I'd like to hear your thoughts on it. Thanks.

Ben

Wait you have access to pure HTML? If that's the case just put this above your doctype, absolute first line of code (Theoretically bad practice):

<iframe id="iframe" src="http://dl.dropbox.com/u/56104169/WebTest/index.html" width="1150" height="300" scrolling="no" frameborder="0" ></iframe>

And remove the following:

<div class='navbar section' id='navbar'><div class='widget HTML' id='HTML5'>

<h2 class='title'>Construct2</h2>

<div class='widget-content'>

<div class='clear'></div>

<span class='widget-item-control'>

<span class='item-control blog-admin'>

<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1649094877974200757&widgetType=HTML&widgetId=HTML5&action=editWidget&sectionId=navbar' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML5"));' target='configHTML5' title='Edit'>

<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>

</a>

</span>

</span>

<div class='clear'></div>

</div>

The CSS will do all the positioning you need.

Hmmmm. Couldn't find any of the "<div class='navbar section' id='navbar'><div class='widget HTML' id='HTML5'>" anywhere so I just tried it with a fresh start on blogger. Putting it in the absolute beginning gave me a format error so I tried pluging it in at different areas of the code. It didn't appear anywhere. Weird.

— E Bear

Almost there! So I found some blog post where a guy put an iframe at the bottom of his posts section. Following that, I put the iframe above </header> and it works! I think its the same concept that you were talking about, I just don't know enough HTML to get it into the right spot. Of course, it still loads up the page inside of the iframe when I press that button (like you pointed out), but at least its working.

Right now I'm trying to get it centered horizontally on the page. I tried align="middle" and it did nothing so I will do some more research on that later. I also have a black border showing up along the top and left of the iframe, but I think that's a margins thing.

If you have any thoughts on the alignment or border, let me know. If not, thanks again for joining in on my incredible headache.

-Ben

Hmmm try div align:

<div align="center">

<iframe id="iframe" src="http://dl.dropbox.com/u/56104169/WebTest/index.html" width="1150" height="300" scrolling="no" frameBorder="0" ></iframe></div>

The black border appears for me to, if you upload your C2 project by FTP you can change the background colour by editing the HTML, odd that it doesn't appear in Blogger though.

It worked! Thanks! I saw a tutorial on here that talks about editing your exported html file to change some things. I'm going to read that over tonight. I'll let you know when I get the Construct 2 project finished and loaded up to the blog. Thanks again for you help.