Frameless Discussion and Compatible prosilver style

Support specific to the phpBB 3 plugin.
Forum rules
Please post all the bugs you encounter on our issue tracker.
Post a reply

Frameless Discussion and Compatible prosilver style

Postby Alan on Tue Dec 23, 2008 7:43 pm

Hello all,

Attached is a customized prosilver phpBB style that you can use when integrating phpBB framelessly in Joomla. I have wrapped the entire board in a div with the id of phpbb. Then I have gone through every single class and id in the CSS files and added #phpbb so that the phpBB classes will override that of Joomla's when a conflict occurs.

This should almost eliminate the need to change the CSS files outside of colors and the like. The only time there may be a need to do so will be if the Joomla CSS has styled a HTML element that is not listed in one of phpBB css files. If that happens, just simply add #phpbb htmlElement { ... } and that should take care of it.

For those who wish to customize their own style:

Here is a basic outline of how to do it.

Edit your template
  1. Open overall_header.html and overall_footer.html in {php_root}/styles/{your style}/template
  2. Find the body tag (<body>) in the overall_header.html file
  3. If the body tag has already been given an id of phpbb, remove it. Add a div below the body tag with an id of phpbb
    So something like this
    Code: Select all
    <body class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
    <div id="phpbb">
  4. Find the closing body tag (</body>) in the overall_footer.html file and add a closing div tag before it
    Code: Select all
    </div>
    </body>

UPDATE: phill104 posted a link to an excellent tool that saves a HUGE amount of time in regards to this next step. Go to
http://www.mehdiplugins.com/misc/cssintegrator.htm. Place #phpbb in the CSS selector box. Then upload the style's template files one at a time. It will then prompt you to download a new file. Rename this to the original file and overwrite the original in the style's theme folder. You may still need to do some troubleshooting (see below), but this will make the process fairly simple and pain free. Wish I had this before!!! ;-)

Manual Method:
Then open all css the files within {phpbb_root}/styles/{your style}/theme
  1. Rename body to #phpbb like
    Code: Select all
    body {
       color: #828282;
       background-color: #FFFFFF;
       font-size: 10px;
       margin: 0;
    }

    needs to become
    Code: Select all
    #phpbb{
       color: #828282;
       background-color: #FFFFFF;
       font-size: 10px;
       margin: 0;
    }

    This will keep the phpbb style from affecting your Joomla body as a whole.

  2. Add #phpbb before all ids, classes and elements listed. Make sure you also catch multiple classes listed on a single line.

    Here are some examples
    Code: Select all
    /* an html element */
    #phpbb h1 {
       font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
       margin-right: 200px;
       color: #FFFFFF;
       margin-top: 15px;
       font-weight: bold;
       font-size: 2em;
    }

    /* an id */
    #phpbb #wrap {
       padding: 10px 20px 10px 20px;
       min-width: 650px;
       font-size:10px;
       margin-top:10px;
    }

    /* a class */
    #phpbb .headerbar {
       background: #ebebeb none repeat-x 0 0;
       color: #FFFFFF;
       margin-bottom: 4px;
       padding: 0 5px;
    }

    /* multiple items listed on a single line separated by commas */
    #phpbb span.corners-top, #phpbb  span.corners-bottom, #phpbb span.corners-top span, #phpbb span.corners-bottom span {
       font-size: 1px;
       line-height: 1px;
       display: block;
       height: 5px;
       background-repeat: no-repeat;
    }

That should catch most of your compatibility issues. If you see that there are still issues, it is probably because your Joomla template is styling a html element that phpBB is not.

To troubleshoot these, you need to find out what styles from your Joomla template is affecting your phpBB template. I recommend using firefox http://www.getfirefox.com with the addon firebug http://getfirebug.com. Firebug is an excellent CSS debugging tool. Once installed, browse to the page in firefox. Click on the bug the bug in the bottom right hand corner. Then click Inspect. As you move along the screen, html tags will be outlined in blue and will show up in the main frame of firebug. The CSS affecting that element will show in the right frame. If the CSS element is crossed out, it is being overwritten by another style. You can temporarily disable a style by hover right in front of the style in firebug where a grayed out no sign will appear. Click on it and the element will be disabled. Do this until you find what is causing the issue. There are other css debugging tools available for other browsers; just do a google search.

Once you find out what element is causing the css conflict, add that element to your phpbb css with styled corrections.

So for example, say your Joomla template styles all <li> tags but your phpbb style does not.

Joomla template:
Code: Select all
ul li {
border-bottom:1px solid #F1F1F1;
line-height:170%;
padding:5px 0;
}


To correct this, copy it over into your phpbb style css, add #phpbb to the front of it and make corrections. So something like this
Code: Select all
#phpbb ul li {
border-bottom:0px;
line-height:150%;
padding:0;
}


Note that border-bottom is not the same as border or padding-left as padding. It must be the exact same property for it to be overridden.

If you have any questions, just post them here!

Thanks!
Alan

Edit: I forgot a very important element. I'll have the file back up in a few minutes. Sorry about that.
Edit: Sorry about that. File is back up.
Attachments
prosilver_frameless.zip
(267.48 KiB) Downloaded 5705 times
We are all volunteers so please search before posting and check the documentation as answers to many common questions are there.

Before posting about visual issues with frameless integration, please read this Firebug tutorial first!

I'm only able to make it to the forums every 2 - 3 days so please be patient.

Nothing is ever free; it just might not cost you anything. ~ David Crowder
User avatar
Alan
Developer
Developer
 
Posts: 1939
Joined: Sat Dec 06, 2008 2:29 pm
Location: Houston, TX
Top

Re: phpBB style that is compatable with frameless integration

Postby digitaldoctor on Tue Dec 23, 2008 9:23 pm

Is this ProSilver ?
http://www.phpbb.com/development/prosilver/?page=14

Image
User avatar
digitaldoctor
JFusion Expert III
JFusion Expert III
 
Posts: 871
Joined: Thu Jan 17, 2008 2:13 am
Top

Re: phpBB style that is compatable with frameless integration

Postby Alan on Tue Dec 23, 2008 9:30 pm

digitaldoctor wrote:Is this ProSilver ?
http://www.phpbb.com/development/prosilver/page,14

Image


Not unless it is a new rendition of it. This is the prosilver that comes default with phpbb 3.0.3:
http://www.jfusion.org/index.php/component/option,com_jfusion/Itemid,97/

Thanks!
Alan
We are all volunteers so please search before posting and check the documentation as answers to many common questions are there.

Before posting about visual issues with frameless integration, please read this Firebug tutorial first!

I'm only able to make it to the forums every 2 - 3 days so please be patient.

Nothing is ever free; it just might not cost you anything. ~ David Crowder
User avatar
Alan
Developer
Developer
 
Posts: 1939
Joined: Sat Dec 06, 2008 2:29 pm
Location: Houston, TX
Top

Re: phpBB style that is compatable with frameless integration

Postby digitaldoctor on Tue Dec 23, 2008 9:34 pm

Ideally a screenshot of what a site would look like with this would help potential users.
User avatar
digitaldoctor
JFusion Expert III
JFusion Expert III
 
Posts: 871
Joined: Thu Jan 17, 2008 2:13 am
Top

Re: phpBB style that is compatable with frameless integration

Postby Alan on Tue Dec 23, 2008 11:39 pm

digitaldoctor wrote:Ideally a screenshot of what a site would look like with this would help potential users.


Why a screenshot when you can actually play with it? Just go to our phpBB demo!

Thanks!
Alan
We are all volunteers so please search before posting and check the documentation as answers to many common questions are there.

Before posting about visual issues with frameless integration, please read this Firebug tutorial first!

I'm only able to make it to the forums every 2 - 3 days so please be patient.

Nothing is ever free; it just might not cost you anything. ~ David Crowder
User avatar
Alan
Developer
Developer
 
Posts: 1939
Joined: Sat Dec 06, 2008 2:29 pm
Location: Houston, TX
Top

Re: phpBB style that is compatable with frameless integration

Postby James on Thu Dec 25, 2008 3:57 pm

Excellent work Alan! I knew you'd figure this out ;).

I'll go ahead and add this to our downloads section and do some testing of it later.


Regards,
James
Need help with JFusion: Documentation - Forum Search.
If those don't help you, make a post following the Forum Guidelines.
User avatar
James
Support Specialist
Support Specialist
 
Posts: 781
Joined: Sun Mar 02, 2008 2:56 pm
Location: London
Top

Re: phpBB style that is compatable with frameless integration

Postby vlastanovak on Sat Dec 27, 2008 1:15 pm

So if I upload this over our existing prosilver style, then edit it.. all should be good?
User avatar
vlastanovak
JFusion Newbie II
JFusion Newbie II
 
Posts: 14
Joined: Mon Dec 08, 2008 9:48 am
Top

Re: phpBB style that is compatable with frameless integration

Postby Imran on Sat Dec 27, 2008 1:18 pm

Upload the style and clear Cache. Refresh the style's template, theme and imageset after that.
Watch the Installation video tutorial here.

You like our work? Please vote for us @ the JED or write a review if you wish.

Need help with JFusion: Docs - Forum Search.
If those don't help you, make a post following the Forum Guidelines.
User avatar
Imran
Manager
Manager
 
Posts: 2531
Joined: Sun Jun 01, 2008 8:31 am
Location: NOIDA, India
Top

Re: phpBB style that is compatable with frameless integration

Postby vlastanovak on Sat Dec 27, 2008 6:27 pm

OK, I have done what you suggested.. however even with this prosilver zip style it's interfering.

Have a look for yourself - http://ausnzclancentral.com/index.php?o ... Itemid=111

You will see the black is weaving it's way into the white prosilver file. Suggestions?
User avatar
vlastanovak
JFusion Newbie II
JFusion Newbie II
 
Posts: 14
Joined: Mon Dec 08, 2008 9:48 am
Top

Frameless won't work

Postby fireman on Tue Dec 30, 2008 4:53 am

Please fill up the following form to enjoy free support from our Team. No Support will be provided in case this form is not filled up!

1. Have you searched the forums and checked the documentation section for a solution? Yes

2. Please summarize your problem in a few lines.
I can get the phpbb3 to work fine in wrapper but not in frameless. I have uploaded the prosilver-frameless style provided by Alan. No luck

3. What steps will reproduce the problem?
just look at site
http://forum.christinside.com


4. What is the expected output? What do you see instead?
I am using the same template as the jFusion demo.

5. You must include a printout of the login checker in the JFusion component.

Code: Select all
Server Configuration
Joomla Version    1.5.8
PHP Version    5.2.4
MySQL Version    4.1.20
System Information    Linux server.harrisis.com 2.6.10-1.771_FC2smp #1 SMP Mon Mar 28 01:10:51 EST 2005 i686
Browser Information    Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
JFusion User and Auth Plugins    Enabled

JFusion Versions
JFusion Component Version    1.1.0-002
JFusion Auth Plugin Version    1.1.0-002
JFusion User Plugin Version    1.1.0-002
JFusion Activity Module Version    1.1.0-002
JFusion Login Module Version    1.1.0-002

JFusion joomla_int Plugin
configuration    master 1 slave 0 dual_login 1 check_encryption 1
JFusion vbulletin Plugin
configuration    master 0 slave 0 dual_login 1 check_encryption 1
JFusion phpbb3 Plugin
configuration    master 0 slave 1 dual_login 1 check_encryption 1

Master JFusion Plugin Login: joomla_int
Login Username
admin
joomla_int User Information
userid    62
activation    ""
username    admin
name    Administrator
password    cdfb9a********
email    mark@harrisis.com
block    0
password_salt    H6CtOy********
Password Check
joomla_int    cdfb9a********
vbulletin    73038f********
phpbb3    2805a9********
   A valid password was found: JFusion joomla_int
Master User Update Debug
0    A user has been found that matches the login details
1    Skipped Password Update:Password already valid
joomla_int Session Create
Skipped creating Joomla session in login checker to prevent logout.

Slave JFusion Plugin Login: phpbb3
phpbb3 User Information
userid    2
name    admin
username    admin
email    mark@harrisis.com
password    $H$BkT********
password_salt    ********
activation    ""
reason    0
lastvisit    1230556142
block    0
phpbb3 User Update Debug
0    A user has been found that matches the login details
1    Skipped Password Update:Password already valid
2    Last Visit Field Update Success
phpbb3 Session Debug
0    Created COOKIE: Name=bb_u, VALUE=2, Expires=1800, Cookie Path=/, Cookie Domain=
1    Created COOKIE: Name=bb_sid, VALUE=u7Tw0o********, Expires=1800, Cookie Path=/, Cookie Domain=
User avatar
fireman
JFusion Newbie
JFusion Newbie
 
Posts: 6
Joined: Sat Dec 27, 2008 8:21 pm
Top
Next
Post a reply

Return to phpBB 3

Who is online

Users browsing this forum: Google [Bot] and 1 guest

EcommerceDownload
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group