[HOW TO - vB4] Stylebridge vB3.8 -> vB 4.0

[Coroner]

This article is for all coders, who want's a quick port of the mods into vB4.

What does this means ?
You can use you vB 3.8 templates in a vB 4.0 include the stylevars.
You need to change ALL the conditions and ALL vars.
This bridge is only for the style !

What must I do before starting ?
You need to create 2 new templates. I call 'em stylebridge.css and stylebridge_headinclude.



You can do this simply by importing the attached product (it will only create those two new templates).
stylebridge.css
this templates contais the new style for the templates (tcat, thead, alt1, alt2 ....)
stylebridge_headinclude
this is the original vB4 headinclude templates without reset-fonts.css and vbulletin.css and some other .css.
How to modify my mod (PHP) ?
Somewhere in you mod, you will find this line
require ("./global.php");
The trick is now, to change the "headinclude".
Simply add below:
$alt1_color = $alt2_color = substr (vB_Template_Runtime::fetchStyleVar('body_color'), 0, 7);
$alt1_background = substr (vB_Template_Runtime::fetchStyleVar('threadbit_bac kground'), 0, 7);
$alt2_background = substr (vB_Template_Runtime::fetchStyleVar('threadbit_alt _background'), 0, 7);

$templater = vB_Template::create('stylebridge.css');
$templater->register('alt1_color', $alt1_color);
$templater->register('alt2_color', $alt2_color);
$templater->register('alt1_background', $alt1_background);
$templater->register('alt2_background', $alt2_background);
$stylebridge = $templater->render();

$templater = vB_Template::create('stylebridge_headinclude');
$templater->register_page_templates();
$templater->register('stylebridge', $stylebridge);
$templater->register('custom_global_css_reference', $custom_global_css_reference);
$headinclude = $templater->render();

some Differencec/changes
If you are using class="page" inside a template, you should change it to: class="body_wrapper".
Also, there are two border classes: One for tcat and the other for thead.
Here comes an example:

<table class="tborder" cellpadding="{vb:raw padding}" cellspacing="{vb:math {vb:raw padding}/2}" border="0">
<tr>
<td class="tcat">enter your text here</td>
</tr>
</table>
<table class="tborder2" cellpadding="{vb:raw padding}" cellspacing="{vb:math {vb:raw padding}/2}" border="0">
<tr>
<td class="thead">enter your text here</td>
</tr>
</table>


Footnote:
Remember that this won't work for ALL mods.



This could be while:
you're mod doesn't use "global.php"
you are using vb3 and vb4 styles at the same time
... anything elseI've tested it with only one of my mods on a vB4 containing 4 different styles.

If you have any excitations, please let me know.
It would also be greatfully, if you gave me feedback how it works.

Regards
Coroner

EDIT: Fixed the Style when the CSS is stored as files

[Coroner]

Another hint to get a great vb4 look is:
in the template stylebridge.css under:
.tborder, .tborder2, .tcat,. thead

add this:
moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-moz-border-radius-top{vb:stylevar right}: {vb:stylevar border_radius};
-moz-border-radius-top{vb:stylevar left}: {vb:stylevar border_radius};
-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar border_radius};
-webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar border_radius};

and in a table set cellspacing to zero - like:
cellspacing="0"

See image what you get.

[Allan]

It's great !!
Thank you :)

[MARCO1]

Very nice, I will try it in my new Mod. Rated 5 stars.

[Allan]

Yes, voted 5 stars !

[doraj]

Hello Coroner, congratulations for your article.
I am trying use it to update my style from 3.8 to 4.0 but I have problems with any parts of the forum, forumhome, forumdisplay, showthread..etc
I am testing it online here (http://www.forumcartoons.com/forum/forum.php)

Can you suggest me how to risolve these mistakes?

Thanks

[daveaite]

interesting. informational as well. good job

[Mukashi]

Very interesting Coroner....seems like you've basically matched variables from the old vB3 CCS to the vB4 Stylevars, so that a mod relying on the old variables would instead be able to pull the correct ones from the new style system. Is that correct?

If so...is there any way you (or anyone else here for that matter) might be able to take this a step further, and make something that would allow us to automatically convert over our colour schemes from vB3 styles to the stylevars of vB4 styles? Looks like one might be able to do that simply using what you've got here, reading down stylebridge.xml as if it was a checklist, but it'd be a great relief to a low of us who have no coding skills to speak of whatever if that process could be automated. ^^;

[RollaJedi]

so, what i'm getting from reading this description, is that you can take a mod made for vb 3.8, do the steps found above, and your mod will now be able to work on vb 4.0?

If thats true, could i get the gxboxlive mod to work on my vb 4.0.1 site? The author of that mod is saying he very likely wont be making the gxboxlive mod to work on the vb 4. ????

Thanks!!!!

[Coroner]

@RollaJedi
Nope. You have to change the vars and phrases inside the templates. Also you need to change all the php scripts to vb4.

This is only the style. You can leave the 99 percent of templates (without vars and phrases).

@Mukashi:
Yes, thats absolutely correct.
You also need to implement - the two templates and the php script inside the mod.

[Dylanblitz]

This has helped me out a lot.
I'm having 2 problems, maybe you've run into it?

My tables don't have a inner border anymore. All the rows look like one cell now. Also, if I have say 4 columns, if I use thead, the first column uses as much space as possible even though it's only set to width of 5% and the other 3 are squished.

Any ideas?

EDIT:
I figured out part of the problem.
$alt1_background and $alt2_background aren't registered in the example so I wasn't getting the background colors. For the width I just set the class in the TR instead of TD. Now I just need to figure out what is making my logo image have a border :)

[Coroner]

That's a think, I've fixed later (sorry, I haven't upgraded the file yet).

To fix the image border problem, just insert (into the style) the following part:
.img {
border: 0;
}

[Dylanblitz]

That's a think, I've fixed later (sorry, I haven't upgraded the file yet).

To fix the image border problem, just insert (into the style) the following part:

I ended up changing the

$headinclude = $templater->render();

to
$headinclude .= $templater->render();

And it worked. I'll switch it back and try adding the img css property.

[Coroner]

I've change the Stylebridge now for vB 4.0.2 (incl. the image patch).

[msnhockey]

this worked great for switching a 3,8 to 4.0.2 but the only problem i had is that it made the stuff on my forum home page bigger...
any ideas on what i can do to shrink in half...

thanks

[Hall of Famer]

Can you explain this a little bit further? Does it mean that old VB3 styles can be used in VB4 with this bridge?

[egyptsons]

really the old style for VB was more good for my members :) and me too

I wish I can use the old blue style again with VB 4

[Dylanblitz]

Can you explain this a little bit further? Does it mean that old VB3 styles can be used in VB4 with this bridge?
No, he created this as a bridge for mods, so a vb3 mod can easily be moved over to work on vb4.

[Hall of Famer]

I see. So how about VBexperience and VBCredits, do they work well after installing this addon?

[Dylanblitz]

No, this article is geared towards developers. It doesn't help end users much trying to get a vb3 mod working on vb4. There is still work that needs to be done to get a mod to work. This just saves a ton of template recoding.