• Registered: 2008-01-30
  • Posts: 3

Topic: Integrating Punbb into my website

Ok so I want to make PunBB look like part of my website and i know it has to do with main.tpl, but im not exactly sure what to do. If someone could provide me with a rough guide of what to do it will be a big help thanks.

2 Reply by MattF

  • MattF
  • Senior Member
  • Offline
  • From: South Yorkshire, England
  • Registered: 2007-03-15
  • Posts: 1,956

Re: Integrating Punbb into my website

http://punbb.org/docs/dev.html#integration

MattF's Website

  • Registered: 2008-01-30
  • Posts: 3

Re: Integrating Punbb into my website

well the thing is I dont know any php and from reading these other threads, Im pretty sure it has something to do with inserting some code from some file or something into your website. If I could know that way which is easier for me to do that would be great.

4 Reply by Hob Bramble (edited by Hob Bramble 2008-01-30 22:10)

  • Registered: 2008-01-04
  • Posts: 29

Re: Integrating Punbb into my website

Well, changing the actual forum colours and style is done with styles, but I'm assuming you know that and are trying to fit your forum into your actual page layout (navigation, header, footer, ect.), sort of like I've done with mine.

This is actually very simple and doesn't require any knowledge of PHP at all. Open up your main.tpl and take a look at it:

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">

            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

That code is the code that makes your forum itself appear. Anything you place above that code will appear above your forum, and anything you place below that code will appear below your forum. Other than that, it's essentially just a standard (X)HTML document. The only other part of the code that relates to your forum is:

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<pun_head>

Don't mess with the <pun_content_direction> or <pun_head> tags, as they effect how punBB interacts with these parts of the HTML (i.e. one of <pun_head>'s functions is placing the CSS of your style in the right location so that it works).

So, if you wanted to place your website's navigation above your forum, and your own footer below it, your code would look something like:

<!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="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<style type="text/css">
#mynavigationbar {
    attribute: whatever;
}
#myfooter {
    attribute: whatever;
    otherattribute: 100px auto;
}
</style>
</head>
<body>
<div id="mynavigationbar">Here are all the navigation links and what not.</div>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>
<div id="myfooter">Here is my footer and whatever. Yay.</div>
</body>
</html>

Obviously, your navigation/footer don't have to be included in the silly-named divs I used in the example, but you get the idea. It's basically just a standard (X)HTML document.

Keep in mind that the main.tpl only affects the "main" pages of your forum. Your redirect pages, administration/moderation section pages, help pages, and maintenance mode pages are all affected by their own tpl files - but they all work essentially the same way, so you can edit them just like you would normal markup too.

-Master Hob Bramble of Willowbottom

Pardon me, good sir, but it appears that your diving apparatus has a leak.
Perpetual Thursday | Alternative-Internet.com | hobbramble.deviantart.com

Hob Bramble's Website

5 Reply by alexrules (edited by alexrules 2008-01-30 22:24)

  • Registered: 2008-01-30
  • Posts: 3

Re: Integrating Punbb into my website

YAY I got it working thanks. (no thanks to matt) LOL jk.

6 Reply by itsanogo (edited by itsanogo 2008-08-12 23:30)

  • Registered: 2008-03-14
  • Posts: 14

Re: Integrating Punbb into my website

I made my header (header.htm) of DTD HTML 4.01 Transitional.
Is it possible to call the file header.htm into the main.tpl with <pun_include "header.htm"> ?

Or does it need to be made of xhtml1-strict?

itsanogo

  • From: Russia
  • Registered: 2007-12-13
  • Posts: 642

Re: Integrating Punbb into my website

itsanogo wrote:

I made my header (header.htm) of DTD HTML 4.01 Transitional.
Is it possible to call the file header.htm into the main.tpl with <pun_include "header.htm"> ?

Or does it need to be made of xhtml1-strict?

itsanogo

Just make the whole page compliant to one of the standards and reflect this in DOCTYPE definition.
I'd recommend you to comply XHTML Transitional at least.

Carpe diem

Anatoly's Website

8 Reply by itsanogo (edited by itsanogo 2008-08-19 18:09)

  • Registered: 2008-03-14
  • Posts: 14

Re: Integrating Punbb into my website

I am getting there big_smile

I have added <pun_include "header.php"> and <pun_include "footer.php"> into main.tpl.

Just need an adjustment in my code so the forum gets below the header and not behind.

<!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="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>

<pun_include "header.php">

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">

    <div class="box">

             <pun_navlinks>
        <pun_status>

    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

<pun_include "footer.php">

</div>

</body>
</html>

Can anyone help me with this?

Thanks!

  • Registered: 2008-03-14
  • Posts: 14

Re: Integrating Punbb into my website

*BUMP*

Does it have to do with <div> ?
I still haven't figured it out sad

Thanks!

  • Registered: 2008-08-19
  • Posts: 1

Re: Integrating Punbb into my website

Hello,
I have start to build my website and would like to use PnnBB forum but I do not know how to integrate it into my webside. this is a link just for view http://www.tcsoftnet.com
I would like to keep that banner
I modified all the template that are in \upload\include\template but is not working properly and all my images do not display. this is my email id pls i you can send coorection by my email thank by advance for that st.chretien@yahoo.fr
this is a view code that I have done. I will show only for admin.tpl because if I done this correct the others will be very easy.

<!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="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<pun_head>
<style type="text/css">
<!--
body {
    background-color: #BCD2E9;
    margin-top: 0px;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}
.style2 {font-size: 6px}
#footer_text {
    font-size: 10px;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style4 {
    font-size: 10pt;
    font-weight: bold;
}
-->
</style></head>

<body>



<div align="center">
  <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="top" style="border: 1px solid rgb(0,0,0)" ><table width="800" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td height="166" align="center" valign="top" background="img/header800.png">&nbsp;</td>
        </tr>
        <tr>
         <td align="center" valign="top" background="img/bg_topline.gif"><span class="style2">
             &nbsp;&nbsp;&nbsp;&nbsp;</span>          </td>
        </tr>
        <tr>
          <td align="center" valign="top"><div align="center">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="2%" align="right" valign="top"><img src="img/leftside.png" alt="hosting,web design, download, maintenance, tutorial, hardware" width="21" height="34" /></td>
                <td width="96%" align="center" valign="middle" background="img/bkg.png"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="right" valign="middle"><span class="style4">ACCUEIL|PRESENTATION|ASTUCES|SERVICES|TELECHARGER|FORUM|BUSINESS HOME|CONTACT US</span></td>
                      </tr>
                </table></td>
                <td width="2%" align="left" valign="top"><img src="img/rightside.png" width="21" height="34" /></td>
              </tr>
            </table>
         
          </div></td>
        </tr>
        <tr>
          <td align="center" valign="top" background="img/bg_downline.gif"><span class="style2">
             &nbsp;&nbsp;&nbsp;&nbsp;</span>          </td>
        </tr>
        <tr>
          <td align="center" valign="top"><table width="100%" border="0" align="center">
            <tr>
              <td align="left" valign="top">
             
             
<div id="punwrap">
<div id="punadmin" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

             
             
             
             
             
              </td>
            </tr>
          </table></td>
        </tr>
        <tr>
           <td align="center" valign="top" bgcolor="#3188D4"><div id="footer_text">Power Design by <a href="mailto:st.chretien@gmail.com">Chr&eacute;tien</a>, &copy;Copyright 2008,...</div></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>
</body>
</html>


thank

  • Registered: 2008-03-14
  • Posts: 14

Re: Integrating Punbb into my website

@ stchretien.

Don't reply with your own problem when mine has not been resolved yet.
Or start your own thread. neutral

Thank you,
itsanogo