Forum page in a dynamic iFrame ?

[genesmasher]

Hi Sorry if this is a stupid question, I am very green :)

I am building my first web site, and would like to incorporate a forum into it. I already installed PhbBB forum, and it seems to work fine. Now I would like to integrate it as seamlessly as possible into one of the site web pages, with intact header and footer. Can you guys help me do that ? I was able to put in the forum index page in an iFrame, but there is a problem with the height - it doesnt auto resize, when the contents of the iFrame get too long. I obviously don't want to have two sets of scroller bars for the page height. Is there a way to generate a script that would resize the parental page to accommodate the whole length of the forum iFrame, so that there is only an "outside" slider ?? Or may be there is an altogether easier solution to the problem ? Both forum and web site are on the same server. Thanks in advance !!

[djr33]

An iframe will be messy. If you can avoid it, you probably should. It's also a better idea to avoid iframes for technical reasons that I won't get into here. (In short, they're outdated.)

There are three ways to do this (all variations on the same thing, basically):
1. Do not change the forum. Change your website to look like the forum. That will keep a consistent look. This is easy, but it's not a great solution. So if you can't do the other options, consider this. Remember this can also include what you can do on the forum, such as changing some colors or adding an image.

2. Modify the template for the forum. This can be a little tricky. There are two versions:
a) Modify just the colors and other default options. I don't know the PhpBB admin control panel in detail, but other forum software allows you to change it right there. Even if not, this can be done by changing the CSS and so forth and shouldn't be too hard.
b) Modify the actual HTML of the template, which will be harder.
Luckily, PhpBB is very popular and you will find lots of resources including many premade skins for it. (A skin is essentially a "look" for the site, a complete template for everything.) If you want to modify it, just look up their tutorials.

3. Here's the hard (but perhaps best) one: actually modify the software. This can lead to seamless integration but it will also be tricky. You'll need to modify the PHP code, find workarounds for the PhpBB framework so that it still works within your code. The basic idea is simple-- you'd use PHP include() commands to add one page to another. But you'd need to modify things to make the pages all work out.
This *could* be as simple as modifying the template to include your other layout, but in practice it would be trickier.


In short, go to the PhpBB website and look at some tutorials on doing a template. Secondly, you'll need to learn PHP, potentially quite well, for option 3.


Alternatively:
4. Don't make them identical. Just make them similar. Use similar color schemes and similar images and then it will all be close enough that it works. You don't really need them to be identical-- it's not like you'd trick anyone into thinking that they're not on the forum, nor would you want to do that. As long as they appear "the same", they don't need to be exact copies.


I hope that helps!

[genesmasher]

Thanks, Daniel ! You are probably right, I am trying too hard to make everything look perfect :) I will probably just leave the forums alone. I already found a template that looks pretty organic with the rest of the site; it sounds like the other things you suggested are quite a bit more work than I am capable with my very limited knowledge... Anyway, I think the best solution for me is to figure out how I can embed at least a couple of links to the individual site pages into the existing forum template which looks the closest to the site graphics scheme...

[djr33]

Sounds right to me. You can always learn PHP (or just templating) on the site as you need and then fix it later if you want. The posts/accounts would still be there; it would just look different.

Also, if you really want the iframe to work like that, I don't mean to suggest that it's impossible. It wouldn't be perfect, but you probably could improve it somewhat.

[bernie1227]

This is interesting, Keyboard1333 and I are in the middle of doing something extrodinarily similar, with experience on the issue, what we did, was change the styles and themes of the forum in order to fit the website (as Daniel said), (A point on this, is that the easiest way to do this, is to find a premade style you like and then change the various backgrounds and headers and such in the image folder in order to acheive the look you want) and used the <?php include() ?> command to achieve this, it is a lot less messy than Iframes, and results in a lot more seamless integration.

[genesmasher]

Thanks, Bernie!

I am afraid to ask, but would you mind looking over my forum template for me and suggest the exact location where to put in the code for the links in the forum header file? It will probably take me a week to figure this out on my own :)) I really just want to put the site logo in the header to point back to the home page; and maybe an ad placeholder I can swap out later; the rest I can live with just fine..

Vadim




This is interesting, Keyboard1333 and I are in the middle of doing something extrodinarily similar, with experience on the issue, what we did, was change the styles and themes of the forum in order to fit the website (as Daniel said), (A point on this, is that the easiest way to do this, is to find a premade style you like and then change the various backgrounds and headers and such in the image folder in order to acheive the look you want) and used the <?php include() ?> command to achieve this, it is a lot less messy than Iframes, and results in a lot more seamless integration.

[djr33]

It doesn't really work like that. The HTML generated on the website is done through all of the PHP code that makes the forum. It takes the template, combines it with other things, and finally outputs what you see.
So it's not possible to look at the template without looking at the actual template file, and potentially other sources that put it all together. Think of it as an assembly line for HTML. You have to find the right station, so to speak, to modify that part.
So you can't just do it with a link. It's possible to find it of course, but it'll take some looking.

But as I said-- you can find out a lot of information if you just go to the PhpBB site. Additionally, they have forums there to answer technical questions. (Don't be surprised if the answer is "go look up the tutorial", because this is a very common question!)

[Beverleyh]

You can edit the html in the styles/subsilver2/template/overall_header.html files (there's also a similarly named footer file too) the path above is for the default subsilver 2 template but presumably other template will follow the same format.

I totally revamped a phpbb3 forum a few year ago an did a site-wide login integration - got it looking like a perfect fit too : http://www.jemcon.org/
and the totally revamped subsilver2 template : http://www.jemcon.org/phpBB3/

Things look much prettier after login though ;) : http://fofwebdesign.co.uk/userfiles/images/portfolio/web-templates/big/jemcon.jpg

[bernie1227]

Thanks, Bernie!

I am afraid to ask, but would you mind looking over my forum template for me and suggest the exact location where to put in the code for the links in the forum header file? It will probably take me a week to figure this out on my own :)) I really just want to put the site logo in the header to point back to the home page; and maybe an ad placeholder I can swap out later; the rest I can live with just fine..

Vadim

Once again, Daniel is right, but this is deceptively simple, that doesn't even require coding. First, go to the phpBB folder, then go to styles, then go to the style you are using, and I think there are usually three folders in there, click the top one and then images, and in there should be an image called header.png. Just replace that with your header.

[djr33]

I don't mean to overcomplicate things :)
If you can live with just switching an image, then that's easy.
If you can play with the HTML template and get something that works, great.
But I imagine you may hit some limits in that, and little parts may get tricky.
I just depends on whether you want it perfect or as good as you can do at the moment.

[genesmasher]

Thanks Bernie ! I think the file you are referring to is called overall-header.html, can you tell me where I would insert a web site logo image with a link ?? I tried several locations already but it doesnt show..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>
<!-- INCLUDE block_config.html -->
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
phpBB style name: Titan
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by: Vinny ( http://www.suportephpbb.com.br/ )

NOTE: This page was generated by phpBB, the free open-source bulletin board package.
The phpBB Group is not responsible for the content of this page and forum. For more information
about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
var jump_page = '{LA_JUMP_PAGE}:';
var on_page = '{ON_PAGE}';
var per_page = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';
var style_cookie = 'phpBBstyle';
var style_cookie_settings = '{A_COOKIE_SETTINGS}';
var onload_functions = new Array();
var onunload_functions = new Array();

<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
var url = '{UA_POPUP_PM}';
window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
<!-- ENDIF -->

/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}

/**
* New function for handling multiple calls to window.onload and window.unload by pentapenguin
*/
window.onload = function()
{
for (var i = 0; i < onload_functions.length; i++)
{
eval(onload_functions[i]);
}
};

window.onunload = function()
{
for (var i = 0; i < onunload_functions.length; i++)
{
eval(onunload_functions[i]);
}
};

// ]]>
</script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/collapsible.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="{T_THEME_PATH}/ie.css" />
<![endif]-->

</head>
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">



<div class="headerbar">
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
</div>


<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
<div class="top-left"></div>
<div class="top-right"></div>
<div class="inside">
<div id="page-header">
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist navlinks">
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>›</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
</ul>



<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="icon-ucp">
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH --> &bull;
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --> &bull;
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->

<ul class="linklist rightside">
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF S_DISPLAY_SEARCH --><li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a></li><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not (S_REGISTRATION or S_IN_UCP) -->
<form method="post" action="{S_LOGIN_ACTION}">
<fieldset class="quick-login"><strong>
<label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
<label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
{S_LOGIN_REDIRECT}
</strong></fieldset>
</form>
<!-- ENDIF -->

<span class="corners-bottom"><span></span></span></div>
</div>

</div>

<a name="start_here"></a>
<div id="page-body">
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="information" class="rules">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

[djr33]

I don't know what that's written in. Those HTML comments are functional (mostly IF statements), which is not part of HTML [with the exception of conditional comments for IE-only code-- unrelated to this and not really 'part' of HTML anyway].

I suppose that must be the default templating format for PhpBB. I've seen similar things for other forum software (never had the need to get into the inner workings of PhpBB in particular).

So you must be very careful while modifying those to not disrupt what is there. You could even modify them to your advantage if you wanted (but that might be tricky to figure out exactly what each part is doing).

You probably won't need to modify them to just add extra HTML (it looks like adding new html around the unmodified old html probably won't change anything), but it's possible-- if so, it might be because what you want to change is inside an if statement.
If it possible you'd need to modify those commands if you need to remove something-- just be sure to get the IF and ENDIF parts in pairs, never leaving one unmatched. Then you should be safe.


Anyway, if Bernie can help you with this, that's fine. But if you do run into trouble, I really do suggest checking at the PhpBB support site-- they're really familiar with this and can tell you easily what to do. For us, it's less familiar so there's less of a chance of us being able to help (or help quickly).


And whatever you do-- save a backup of anything before you modify it. (I also suggest preserving that backup in case you ever want to switch back to the default view or start over with a new modification.)

[Beverleyh]

<div class="headerbar">
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
</div>
The code between the curly braces are special phpbb variables that are defined in a template file somewhere.
You can replace them with standard html though - so you could put the url to you main home page in place of {U_INDEX} and an img tag for your logo in place of {SITE_LOGO_IMG}

As Dan said, remember to save copies of the files before you begin playing with them though.

Good luck!