The Arcive of Official vBulletin Modifications Site.

Dynamic Joomla!VB wrapper · **Released**: 03-06-2008

NB: This add-on is not a single sign-on solution.

This add-on provides a means for dynamically wrapping your vbulletin in a Joomla! 1.0.15 portal implementation. This add-on does not touch the core files of either system and there is no requirement to do anything on the Joomla! side unless you've created wrappers for several templates and want to switch between those templates. At which point, you'll simply switch your Joomla! templates via in the Joomla! template manager. And finally, this add-on assumes that your forum is located directly below your joomla implementation directory and is sharing its database. The following instructions include example code snippets to (hopefully) assist in making this add-on proceed as smoothly as possible.

Before attempting to install this add-on, disable your forum and back up your database!!!. This is to ensure you have a working copy in case you run into problems.

.

If you install this PLEASE
Click Install

Preparation:

Step 1: Create a subdirectory in your current template directory (both locally and on your target site) called, vbulletin. For example, if you're using one of the default templates for Joomla! 1.0.15... say... madeyourweb, you would create your vbulletin directory as follows:

joomla-root-dir/templates/madeyourweb/vbulletin
Step 2: Create three files (head.php, header.php, & footer.php). These will contain content from your index.php file in your selected template directory. So, if you are using the default (madeyourweb), you would use the index.php file in that directory to create the three vbulletin wrapper files. These files should be formatted as follows:
head.php
This file is for your joomla template content between the <head> [...] </head> tags. This is also where you initialize theme variables and add any include statements, for example, from a Rocket Theme ...
Code:

<?
	$default_style = "style3";			//[style1... style10]
	$enable_rokzoom = "true";			  // true | false
	$template_width = "fluid";			// width in px | fluid
	$sidebar_width = "25%";					// width in px or %
	$sidebar_side = "right";				// left | right
	$menu_name = "mainmenu";				// mainmenu by default, can be any Joomla menu name
	$menu_type = "moomenu";					// moomenu | suckerfish | splitmenu | module
	$default_font = "default";      // smaller | default | larger
	$show_pathway = "true";					// true | false

	require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/rt_styleloader.php");
  $myjoomlacontent   = array();
	$myjooomlacontent[] = '<meta http-equiv="Content-Type" content="text/html; '._ISO.'" />';
	$myjooomlacontent[] = '<link href="'.$mosConfig_live_site.'/templates/'.$mainframe->getTemplate().'/css/template_css.css" rel="stylesheet" type="text/css" />';
	$myjooomlacontent[] = '<link href="'.$mosConfig_live_site.'/templates/'.$mainframe->getTemplate().'/css/'.$tstyle.'.css" rel="stylesheet" type="text/css" />';
  echo implode( "\n", $myjoomlacontent );
?>

header.php
This file is for your joomla template content between the <body> tag and the php mosMainbody function call.
Code:

<?
  $myjoomlacontent   = array();
  $myjoomlacontent[] = '<div id="outer-800" >';
  $myjoomlacontent[] = '<div id="pathway">';
  echo implode( "\n", $myjoomlacontent );
	mospathway();
  $myjoomlacontent   = array();
  $myjoomlacontent[] = '</div>';
  $myjoomlacontent[] = '<div id="leftcol">';
  $myjoomlacontent[] = '<a name="menu"></a>';
	if (mosCountModules( "left" )) {
	  echo implode( "\n", $myjoomlacontent );
		mosLoadModules ( 'left',-3);
	  $myjoomlacontent   = array();
	}
  $myjoomlacontent[] = '</div>';

	[...]
	  
  echo implode( "\n", $myjoomlacontent );
?>

footer.php
This file is for your joomla template content between the php mosMainbody function call and the </body> tag.
Code:

			</div>
		</div>
		<div class="clr"></div>
	</div>
</div>

Step 3: Upload your files to the new vbulletin directory that you just created

Step 4: Download the attached product-joomla-vb.xml project-addon and change:

joomla-menu-id-for-your-forum => Joomla! menu id for your forum (you can find this under Itemid in your Joomla! control panel menu manager)

your-joomla-path-goes-here => absolute path to your Joomla! installation

Installation:

Select Plugins & Products => Manage Products and click on the "Add/Import Product" link. And select the above xml from where ever you have stored it locally. This will install your product as well as your supporting plugin.
Select Plugins & Products => Plugin Manager and select Include the Joomla!VB template wrappers, then click save, to ensure the plugin refreshes.
Select vBulletin Options and scroll down to the end of the list. There should be a "Dynamic Joomla Options" in the list. Select that, and verify that your path and your joomla menu id are set correctly. If not, change them to the correct settings and click save.
Select Styles & Templates => Style Manager and create a brand new style with default (or a style you already have in place) as the parent style.

NB: The above intermediate step provides a means to play around with a test template without trashing your existing template. And, it also makes it easier to sandbox without having to restore your database.
Select Common Templates from your dropdown menu of the style you just created.

Common templates has three templates. These are header, headinclude, and footer.
- Insert $myjoomladhead at the end of the headinclude template
- Insert $myjoomladheader at the end of header template
- Insert $myjoomladfooter at the end of footer template
- Click save.
Click on your new style, which will launch your forum with the Dynamic Joomla!VB wrapper.

Demo: http://crimsonshadows.net (click on forum to see the seamless integration between the portal and vbulletin)

Notes, debugging, etcetera:

All php function calls, such as mosLoadModules should be made in the order they appear in your template. For example:
Code:
<?
  $myjoomlacontent   = array();

	[...]
  $myjoomlacontent[] = '              <div id="horiz-menu" class="'.$mtype.'">';
  echo implode( "\n", $myjoomlacontent );
  mosShowListMenu($menu_name);
  $myjoomlacontent   = array();
  $myjoomlacontent[] = '                <div class="clr"></div>';
	[...]
  
  echo implode( "\n", $myjoomlacontent );
?>
vBulletin seems to have problems parsing the raw Joomla! html w/embedded php. Hence the reason to use the $myjoomlacontent buffer variable, which you must dump ala the echo/implode when needing to make a function call that echoes the results as opposed to returning a string.

If you do not have embedded php code, you can simply include the raw code as reflected in the above footer.php example. Or, if you're a brave soul and have some time just import your raw templates and bypass the $myjoomlacontent buffer altogether. Good luck on this latter and if you figure out what the kink is, please let me know.

As far as debugging goes? Hopefully you have access to your php error log or you're displaying your php errors/warnings to the screen. This makes debuging much easier.

The most common errors you can encounter when attempting this type of implementation are leaving off ending quotes, or using a semiquote on html code that already contain a semi quote. My general rule of thumb, if the html code is using quotes, then I use semi quotes to load the string into $myjoomlacontent buffer. Likewise, if it is using semi quotes, I use quotes.

Other errors may be missing variables. I'm using the Rocket Theme templating system therefore my head.php contains the Rocket Theme includes.
As for swithching themes? You will need to create a vbulletin directory under each template directory you may wish to use. Then, create the three aforementioned files (head.php, header.php, footer.php) and upload them to their respective template directory. At which point, it is a matter of using your joomla control panel to switch between templates.

Excellent/Important user feedback/tips

Quote:

Originally Posted by Tiedgen

1.) I noticed on your site that when you go from your main page to your
vbulletin page, the navbar font is a different size and/or style. --- I
found a fix for this and the answer lies in the style manager in the VB
admincp. Edit your desired VB style and scroll down the CSS style boxes
until you come to <td>, <th>, <p>, <li>. This is where the problem lies.
Apparantly, implementing the joomla code (which includes the CSS code) is
screwing with the vb css code. The solution was simple; I just edited the
font size and font family under <td>, <th>, <p>, <li>. In my case, I
changed the font size to 9pt and re-arranged the first font style: verdana.
Once I changed these variables, the header and navbar text was identical to
the rest of the board.. No more little annoyance.. :-)

2.) And lastly, this deals more with the rockettheme template code. I
noticed that I couldn't get my board to center correctly in the main
content wrapper; it was a few pixels to the right. (I know.. petty stuff..)
To remedy this I deleted the last dozen or so lines of code from my
header.php file; the code dealing with the right or left nav section (in my
case, the right nav section) If you would like the specific code, don't
hesitate to ask. Your firenze template coding should be nearly identical to
my elemental template from rockettheme.com

Quote:

Originally Posted by cheesegrits

One fairly important change though, for anyone even vaguely concerned about server load, you should probably wrap this around the plugin code:

PHP Code:


			
if (THIS_SCRIPT != 'cron')

{

   blah blah

}

Otherwise you are loading the whole of Joomla twice on every page load, and it obviously doesn't need to happen the second time, just for the cron jobs.

Support

I will happily answer questions that are not addressed in the above instructions. Feedback is also welcomed.

Addendum

Please do not ask me to write and/or debug your php code! So far, all of the questions I have received are from people who (a) did not even bother to read the detailed instructions that I provided above, and/ or (b) haven't clue one wrt writing php code, much less debugging it.

While I have no problem supporting this product, I do not have time to teach people how to write and debug their own code. Esp considering that the errors encountered thus far could have been easily avoided by reading the instructions!

If you install this PLEASE
Click Install

cheesegrits · #42 05-19-2008, 12:39 AM

Quote:

Originally Posted by Sunsetdriver

1) if I change the default style in Joomla's backend (same template but different style), it doesn't change in forum page. Of course it happens 'cause I have to manually change parameters in /vbulletin/head.php. Is there a way to let head.php read parameters directly from template's index.php?

What you could do is extract any style definition lines from the head.php and index.php, create another file to put them in, and 'require' that file from your two versions of the template.

Quote:

2) How can I display correctly modules in forum page? I tried it but they didn't got displayed well;

I don't seem to have any problems with CMPS modules, can't help you there.

Quote:

3) There's a bug with vb's dropdown menus. As I click on them, they got displayed away from menu (see pic).

This is a semi-well known quirk of vB's menu control javascript. It assumes there are no blocks on the page between the menu location and the document root which use 'position=absolute' or 'position=relative'. In other words, vB always assumes it is calculating coordinates relative to the top left of the document. But if the menu is within any block which uses positioning (like your J! template), it is then rendered with the coordinates being relative to that block. So the menu is shifted down and to the right.

The only cure I've found for this is a vB file edit, which I hate doing, but I've yet to find a workaround for it. In ./clientscript/vbulletin_menu.js, edit the following function to look like this:

Code:

vB_Popup_Menu.prototype.fetch_offset = function(obj)
{
	/*
	if (obj.getBoundingClientRect)
	{
		// better, more accurate function for IE
		var rect = obj.getBoundingClientRect();

		var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

		if (document.documentElement.dir == 'rtl')
		{
			// IE returns a positive scrollLeft, but we need a negative value to actually do proper calculations.
			// This actually flips the scolloing to be relative to the distance scrolled from the default.
			scrollLeft = scrollLeft + document.documentElement.clientWidth - document.documentElement.scrollWidth;
		}

		return { 'left' : rect.left + scrollLeft, 'top' : rect.top + scrollTop };
	}
	*/

	var left_offset = obj.offsetLeft;
	var top_offset = obj.offsetTop;

	while (YAHOO.util.Dom.getStyle(obj, 'position') == 'static' && (obj = obj.offsetParent) != null)
	{
		left_offset += obj.offsetLeft;
		top_offset += obj.offsetTop;
	}

	return { 'left' : left_offset, 'top' : top_offset };
};

As always with code edits, make sure you keep an original copy of the file in case you moof it up.

-- hugh

cheesegrits · #43 05-25-2008, 04:02 AM

Just an FYI ...

I found a bug in vB which breaks the WYSIWYG editors in Internet Explorer if the Mootools javascript library (mootools.js) is included on a vB page. So, for instance, you can't post anything or send PM's, or do anything which uses a WYSIWYG editor. It'll keep telling you your post must have more than 10 characters.

Although Joomla 1.0.x itself doesn't include Mootools, a lot of Joomla components and templates do (like almost all the Rocket Themes ones). Joomla 1.5 does include Mootools by default.

I submitted a bug report at vbulletin.com, and it's been marked as 'confirmed and fixed', although they didn't post the fixed code yet. The bug is in vbulletin_textedit.js.

I'll update this post when I find out what the fix is.

[EDIT]

The fix is around line 1423, the two lines commnented with 'hugh' below:

Code:

				// Force Firefox 1.0 to run it here and Firefox 1.5+ later on, see Bug #22661
				// hugh - patched as per http://www.vbulletin.com/forum/project.php?issueid=25602
				// if (doinit && typeof Array.prototype.map == 'undefined') { this.editdoc.designMode = 'on'; }
				this.editdoc = this.editwin.document; // See: http://msdn.microsoft.com/workshop/author/dhtml/overview/XpSp2Compat.asp#caching
				this.editdoc.open('text/html', 'replace');
				this.editdoc.write(text);
				this.editdoc.close();
				if (doinit)
				{
					this.editdoc.body.contentEditable = true;
					// $$$ hugh
					//if (typeof Array.prototype.map != 'undefined')
					if (is_moz)
					{
						this.editdoc.designMode = 'on';
					}
				}

-- hugh

Catmag · #44 05-29-2008, 11:17 AM

I've applied the wrapper (without the $myjoomlacontent buffer) to my test site and all seems to be working relatively well. I am having an issue, though, when I apply the J! core SEF urls. The "/forum" subdirectory is being dropped in any of the links within the forum.

Has anybody run into this problem? Fix?

J! 1.0.15/VB3.7.1

EDIT*** I've managed to work this issue out. mosShowHead() in header.php was causing the problem.

illPhever · #45 06-08-2008, 12:52 PM

Quote:

Originally Posted by Catmag

I've applied the wrapper (without the $myjoomlacontent buffer) to my test site and all seems to be working relatively well. I am having an issue, though, when I apply the J! core SEF urls. The "/forum" subdirectory is being dropped in any of the links within the forum.

Has anybody run into this problem? Fix?

J! 1.0.15/VB3.7.1

EDIT*** I've managed to work this issue out. mosShowHead() in header.php was causing the problem.

thanks Catmag. i had the same problem. i'm using SEF Advance. removing mosShowHead() in head.php did the trick.

yunie_ · #46 06-11-2008, 05:47 PM

ok.. this seems abit too complicated to me (even though i have not tried it).

my concern is.. will this make my website lag? it seems like for every page there is alot of things to fetch..

illPhever · #47 06-12-2008, 06:13 AM

Quote:

Originally Posted by cheesegrits

3) There's a bug with vb's dropdown menus. As I click on them, they got displayed away from menu (see pic).

This is a semi-well known quirk of vB's menu control javascript. It assumes there are no blocks on the page between the menu location and the document root which use 'position=absolute' or 'position=relative'. In other words, vB always assumes it is calculating coordinates relative to the top left of the document. But if the menu is within any block which uses positioning (like your J! template), it is then rendered with the coordinates being relative to that block. So the menu is shifted down and to the right.

The only cure I've found for this is a vB file edit, which I hate doing, but I've yet to find a workaround for it. In ./clientscript/vbulletin_menu.js, edit the following function to look like this:

Code:

vB_Popup_Menu.prototype.fetch_offset = function(obj)
{
    /*
    if (obj.getBoundingClientRect)
    {
        // better, more accurate function for IE
        var rect = obj.getBoundingClientRect();

        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

        if (document.documentElement.dir == 'rtl')
        {
            // IE returns a positive scrollLeft, but we need a negative value to actually do proper calculations.
            // This actually flips the scolloing to be relative to the distance scrolled from the default.
            scrollLeft = scrollLeft + document.documentElement.clientWidth - document.documentElement.scrollWidth;
        }

        return { 'left' : rect.left + scrollLeft, 'top' : rect.top + scrollTop };
    }
    */

    var left_offset = obj.offsetLeft;
    var top_offset = obj.offsetTop;

    while (YAHOO.util.Dom.getStyle(obj, 'position') == 'static' && (obj = obj.offsetParent) != null)
    {
        left_offset += obj.offsetLeft;
        top_offset += obj.offsetTop;
    }

    return { 'left' : left_offset, 'top' : top_offset };
};

As always with code edits, make sure you keep an original copy of the file in case you moof it up.

-- hugh

those changes didn't seem to work for me. after making the change, the dropdown menu fails to appear at all, and it logs an error, "Error: 'YAHOO' is undefined"

i noticed that on shadowraith's site (http://crimsonshadows.net/forum), he has the same problem with the dropdowns, too.

any other suggestions would be greatly appreciated.

cheesegrits · #48 06-15-2008, 10:01 PM

Apologies, I should have said that fix was for 3.7.

In 3.6 I think you just need to change the 'while' line to this:

PHP Code:


			
    while ((obj.style.position == '' || obj.style.position == 'static') && (obj = obj.offsetParent) != null)

And none of that stuff commented out in the 3.7 fix exists, so no need to worry about it.

-- hugh

segwayon · #49 06-21-2008, 03:56 AM

I'm curious if there's an example of an absolute path to the Joomla installation.

The path to my template's folder is "home/domain_name/public_html/templates/template_name/" and in that "template_name" folder is the index.php as well as the new "vbulletin" folder with the new files.

Any pointers appreciated.

cheesegrits · #50 06-22-2008, 10:37 AM

The Joomla install dir is wherever your main Joomla index.php is, which in your case is almost certainly /home/domain_name/public_html

-- hugh

James Argo · #51 06-24-2008, 07:29 PM

shadowraith, thank you thank you thank you!!!

*James Argo clicked Install and Motm*

Today, I'm not only learning how to wrap, but also how to do php buffering! Precious lesson!

One little question, I tried with 2 different templates (madeyourweb and my own template)

somehow I have difficulty with the line : .$GLOBALS['cur_template'].

for example in:

PHP Code:


			
.$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/logo.gif"

I must replace .$GLOBALS['cur_template']. with the template folder name to make it work. Is there any other way to work on it? (So I can just leave it .$GLOBALS['cur_template']. instead of replacing it with template's folder name)?

I tried in local server, J! 1.0.15 & vB 3.6.8.

Thanks

Jaymz

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.09235 seconds Memory Usage 2,353KB Queries Executed 25 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (7)bbcode_code (3)bbcode_php (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!