[SOLVED] Construct 2 Blogger Header?

I was wondering if anyone here has used a Construct 2 project as their header in Blogger. I'm not very HTML savvy and am struggling a lot with it. Just curious if someone else here has pulled it off and could give me some pointers.

Thanks.

-Ben

I made something like this, not only the header, I just dont know the right english word for it. I think it?s border or marginal not sure, I hope you understand it.

It was a small snake game arround a Website/Blog. But the customer tought it is to much. Cause this was arround the website I made a layout with a white space in the middle.

You can do this easily with iframes or Jquerry, works fine. For me I also needed to make some changes to the canvas with Jquery, without it wasnt dynamicly.

Hope I could help you a bit.

That's sounds pretty cool. I don't know much HTML. Do you know if it is possible to "float" an iframe over a website? Last night I was struggling with it and had it sitting behind my blog's actual Header area so I couldn't click anything.

Just use Html and Css, here is a copy from my Code

Html code:

<iframe id="iframe" src="c2.html" width="4000" height="2000" frameborder="0" ></iframe>

Css Code:

#iframe {

    float: left;

    min-width: 1000px;

    margin: 10px auto 10px;

    clear: both;

}

If you have any other question, feel free to ask

I'll try that out tonight and get back to you. Thanks for the help!

No problem ! If it works, could I see it ?

Sure thing. Got busy last night, but am hoping to give it a try tonight. Hopefully I can just get a template in place and then replace it with the finished product later.

So right now I have the Construct 2 project at the top of the page. Here are my problems:

I'm don't think you can interact with it. Clicking on the red box should load my website: needyourdisease.com It works when I just load the index file from dropbox, but not from the page.

The project is aligned to the left when I'd rather it be centered.

Here's my code if you wan't to take a look at it. I have no idea how to correct the problems. I appreciate any help you can give me.

Blogger HTML Code

At the top of your page I get a message that your browser does not support HTML 5. Odd, I am using IE10. What are you using for detection?

BluePhaze nothing special. It's just a code that is part of the I frame. I don't know much HTML so I'm just using the embed code from one of the Tutorials on this site.

I'm currently trying to get this to work (Tonne of code for a webpage!) but the issue I feel should be pointed out beforehand is that your link to your homepage wont work; an iframe is effectively a windowed browser, your link will load your site within the iframe.

Parent frame control is something I'm desperate to try and work out in C2; no idea sadly.

Ashley ?

Okay finally got it working:

ursidacom.co.uk/construct-2-iframe-help.html

Source code: Right click, view source, copy and paste

Accidentally kept changing the blog format... In the end just centered the iframe in CSS.

Sadly the problem I mentioned exists, your home link simply opens within the frame.

— E Bear That's amazing! It even loads quicker. I see what you're saying about it just loading a web page inside of the iframe. I'm pretty sure that Construct 2 has the ability to "open in a new window" so I may switch to that in a few situations. At the moment I just want an interactive banner. Kind of like those old Disney Animated Storybook CD-Roms from back in the day.

I'm having trouble getting it into my blog though. I've tried copying and pasting the code, but Blogger doesn't seem to like the format. Is there anyway you can explain what you did so I can recreate it.

I really appreciate the time you've put into this and hope it isn't too much of a pain.

No problem!

CSS:

#iframe {

    width: 1150px;

    height: 300px;

    margin: 0 auto;

    background-color: #777;

    display:block;

HTML:

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

Positioning is exactly the same as the original, the CSS goes at the bottom below layout .region-inner and the HTML goes between <div class='widget-content'> and <div class='clear'></div>

I'm unsure how blogger works, if there's a specific problem I can have a look at screenshots :)

The main difference is display:block which allows the iframe to be centered like a div, normally iframes align to the left (The i in iframe stands for inline)

So I found the hunk of code that reads:

#layout .region-inner {

        min-width: 0;

        width: auto;

      }

      ]]>

    </b:template-skin>

</head>

Am I putting the CSS code after the line that reads "</head>" or am i putting it after "width: auto;"?

Also, the iframe code you gave me is the same as I put inside the widget in blogger. Blogger uses blocks to arrange the different things you want to put in there. I created an html block in blogger and already had the iframe code in there. Does your version bypass the need for that blogger widget or are you referencing that one?

I only ask because I wasn't able to find div class='widget-content'> and <div class='clear'></div>