As vBulletin 3 approaches EOL (end of life) when it will no longer be actively developed, we have developed a style conversion tool to facilitate converting vBulletin 3 styles to be compatible with vBulletin 4.

We are planning to release this tool as part of vBulletin 4.1.3. Note that this tool is currently being tested, so the functionality when you see it may differ from what is described in this blog post, based on feedback from QA and other testers.

How it works

When you upgrade from vB3 to vB4, your styles are left unmodified in the Admin CP, but are not usable with vB4, since the vB3 and vB4 Stylevar systems and template syntax are not interoperable.

This tool allows you to convert those disabled vB3 styles to vB4 styles. It works by mapping your customized vB3 Stylevars and CSS colors to the corresponding vB4 Stylevars to produce a style that has many of the same style elements as the vB3 style. The goal is to provide you with a good starting place to manually convert your previous style to vB4, since the automatic conversion process is limited in what it can do.

There are some caveats

There is often not a one-to-one mapping of Stylevars. Some vB3 Stylevars map to multiple vB4 Stylevars, others have nowhere to map to. Due to the nature of this process, it is possible to produce an unusable or hard-to-read style depending on which elements were customized in vB3.

These are limitations that must be accepted since in an automated process such as this there is no reliable method to guarantee that the style will be usable.

Additional limitations are that customized templates and images cannot be converted. I'll explain this further down.

In spite of these limitations, there are many cases where this automatic converter will produce a reasonable "base" style upon which you can rebuild your vB3 style in vB4. In some cases the converter may produce a usable style without needing to manually tweak it.

This tool will tend to be more successful on vB3 styles that are customized in Stylevars and Main CSS colors, and will be (much) less successful on custom styles that rely on template edits and custom images.

So don't expect this tool to create a production-ready vB4 style, instead, take the generated style and use it as a starting point to be able to more quickly recreate your vB3 style in vB4.

Where is it?

When viewing the list of styles in the Admin CP Style Manager, there will be a new menu option called Generate vB4 Style in the style drop-down menu for each style that was customized in vB3. In this case, "customized" means that the style has customized values for Stylevars and/or CSS Colors.

This means that the new option should be available for all your customized vB3 styles, however, it is also possible to upload a customized vB3 style to a vB4 installation and then run this converter on it.



What does it do, specifically?

This tool first makes a copy of the vB3 style, appending "(Copy)" to the name of the style. It then attempts to convert it to a vBulletin 4 compatible style based on the vBulletin 3 style customizations in it. It will transfer most spacing and color customizations (background, text, link, and border colors), but as I already mentioned, will not attempt to transfer any template edits or custom images. So not all vBulletin 3 customizations will be transferred.

Style elements that the tool will attempt to transfer to the new vB4 style include:
  • Width, sizes, padding, and spacing set in vB3 Stylevars.
  • Colors set in vB3 Main CSS These include background, text, link, and border colors. CSS in the "Extra CSS Attributes" and "Additional CSS Definitions" boxes are not transferred, nor are background images.
  • Style replacement variables.
  • The title image set in vB3 Stylevars.
Style elements that will not be transferred to the new vB4 style include:
  • Customized templates These cannot be transferred due to the new template syntax and completely new style in vBulletin 4.
  • Custom images, including image paths set in vB3 Stylevars and background images referenced from CSS These cannot be transferred because vBulletin 4 introduces many new images that didn't exist in vBulletin 3 and many images are used differently, for example vBulletin 4 uses many text-based buttons where vBulletin 3 used image-based buttons. Note that the title image is transferred when possible.
  • HTML doctype set in vB3 Stylevars This is not transferred because all templates will continue to use the default vB4 markup and should thus use the default vB4 doctype.
See for yourself!

Jasper was kind enough to make a video demonstrating how this tool works.



Specific mappings for reference

The following tables show the specific mappings for how the vB3 Main CSS colors and vB3 Stylevars are mapped to vB4 Stylevars. When the mapping is not 1:1, a note in the right column explains the mapping that takes place.

Main CSS Colors

vB3 Main CSS Item vB4 Stylevar(s) Notes
body_bgcolor doc_background Value applied only to the "color" element of the vB4 stylevar.
body_fgcolor footer_copyright_color
footer_time_color

body_link_n_fgcolor link_color
pagetitle_link_color

body_link_m_fgcolor linkhover_color
pagetitle_linkhover_color

page_bgcolor body_background Value applied only to the "color" element of the vB4 stylevar.
page_fgcolor body_color
pagetitle_color
pagetitle_description_color
vbblog_pagetitle_color
vbcms_header_color

tborder_border_color blockhead_border
blocksubhead_border
forumhead_border
secondarycontent_header_border
threadlisthead_border
toolsmenu_border
usercp_forum_icon_legend_top_border
usercp_forum_icon_legend_border
vbblog_bloglist_border
vbblog_featured_border
vbblog_navigation_border
vbblog_pagetitle_border
vbblog_sidebar_avatar_border
vbblog_sidebar_tabs_border
calendar_events_border
calendar_th_blocksubhead_border
calendar_mini_othermonth_a_border
calendar_today_border_color
calendar_week_eventlist_birthdays_border
calendarwidget_weekdays_border
postbitlite_header_border
formrow_border
forumbits_border
foruminfo_border
foruminfo_header_border
forummenu_border
wgo_border
wgoheader_border
popupmenu_border
postbit_border
postbit_boxed_border
postbit_userinfo_border
postbithead_border
postbitlegacy_avatar_border
signature_border
profile_content_friends_list_border
profile_content_infractions_li_hover_border
profile_content_subsection_border
secondarycontent_border
sidebar_border
sidebar_content_border
threadbit_border
usercp_nav_blockbody_border
bbcode_quote_border
vbcms_editor_border
vbcms_header_borderBottom
vbcms_header_borderTop
vbcms_navwidget_menuitem_border
vbcms_navwidget_menuitem_hover_border
vbcms_wysiwyg_table_borderColor
lightweightbox_border
Value applied only to the "color" element of the vB4 stylevars.
tcat_bgcolor blockhead_background
forumhead_background
secondarycontent_header_background
threadlisthead_background
toolsmenu_background
navbar_tab_background
control_content_hover_background
usercp_forum_icon_legend_background
Value applied only to the "color" element of the vB4 stylevars.
tcat_fgcolor blockhead_color
forumhead_color
secondarycontent_header_color
threadlisthead_color
toolsmenu_color
control_content_hover_color

tcat_link_n_fgcolor blockhead_link_color
toolsmenu_link_color
navbar_tab_color

tcat_link_m_fgcolor blockhead_linkhover_color
toolsmenu_linkhover_color
navbar_tab_linkhover_color
navbar_linkhover_color

thead_bgcolor blocksubhead_background
header_background
navbar_background
navbar_tab_border
postbithead_background
control_content_background
Value applied only to the "color" element of the vB4 stylevars.
thead_fgcolor blocksubhead_color
header_color
header_link_color
header_linkhover_color
toplinks_link_color
toplinks_linkhover_color
navbar_color
navbar_linkhover_color
postbithead_color
control_content_color

thead_link_n_fgcolor blocksubhead_link_color
navlinks_color
navbar_link_color

thead_link_m_fgcolor blocksubhead_linkhover_color
tfoot_bgcolor footer_background
footer_border
Value applied only to the "color" element of the vB4 stylevars.
tfoot_fgcolor footer_color
tfoot_link_n_fgcolor footer_link_color
tfoot_link_m_fgcolor footer_linkhover_color
alt1_bgcolor navbar_tab_bevel
blockbody_background
blockrow_background
formrow_background
forumrow_firstentry_background
forumrow_background
threadbit_background
postbit_background
sidebar_content_background
usercp_nav_blockbody_background
lightweightbox_background
Value applied only to the "color" element of the vB4 stylevars.
alt1_fgcolor blockrow_color
sidebar_content_color

alt1_link_n_fgcolor block_link_color
blockrow_link_color
forum_sidebar_link_color

alt1_link_m_fgcolor block_linkhover_color
blockrow_linkhover_color
forum_sidebar_linkhover_color

alt2_bgcolor navbar_tab_selected_background
secondarycontent_background
threadbit_alt_background
threadbit_deleted_background
threadbit_hilite_background
postbit_control_background
postbit_deleted_background
postbit_userinfo_background
postbit_foot_background
sidebar_background
Value applied only to the "color" element of the vB4 stylevars.
alt2_fgcolor secondarycontent_color
postbit_control_color
sidebar_header_color

inlinemod_bgcolor imodhilite_backgroundColor Value applied only to the "color" element of the vB4 stylevar.
Stylevars

vB3 Stylevar vB4 Stylevar(s) Notes
outertablewidth doc_width
doc_maxWidth
doc_margin
The source value can be either a pixel or a percentage width. If the source value is exactly 100%, then it is not transferred, as that value is not applicable. For the vB4 doc_margin stylevar, the source value is only applied to the left and right elements, and "auto" is applied to the top and bottom elements, since that is how outertablewidth works in vB3.
spacersize body_padding The source value must be a pixel width, and it is applied only to the "left" and "right" elements of body_padding.
cellpadding padding
blockhead_padding
footer_padding
The source value must be a pixel width.
formwidth form_maxWidth
form_columnleft_width
form_columnright_width
The source value must be a pixel width. It is applied directly to form_maxWidth. It is multiplied by 0.3 and applied to form_columnleft_width, and it is multiplied by 0.7 and applied to form_columnright_width. This is done to done to create the 1/3 and 2/3 left and right columns inside forms, similar to the default vB4 form design.
titleimage titleimage The title image is transferred to vB4 if the title image file actually exists on the server. This prevents the title image from being a broken image if it doesn't exist.
Manual overrides for vB4 Stylevars

A manual override value is applied to some vB4 stylevars to prevent conflicts with other color values transferred from vB3, and to otherwise accommodate the vB3 style.

vB4 Stylevar(s) Notes
navlinks_background
navlinks_border_top
blockfoot_background
The value of "transparent" is applied to the "color" element only of these vB4 stylevars.