Announcement

Collapse
No announcement yet.

How To: Styling/Theming

Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • vBulletin 3 to vBulletin 4 Style Conversion Tool

    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_colorfooter_time_color body_link_n_fgcolor ...
    See more | Go to post

  • Change CKEditor Colors to Match Style (for 4.1.4 and above)

    Change CKEditor Colors to Match Style (for 4.1.4 and above)

    Add this code to your additional.css template to match the colors of the editor to the style you are using:

    /* Background Color for CKEditor */
    .cke_skin_kama .cke_wrapper {
    background:{vb:stylevar postbithead_background} !important;
    }

    /* Background Color for CKEditor Buttons
    (Note, this may be too dark for some styles. If so you can delete this one.) */
    .cke_skin_kama .cke_toolgroup {
    background: {vb:stylevar postbit_foot_background} !important;
    }


    /* Background Color for CKEditor Hover Link*/ .cke_skin_kama a:hover { background: {vb:stylevar control_content_hover_background} !important; } The additional.css template can be found here: ...
    See more | Go to post

  • 9 Easy Steps to Styling Your Forum

    9 Easy Steps to Styling Your Forum

    The updated guide on how to style your forum in less then 12 steps!

    Current for vB version 4.1.2...
    See more | Go to post

  • How to create a Fixed Style Template

    How to create a Fixed Style Template

    I wanted to do a short video tutorial on how to resize the general width of your vBulletin 4 Forum. Many vbulletin 4 themes that have come out are only available in “fluid style,” meaning it takes up the whole computer screen. I want to show you how to quickly make it a “fixed style” that can be resized to your needs. To get started, log in to your admin cp and click on “Styles and Templates" > "Style Manager"> and choose the style you want to edit. On the drop down field choose StyleVars. In the search field, just type in “doc.” Afterwards you should see doc_maxwidth under the “Common” category. Click on it. After cli...
    See more | Go to post

  • New Stylevars in 4.0.8

    New Stylevars in 4.0.8

    In vBulletin 4.0.8, considerable effort was put into the CSS and available stylevars to consolidate and reuse different stylevars across various systems. Here you will find a list of new stylevars in the system to help with this effort.

    I.
    ToolsMenu

    stylevar
    description
    data type
    toolsmenu_background Changes the background for the tools menu background
    toolsmenu_bevel Changes the color of the bevel for the tools menu. Bevel is the inner top border. color
    toolsmenu_border Changes the border around the tools menu border
    toolsmenu_color Changes the color of the text for the tools menu color
    toolsmenu_fontSize Changes the size of the text for the tools menu size
    toolsmenu_link_color Changes the color of the Tools Menu Links with no popup menu. color
    ...
    See more | Go to post

  • Deprecated Stylevars

    Deprecated Stylevars

    This is a list of the stylevars that will be deprecated in the upcoming vBulletin 4.0.8 and 4.1.0 releases. This list is subject to change as the work is ongoing. Deprecated Stylevars Stylevar Replacement albumtop_background toolsmenu_background albumtop_border toolsmenu_border albumtop_font_size toolsmenu_fontSize Stylevar Replacement vbblog_navigation_background navlinks_background vbblog_navigation_border navlinks_border vbblog_navigation_color navlinks_color vbblog_sidebar_background sidebar_background vbblog_sidebar_border sidebar_border vbblog_sidebar_content_background sidebar_content_background vbblog_sidebar_content_border sidebar_content_border vbblog_sidebar_content_color sidebar_content_color vbblog_sidebar_content_separator_background sidebar_contentseparator_background vbblog_sidebar_content_separator_height sidebar_contentseparator_height vbblog_sidebar_contentlist_avatar_maxSize sidebar_contentavatar_width vbblog_sidebar_header_color sidebar_header_color vbblog_sidebar_header_font sidebar_header_fontSize vbblog_sidebar_padding Deprecate, no replacement. Version 4.0.8 Stylevar Replacement notifications_popup_a_background_color Deprecate, no replacement. Version 4.1.0 pagination_a_hover_border Deprecate, no replacement. Version 4.1.0 pagination_span_border_top Deprecate, no replacement. Version 4.1.0 projection_box_size No Longer Supported textedit_background Deprecate, no replacement. Version 4.1.0 Stylevar Replacement forum_sidebar_background sidebar_ background forum_sidebar_border sidebar_border forum_sidebar_content_background sidebar_content_background forum_sidebar_content_border sidebar_content_color forum_sidebar_content_color sidebar_content_color forum_sidebar_content_separator_background sidebar_contentseparator_background forum_sidebar_content_separator_height sidebar_contentseparator_height forum_sidebar_contentlist_avatar_maxSize sidebar_contentavatar_width forum_sidebar_header_color sidebar_header_color forum_sidebar_header_font sidebar_header_font Stylevar Replacement forumbit_spacer_width Deprecate, Not in Use. Version 4.1.0 forumbits_aForum forumhead_color. Version 4.1.0 forumhead_width Deprecated, Not for use in stylevars. Version 4.1.0 forumiconbox_size Deprecate, Not in Use. Version 4.1.0 foruminfo_background secondarycontent_background foruminfo_border secondarycontent_border foruminfo_border_radius Deprecate, Not in Use. Version 4.1.0 forummenu_color toolsmenu_color forummenu_font toolsmenu_fontSize Stylevar Replacement wgo_background secondarycontent_background wgo_border secondarycontent_border wgo_fontSize secondaryContent_font wgoheader_background secondarycontent_header_background wgoheader_border secondarycontent_header_border wgoheader_color secondarycontent_header_color wgoheader_font secondarycontent_header_fontSize wgosubheader_font secondarycontent_subheader_fontSize Stylevar Replacement searchbox_size Deprecate, Not in Use. Version 4.1.0 Stylevar Replacement postbit_content_max_image_width image_medium_max Stylevar Replacement profile_content_background Deprecate, Not in Use. Version 4.1.0 profile_content_blog_head Deprecate, Unused CSS profile_content_blogentrybit_continue_reading link_color profile_content_border Deprecate, Not in Use. Version 4.1.0 profile_sidebar_background sidebar_background profile_sidebar_border sidebar_border prodile_sidebar_box_background sidebar_content_background profile_sidebar_box_border sidebar_content_border profile_sidebar_color sidebar_content_color profile_sidebar_separator_background sidebar_contentseparator_background Stylevar Replacement vbcms_article_image_large_maxSize image_large_max vbcms_article_image_medium_maxSize image_small_max vbcms_article_image_thumbnail_maxSize image_thumbnail_max vbcms_article_preview_image_maxSize image_thumbnail_max vbcms_widget_avatar_maxwidth sidebar_contentavatar_width vbcms_widget_block_background sidebar_background vbcms_widget_border sidebar_border vbcms_widget_color sidebar_content_color vbcms_widget_comment_lines Deprecate, Not in Use. Version 4.1.0 vbcms_widget_content_background sidebar_content_background vbcms_widget_content_bevel sidebar_content_bevel vbcms_widget_content_border sidebar_content_border ...
    See more | Go to post

  • How To: Find a StyleVar (video version)

    How To: Find a StyleVar (video version)



    NOTE: If you have any specific queries regarding StyleVars you can't find, please post in the vBulletin Templates, Graphics & Styles forum....
    See more | Go to post

  • Center Your Logo in vBulletin 4

    Center Your Logo in vBulletin 4

    To center the vBulletin logo above, we would add the following to the additional.css template:

    Code:
    .logo-image {
    clear:both;
    display:block;
    float:none;
    text-align:center;
    }
    Some logos may need to then have some padding applied to them to move them down so they don't run into the Welcome tabs. You may add padding to the CSS above if you need to do this (change the padding in red as needed):

    Code:
    .logo-image {
    clear:both;
    display:block;
    float:none;
    text-align:center;
    padding-top: 20px;
    }
    (If you have ads, then this w...
    See more | Go to post

  • 10 Easy Steps to Styling Your Forum

    10 Easy Steps to Styling Your Forum

    10 easy changes you can make using StyleVars to redesign the look of your forum. This article is contributed by Fei Leung at Internet Brands.
    ...
    See more | Go to post

  • vB4: Skinning Your Forum in 10 Easy Steps

    vB4: Skinning Your Forum in 10 Easy Steps

    In the spirit of providing more documentation to our customers and developer community, we put together two PDF documents and an example style. The first is "vB4: Skinning Your Forum in 10 Easy Steps." This is a step-by-step guide on how to customize the main areas of your vB4 Forum. The second document is the vB4 StyleVar Visual Dictionary. The StyleVar (style variable) Dictionary is more of a complementary reference guide aimed at understanding how and where to use each StyleVar for advanced customization. As we finalize the product, I will continue to provide updated versions of these two docs. Finally, I also included a zip file, "Wave 1.zip" that includes: 1. Image files used in this vB4: Skinning doc. 2. wave-style.xml - if you want to install this new style. 3. install.rtf - instructions on how to install wave-style. ...
    See more | Go to post
There are no articles in this category.
  • Filter
  • Time
  • Show
Clear All
new posts
Please log in to your account to view your subscribed posts.

Article Tags

Collapse

advanced (5) android (2) api (29) app (1) array (17) beginner (17) blog (4) bloginfo (1) calendar (2) cms (2) custom profile fields (1) forum (3) forums (4) Intermediate (5) iphone (3) mapi (30) methods (10) mobile (34) photo (1) style (2) sub-forums (1) subforums (1) threads (4) vb5howto (5) vBulletin (5)

Latest Articles

Collapse

  • vBulletin 3 to vBulletin 4 Style Conversion Tool
    David Grove
    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_colorfooter_time_color body_link_n_fgcolor ...
    Mon 14th Nov '11, 4:50pm
  • Change CKEditor Colors to Match Style (for 4.1.4 and above)
    Steve Machol
    Add this code to your additional.css template to match the colors of the editor to the style you are using:

    /* Background Color for CKEditor */
    .cke_skin_kama .cke_wrapper {
    background:{vb:stylevar postbithead_background} !important;
    }

    /* Background Color for CKEditor Buttons
    (Note, this may be too dark for some styles. If so you can delete this one.) */
    .cke_skin_kama .cke_toolgroup {
    background: {vb:stylevar postbit_foot_background} !important;
    }


    /* Background Color for CKEditor Hover Link*/ .cke_skin_kama a:hover { background: {vb:stylevar control_content_hover_background} !important; } The additional.css template can be found here: ...
    Fri 5th Aug '11, 5:28pm
  • vBulletin Facebook App
    Jasper Aguila
    Introducing the vBulletin Facebook App
    An app specifically designed for your vBulletin site to help you engage and expand your community through the use of the Facebook platform - utilizing the
    Wed 27th Jul '11, 2:31pm
  • 9 Easy Steps to Styling Your Forum
    Fei Leung
    The updated guide on how to style your forum in less then 12 steps!

    Current for vB version 4.1.2...
    Thu 17th Mar '11, 6:14pm
  • How to create a Fixed Style Template
    Jasper Aguila
    I wanted to do a short video tutorial on how to resize the general width of your vBulletin 4 Forum. Many vbulletin 4 themes that have come out are only available in “fluid style,” meaning it takes up the whole computer screen. I want to show you how to quickly make it a “fixed style” that can be resized to your needs. To get started, log in to your admin cp and click on “Styles and Templates" > "Style Manager"> and choose the style you want to edit. On the drop down field choose StyleVars. In the search field, just type in “doc.” Afterwards you should see doc_maxwidth under the “Common” category. Click on it. After cli...
    Wed 3rd Nov '10, 2:44pm
  • New Stylevars in 4.0.8
    Wayne Luke
    In vBulletin 4.0.8, considerable effort was put into the CSS and available stylevars to consolidate and reuse different stylevars across various systems. Here you will find a list of new stylevars in the system to help with this effort.

    I.
    ToolsMenu

    stylevar
    description
    data type
    toolsmenu_background Changes the background for the tools menu background
    toolsmenu_bevel Changes the color of the bevel for the tools menu. Bevel is the inner top border. color
    toolsmenu_border Changes the border around the tools menu border
    toolsmenu_color Changes the color of the text for the tools menu color
    toolsmenu_fontSize Changes the size of the text for the tools menu size
    toolsmenu_link_color Changes the color of the Tools Menu Links with no popup menu. color
    ...
    Mon 11th Oct '10, 7:14am
Working...
X