[HOW TO] Integrate your forum into the site.

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning

[HOW TO] Integrate your forum into the site.

Postby rhythm1 » Sun May 18, 2008 12:53 pm

INTEGRATE YOUR FORUM INTO THE SITE

So finally. Here is the DEMO.
The original site: [removed. host probs]
Forum(integrated to above site): [removed for above prob]

Here are the screen shots for your convenience.
ORIGINAL SITE
Image

INTEGRATED FORUM
Image

This is a simple guide which will describe how you can integrate your forum in to the site. This is in no way a script or anything such that can be run so that your forum looks like the site. Infect, this guide shows you how to create your own header, leftbar, right bar and place the forum in the middle of it. These columns can then be used to place the stuff from the original site so it gives the feeling, the forum is placed inside the site. Since this is what many people have been asking around for a while I thought this would be helpful. (These are specific for the subsilver theme, will work on other themes, but edits may be slightly different)

First off, lets place our CSS in the forum style sheets. You can either do this through the ACP ( under styles tab - theme edit ) or choose to edit the CSS files directly, in which case open styles/prosilver/theme/common.css. So lets get started.

Find: (in common.css OR in ACP style edit)
Code: Select all
/* Main blocks
---------------------------------------- */


After add:
Code: Select all
#new_header{
      padding: 10px;
}

#left_bar{
      width: 150px;
      float: left;
      padding: 10px;
}

#right_bar{
      width: 150px;
      float: right;
      padding: 10px;
}


You can adjust the width and height of the left and right bars in those divs above. Now find:
Code: Select all
#wrap {
   padding: 0 20px;
   min-width: 650px;
}


Replace with:
Code: Select all
#wrap {
   padding: 0 20px;
        float: left;
        width: 650px;
}


All right, thats all for the CSS. Now lets move on to adding these divisions to our forum template. 8-) . SAVE and close the file common.css OR click submit if you edited the style in ACP.

Here again, you can choose to edit either from the ACP ( under styles tab - template edit ) or edit the template files directly in which case open styles/prosilver/template/overall_header.html

Find:
Code: Select all
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">


After add:
Code: Select all
<div id="new_header">New Header</div>
<div id="left_bar">Left side Menus and stuff</div>
<div id="right_bar">Right side Menus and stuff</div>


Normally, after this point, you can either choose to remove the default header of PHPBB or keep it as a secondary banner to post adds or anything else you like. To delete the header, find:
Code: Select all
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

      <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

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


and delete.

YOU WILL ALSO NEED TO MAKE A FOOTER FOR THIS TO WORK CORRECTLY. THE FLOATS NEEDS TO BE CLEARED.
In common.css ADD:
Code: Select all
#new_footer{
   clear: both;
}


In overall_footer.html SEARCH:
Code: Select all
<div>
   <a id="bottom" name="bottom" accesskey="z"></a>
   <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>


BEFORE ADD:
Code: Select all
<div id="new_footer"></div>


You can include your site footer there if you want to :) . thanks to venusdesign for pointing the bug out.


NOTE: IF YOU EDITED YOUR STYLE FILES AND TEMPLATE FILES DIRECTLY, (NOT IN ACP) THEN REFRESH YOUR THEME AND EMPTY THE TEMPLATE CACHE

:D That is all! Now you have got yourself a 3 column board with the forum in the middle. Add your original site styles and fill up these two columns so that the forum looks like its placed in the site. Here is how you can make a CSS menu ( if it is originally there on your site left bar ).

Open your favored style editing method. If you prefer the direct method open common.css like before OR open style edit in ACP and FIND:
Code: Select all
/* Horizontal lists
----------------------------------------*/


Before ADD:
Code: Select all
/* Vertical lists (LEFT BAR MENU)
----------------------------------------*/
#leftmenu {
width: 150px;
padding: 0px;
margin: 0px;
}

#leftmenu h1 {
display: block;
background-color: blue;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:150px;
}

#leftmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#leftmenu ul li {
margin: 0px;
padding: 0px;
}
#leftmenu ul li a {
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#leftmenu ul li a:hover, #leftmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}
/* END LEFT BAR MENU  */



In overall_header.html find:
Code: Select all
<div id="left_bar">


Inline after, add (before the </div>):
Code: Select all
   <div id="leftmenu">
      <h1>PHPBB ROCKS</h1>
         <ul>
            <li><a href="#" tabindex="1">Home</a></li>
            <li><a href="#" tabindex="2">About Us</a></li>
            <li><a href="#" tabindex="3">SUBSILVER</a></li>
            <li><a href="#" tabindex="4">THEMES</a></li>
            <li><a href="#" tabindex="5">Games</a></li>
            <li><a href="#" tabindex="6">Links</a></li>
         </ul>
         </div>


So that is a simple start. Now add everything else in your original site's left bar, right bar, and header in between <div id="left_bar"> <div id="right_bar"> <div id="new_header"> and their respective </div> tags. Remember to change the background image or color of the forum to suite the background color or image of your site, and you have got yourself "THE FORUM IN THE SITE".

A FEW LINKS OF IMPORTANCE
  1. Adding a side bar to prosilver(I havent seen this tutorial when i first posted this)
  2. PHPBB + SITE Session integration

SUPPORT REQUEST
Please follow the following guidelines if you wish to ask for support.
  1. Please provide a link to the demo/download of the style that you use with the name of it.
  2. A link to your site must be given.
  3. The style sheet of your site must be posted in between code tags.
  4. Proper description of what you want to achieve must be given.
  5. Everything above must be provided, PM if you dont want to post it.
  6. I am not charging you for this, so please consider it and dont complaint for late replies. I am a busy student as well.
Last edited by rhythm1 on Sun Jun 08, 2008 11:47 pm, edited 9 times in total.
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby Elias » Sun May 18, 2008 1:31 pm

Can we see a demo of this please!
Use the validation checklist | Test before you Submit (Your MOD) | How JMV's Test
[phpBB Knowledge Base] [Formerly known as EY.]
"Mystery creates wonder, and wonder is the basis of man's desire to understand." - Neil Armstrong
User avatar
Elias
Registered User
 
Posts: 3579
Joined: Sat Feb 25, 2006 4:31 pm
Location: In the Water!
Name: Tony Montana

Re: [HOW TO] Integrate your forum into the site.

Postby rhythm1 » Sun May 18, 2008 1:55 pm

well.. Its imaginable quiet clearly without a demo.. I think. What you will get is, what ever style you have in the middle with two extra columns to put in stuff from the site so that they both look alike. I have now added an image of what it will look like..
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby Elias » Sun May 18, 2008 2:17 pm

Thanks very much ;)

I am more visual :P
Use the validation checklist | Test before you Submit (Your MOD) | How JMV's Test
[phpBB Knowledge Base] [Formerly known as EY.]
"Mystery creates wonder, and wonder is the basis of man's desire to understand." - Neil Armstrong
User avatar
Elias
Registered User
 
Posts: 3579
Joined: Sat Feb 25, 2006 4:31 pm
Location: In the Water!
Name: Tony Montana

Re: [HOW TO] Integrate your forum into the site.

Postby prototech » Sun May 18, 2008 5:59 pm

A demo would be nice to see if it works on all browsers. I can already see something wrong - the headerbar div is stretched out vertically. ;)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
User avatar
prototech
Development Team Member
Development Team Member
 
Posts: 5245
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [HOW TO] Integrate your forum into the site.

Postby rhythm1 » Sun May 18, 2008 6:34 pm

Yeah. That could be there.. :D . I didnt verify if it was working with all browsers. Firefox shows it okay. Limiting the height should solve that problem with the other browsers. I am working on a demo now.
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby rhythm1 » Sun May 18, 2008 10:19 pm

There was an error on the guide. Firefox displays the divisions wrong if the center content is set liquid. It kind of stretches the header for the height of the right and left bar and looks odd. Now the center content (forum) is set to a fixed width and it Works. The link to demo will also be available on the first post. :)
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby iSkywalker » Mon May 19, 2008 4:30 pm

Thanks so much for sharing your knowledge. Excellent work. Just one thing, your site is very slow, maybe try another host. My site hosted on a shared server and extremely fast. PM me I will tell you who.
iSkywalker
Registered User
 
Posts: 238
Joined: Sun Mar 02, 2008 5:00 pm

Re: [HOW TO] Integrate your forum into the site.

Postby lakers » Wed May 21, 2008 6:06 pm

Thanks for tut. How about if we want to place the forum style in the center of our page, no columns needed on either side. Somthing like this: http://golfnw.net/sample.gif?
lakers
Registered User
 
Posts: 23
Joined: Tue May 20, 2008 9:35 pm

Re: [HOW TO] Integrate your forum into the site.

Postby rhythm1 » Wed May 21, 2008 7:01 pm

in prosilver open common.css
Code: Select all
#----------------------------     FInd    --------------------------------
Wrap{

#----------------------------    AFTER ADD    -------------------------------
margin: 0 auto;

#------------------------------    FIND   -------------------------------------
min-width: 650px;

#-----------------------         REPLACE WITH  -----------------------------
width: 800px; /* change this width to the desired width */



Now follow the tutorial and add only the new_header div .
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby lakers » Wed May 21, 2008 7:55 pm

Thanks. Silly follow on question though...The changes you recommend are to the prosilver files. How do I incorporate the changed code into my page? Again I would like it to look like www.golfnw.net/sample.gif.
lakers
Registered User
 
Posts: 23
Joined: Tue May 20, 2008 9:35 pm

Re: [HOW TO] Integrate your forum into the site.

Postby rhythm1 » Thu May 22, 2008 1:00 am

silly follow up, i do agree. Why did i do it? Because from the image i cant figure out which theme you have used. Why dont you give a link to your forum or a demo of the theme and may be the style sheet of the site.
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby billy.mc » Thu May 22, 2008 5:43 am

hi the demo in IE has the forum at the bottom floting left! thanks for the tutorial i gather i can use this as a easy way to install my own header? as i've had tonnes of probs with mine :)
User avatar
billy.mc
Registered User
 
Posts: 55
Joined: Tue Mar 18, 2008 10:11 pm

Re: [HOW TO] Integrate your forum into the site.

Postby rhythm1 » Thu May 22, 2008 8:38 am

hmm. I see. Its happening because of a value in %. It should be fixed. I ll go through and report back. Thanks for pointing that out.
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
User avatar
rhythm1
Registered User
 
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: [HOW TO] Integrate your forum into the site.

Postby lakers » Thu May 22, 2008 2:15 pm

rhythm1 wrote:silly follow up, i do agree. Why did i do it? Because from the image i cant figure out which theme you have used. Why dont you give a link to your forum or a demo of the theme and may be the style sheet of the site.


The forum has been set up at http://golfnw.net/phpbb/. I do however wish to place the board seamlessly in this page http://golfnw.net/nwgolfforum.html. Does this help?
lakers
Registered User
 
Posts: 23
Joined: Tue May 20, 2008 9:35 pm

Next

Return to [3.0.x] Styles Support & Discussion

Who is online

Users browsing this forum: BriniaSona, Mess and 24 guests