vBulletin 3 to vBulletin 4 Style Conversion Tool

Collapse
X
Collapse
 

  • vBulletin 3 to vBulletin 4 Style Conversion Tool

    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.

    • 3amalah
      #48
      3amalah commented
      Editing a comment
      Amazing Job Thanks

    • danyz81
      #49
      danyz81 commented
      Editing a comment
      Hello, its cool but with this metod my reverted template missing header_include bottom for calling addiotional.css. (in my case)
      I've tried in differents mode without result in vb 4.1.3.

      its all ok for original templates

    • Dr. Bantham
      #50
      Dr. Bantham commented
      Editing a comment
      Appears to be totally useless when it comes to converting styles. I have been waiting for an eternity to upgrade to Illusion 4 due to the daunting task of converting styles and the lack of community support for converting mods, and this certainly does not work for me. The latter half should be half way there by the time I am beckoned to sink a few hundred dollars into Illusion 5.

      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.
    Posting comments is disabled.

Related Topics

Collapse

Working...