[SOLVED] Construct 2 Blogger Header?

Get help using Construct 2

Post » Fri Mar 29, 2013 2:30 am

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 ?
B
49
S
14
G
3
Posts: 540
Reputation: 5,611

Post » Fri Mar 29, 2013 3:18 am

Okay finally got it working:

http://www.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.
B
49
S
14
G
3
Posts: 540
Reputation: 5,611

Post » Fri Mar 29, 2013 12:46 pm

@Mr 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.
B
40
S
11
G
6
Posts: 228
Reputation: 6,946

Post » Fri Mar 29, 2013 1:05 pm

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)Mr E Bear2013-03-29 13:11:56
B
49
S
14
G
3
Posts: 540
Reputation: 5,611

Post » Fri Mar 29, 2013 1:37 pm

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>
B
40
S
11
G
6
Posts: 228
Reputation: 6,946

Post » Fri Mar 29, 2013 3:29 pm

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

Here's my source:


The iframe HTML exists within your existing block, yes.

I'd try:
[QUOTE]
#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>
[/QUOTE]
B
49
S
14
G
3
Posts: 540
Reputation: 5,611

Post » Fri Mar 29, 2013 4:36 pm

@Mr 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 ;-)
B
40
S
11
G
6
Posts: 228
Reputation: 6,946

Post » Fri Mar 29, 2013 5:32 pm

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?Mr E Bear2013-03-29 17:34:16
B
49
S
14
G
3
Posts: 540
Reputation: 5,611

Post » Fri Mar 29, 2013 6:13 pm

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.
B
40
S
11
G
6
Posts: 228
Reputation: 6,946

Post » Sat Mar 30, 2013 5:45 pm

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>
B
49
S
14
G
3
Posts: 540
Reputation: 5,611

PreviousNext

Return to How do I....?

Who is online

Users browsing this forum: supreme676, Yahoo [Bot] and 7 guests