[cheesegrits]

An obvious drawback with embedding vB within J! is that you will very probably run into CSS conflicts. We have two radically different systems trying to share the same sandbox, and they end up stomping on each others CSS toes. I thought I'd document how I resolved these issues on my J! template (JA Xenia), but the same techniques will apply to most styles.

The main issue is obviously that vB's main stylesheet is overriding J! styling, and vice versa. It occurred to me that the first problem (vB stomping on J!) could be solved if all of vB's style selectors were specified as 'descendents' of the J! container wrapper div. In my case, using JA Xenia, this has the ID #ja-containerwrap. By the nature of the way this mod works, all of vB is contained within that div. The ID will vary depending on the J! template you are using, but there should be a 'wrapper' div which obviously surrounds vB.

So, I made a small code mod (much as I hate code mods, but there is no hook available in that location, I've requested one but am not holding my breath!) to vB, in ./includes/adminfunctions_template.php. At the end of the construct_css(), just before the 'return', I added this code:

PHP Code:

/*
    cheesegrits - joomlawrap CSS hack.  For use with shadowraith's Joomla!vB
    wrapper hack:
    
    https://vborg.vbsupport.ru/showthread.php?t=172308
    
    Place this code immediately before the 'return' at the end of
    the construct_css() function in includes/adminfunctions_template.php
    
    Set $jstyles to the vB style ID's you want to modify, and the CSS ID of the
    div in the coresponding J! template which 'wraps' the main body content.
    
    Go to Style Manager, edit and save the vB style(s) you want to modify.
*/
    $jstyles = array(
        2 => '#ja-containerwrap',
        7 => '#wrapper-inner'
    );
    // test to see if this is one of our J! integration styles
    if ($jstyles[$styleid])
    {
        // grab the wrapper DIV ID
        $jcontainer = $jstyles[$styleid];
        // loop through vB's $cssarray
        foreach ($cssarray as $key => $val)
        {
            // extract the selectors, i.e. everying before the opening {
            if (preg_match('#(.*)\s*\{#',$val,$matches))
            {
                $oldval = $matches[1];
                $newval = '';
                if (preg_match('#^body#',$oldval))
                {
                    // if this is vB's 'body', change it to just the wrapper ID
                    $newval = "$jcontainer ";
                }
                else
                {
                    // if it's anything but 'body', bust it up ...
                    foreach (explode(',',$oldval) as $thisval)
                    {
                        // ... and prepend the container ID to each selector
                        $newval .= "$jcontainer $thisval, ";
                    }
                }
                // chop any extranous trailing comma/space
                $newval = rtrim($newval,', ');
                // replace the original selector list with ours
                $cssarray[$key] = str_replace($oldval,$newval,$val);
            }
        }
    } 


After making this mod and saving the style(s), the main vB CSS on your wrapped vB will now look like this:

#ja-containerwrap .page
{
   background: #FFFFFF;
   color: #000000;
}
#ja-containerwrap td, #ja-containerwrap th, #ja-containerwrap p, #ja-containerwrap li
{
   font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
... etc etc ..

NOTE that this only takes care of the standard vB defined style tags. If you have "extra CSS" defined in your style, you may need to manually prepend the wrapper div ID to the custom CSS definitions.

This goes most of the way to solving the "vB stomping on J!" issue..

This has already gotten rather long, so I'll follow up in another post with the other stuff I had to do to get everything playing nicely together.

-- hugh