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.
- 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.
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. |
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. |
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. |
I've tried in differents mode without result in vb 4.1.3.
its all ok for original templates
These confections look nothing like the originals. Does not convert image backgrounds. Does not use smart logic when it comes to continuity with new variables. I will not sink another dollar into this company, though I suspect you will plot to hold my forums hostage somehow, some way. You have forsaken me.