Trying to make an iframe work to integrate Ascribe pages into our site.

[Bridgecity]

Hey Truman,

I set up a page in our current website where I want to use an iframe to show the member's section webpages.  The page is up and working.  This is the specific code that calls up the ascribe pages:

Code:

<iframe name=target src="http://www.bc3web.org" width="100%" height="800" frameborder="1" scrolling="auto"></iframe>

But when you surf over there you'll see that the ascribe page completely takes over the browser.  It overrides our site template and the designated iframe space.

If you go to www.bridgecity.org you can see what I mean.  Take the "Member's Area" link.  You'll see the elim skin take over the whole page.  Go back to www.bridgecity.org and take the "google" link.  I set this up to test the code, and to show you what I'd like to have happen.  This page behaves correctly.  You see the google page presented within our website's template.

Why does the elim skin not do this?  Is it a clash between the CSS of our site and the ascribe template?  Do you have any wisdom for me?

Marc

[Truman]

Hi Marc,

Normally, Ascribe pages are configured to "break out of frames". There is a long boring technical reason for this. I won't go into it unless you're curious. But to prevent an Ascribe page from doing so, just uncheck the "Break Frames" checkbox for "web page" page types. Was that confusing? When you create a regular web page in Ascribe you are shown a "break frames" field which is just below the "web page" field.

After you save the page and republish, that http://www.bc3web.org page should no longer break out of frames, but sit nicely in the iframe.

Truman

[Bridgecity]

OK.  I found this box on the index.html page, checked and republished.  It works fine.  I did not find this option on any of the other pages, though.  If I take any of the links to the other pages, the others don't work--they break out.

What I'm planning for our first phase of website integration is to just have a member's section--made up of the login screen, member info, gibing info, announcements, etc. all accessible from one link on our homepage through a page with an iframe. 

What's the next step I ought to take toward this?

[Truman]

In that case, we need to recreate your web design in an Ascribe skin to duplicate the look and feel of your website. Then instead of putting it in an iframe, just link to it.

You can start by going to Assets > Skins and opening up the default "Elim" skin. Then clone it. Rename the clone to your new Bridgecity skin.

The next parts are fairly complicated and will take many steps.

First, go to Admin > Application Settings and click on the "Skins & Languages" tab. Select your new Bridgecity skin as the "Default Skin for Internet and Extranet Pages".

Then go back to the Bridgecity skin and modify the "Internet" template. This will take some trial and error. I can help you with that. Ascribe will tell you if you are missing any necessary curly-brace field placeholders. When you're done, publish the skin.

After that, go back to all your web pages and make sure they are set to use the Bridgecity skin. (As a side note, you can have as many skins as you want. Each one for a different web design, and assign different pages to use different skins).

Then publish the web pages.

This whole process will take some time to get used to. But I'm here to help!

[Bridgecity]

Hey Truman,

Coming back to a long lost post here.  We've slowly gotten a skin that is nearing completion that will nearly match the design of our new website that we're rolling out.  I may have some other questions about that, but we're on-track, just slow. 

The other integration issue I have is this.  Here's the home page of the new site:  www.bethechurch.net.

At the bottom you'll see where Ascribe data is being pulled up for upcoming events and announcements.  This is being done by pulling up an ascribe created page within an iframe on the home page.  But this is not the best way to do this since clicking the links opens them up inside the iframe as well.

The way I know would be to write the link code with with HTML like this: <a href=URL target="_blank> LINK TEXT </a>  But I don't think I have access to the HTML that's creating these links through Ascribe.

What I really want to do is like the events section on the home page of the Hope Chapel site (http://www.hopechapel.com/index.php).  I vaguely remember you mentioning that you wrote custom code for them on this.  Is that right?  Is that something we can snipe?  I've examined their source code and don't see anything special.

Thanks!

[Truman]

Hi Marc,

Congratulations on your site. It looks great! Am I right in assuming that you are hosting this site on an external server?

Sure, I could add that script for you. I set it up for you at http://www.ascribedata.com/bridgecity/events-top-5.php

Truman

[Bridgecity]

OK... so now I reveal my nooby-ness.  I can see the output of the php page, but not the actual script itself.  Even when I look at the source code, all I see is the HTML formatting of the data being pulled up from Ascribe. Do I need to log in somewhere so I can open that page file in an editor in order to grab the script of that file and then paste it into my page somewhere?  How do I integrate this script into my code for my home page?

Thanks for your quick reply!

[Truman]

Hey Marc,

You go to your home page and edit the HTML for that. You have a div with ID id0_outside. Inside that you have div id0_inside and then inside that you have an IFRAME with ID "target". Set "target" to have "src" of http://www.ascribedata.com/bridgecity/events-top-5.php

Truman

[Bridgecity]

OK.  Working on getting this done.  I have a question.  What CSS is this .php file calling on for formatting?  I'd like to be able to adjust it a bit.  Is it using a standard ascribe CSS template?  Or something else?

[Truman]

I recommend pulling the code http://www.ascribedata.com/bridgecity/events-top-5.php using PHP on your home page and just inserting it into the HTML of the homepage. That way you can control the CSS on your end.

Assuming that your home page is in PHP, I suggest you change the IFRAME to a div tag with
explicitly set height and width and overflow:scroll in the CSS. Then inside
the div tag use this code:

if ($etop5 = file('http://www.ascribedata.com/bridgecity/events-top-5.php'))
{
        echo implode("\n", $etop5);
}

This will grab the HTML of the events from the Ascribe server and display
them inside the div tag. You'll need to add the proper CSS to style the
event listing.