StyleVars + Definitions [Full List]

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Brad Padgett
    Senior Member
    • Jul 2014
    • 420
    • 5.1.x

    StyleVars + Definitions [Full List]

    Big thanks to Wayne Luke for providing them. Now all you vbulletin 5 users have documentation for proper styling until it's added to the site.

    Bbcode [code] Background bbcode_code_background Controls the background color and image for the Bbcode [code] display. Bbcode background
    Bbcode [code] Border bbcode_code_border Controls the border width, style, and color for the Bbcode [code] display. Bbcode border
    BBCode [code] Font Size bbcode_code_fontsize This stylevar controls the size of BBCode [code] font. Bbcode size
    BBCode [code] Line Height bbcode_code_line_height Controls the line height for bbcode [code] blocks. This needs to be set as a pixel line height (set units to px) for the block height calculation to work correctly. Bbcode size
    Bbcode [quote] Background bbcode_quote_background Controls the background color and image for the Bbcode [quote] display. Bbcode background
    Button Arrow Background button_arrow_background Controls the background color and image for the small arrow buttons, for example the pagination buttons for comments. Buttons background
    Button Arrow Border button_arrow_border Controls the border width, style, and color for the small arrow buttons, for example the comment pagination buttons. Buttons border
    Button Disabled Background button_disabled_background Controls the background color and image for disabled buttons. Buttons background
    Button Disabled Border button_disabled_border Controls the border width, style, and color for disabled buttons. Buttons border
    Button Disabled Text Color button_disabled_text_color Controls the text color for disabled buttons. Buttons color
    Button Primary Background button_primary_background Controls the background color and image for primary buttons. Buttons background
    Button Primary Background Hover button_primary_background_hover Controls the background color and image for primary buttons when the mouse is over them. Buttons background
    Button Primary Border button_primary_border Controls the border width, style, and color for primary buttons. Buttons border
    Button Primary Border Hover button_primary_border_hover Controls the border width, style, and color for primary buttons when the mouse is over them. Buttons border
    Button Primary Light Background button_primary_light_background Controls the background color and image for primary light buttons. Buttons background
    Button Primary Light Border button_primary_light_border Controls the border width, style, and color for primary light buttons. Buttons border
    Button Primary Light Border Hover button_primary_light_border_hover Controls the border width, style, and color for primary light buttons when the mouse is over them. Buttons border
    Button Primary Light Text Color button_primary_light_text_color Controls the text color for primary light buttons. Buttons color
    Button Primary Text Color button_primary_text_color Controls the text color for primary buttons. Buttons color
    Button Primary Text Color Hover button_primary_text_color_hover Controls the text color for primary buttons when the mouse is over them. Buttons color
    Button Secondary Background button_secondary_background Controls the background color and image for secondary buttons. Buttons background
    Button Secondary Border button_secondary_border Controls the border width, style, and color for secondary buttons. Buttons border
    Button Secondary Border Hover button_secondary_border_hover Controls the border width, style, and color for secondary buttons when the mouse is over them. Buttons border
    Button Secondary Text Color button_secondary_text_color Controls the text color for secondary buttons. Buttons color
    Button Special Background button_special_background Controls the background color and image for special buttons. Buttons background
    Button Special Border button_special_border Controls the border width, style, and color for special buttons. Buttons border
    Button Special Border Hover button_special_border_hover Controls the border width, style, and color for special buttons when the mouse is over them. Buttons border
    Button Special Text Color button_special_text_color Controls the text color for special buttons. Buttons color
    Content Entry Auto Save Notice Background contententry_autosave_background Color of the background of the Auto Save notice popup ContentEntry background
    Content Entry Auto Save Notice Text Color contententry_autosave_text_color Color of the Text of the Auto Save notice popup ContentEntry color
    Content Entry Panel Background contententry_panel_background Controls the background color and image for the panels in the content entry interface. ContentEntry background
    Content Entry Panel Section Background contententry_panel_section_background Controls the background color and image for the content entry panel sections. ContentEntry background
    Content Entry Panel Section Title Background contententry_panel_section_title_background Controls the background color and image for the content entry panel section titles. ContentEntry background
    Content Entry Toolbar Background contententry_toolbar_background Control the background color for the content entry toolbar. ContentEntry background
    Content Entry Toolbar Button Secondary Background Active contententry_toolbar_button_secondary_background_active Controls the background color and image for the secondary content entry toolbar buttons when active. ContentEntry background
    Content Entry Toolbar Button Secondary Background contententry_toolbar_button_secondary_background Controls the background color and image for the secondary content entry toolbar buttons. ContentEntry background
    Content Entry Toolbar Button Secondary Border contententry_toolbar_button_secondary_border Controls the border color style and width for the secondary content entry toolbar buttons. ContentEntry border
    Footer Bar Background footer_background Controls the background color and image for the footer bar. Footer background
    Footer Copyright Text Color footer_copyright_text_color Controls the text color for the footer copyright text. Footer color
    Footer Font Style footer_font_style Controls the font family, size, and style for the footer. Footer font
    Footer List Item Color footer_list_item_color Controls the text color for the footer links. Footer color
    Footer List Item Divider Color footer_list_item_divider_color Controls the divider color between footer links. Footer color
    Form Background form_background Controls the background color and image for forms. FormElements background
    Form Border form_border Controls the border width, style, and color for forms. FormElements border
    Form Dropdown Background form_dropdown_background Controls the background color and image Controls the border width, style, and color for the dropdown (select) elements in forms. FormElements background
    Form Dropdown Background Hover form_dropdown_background_hover Controls the background color and image for the dropdown (select) elements in forms when the mouse is over them. FormElements background
    Form Dropdown Border form_dropdown_border Controls the border width, style, and color for the dropdown (select) elements in forms. FormElements border
    Form Dropdown Text Color form_dropdown_text_color Controls the text color for the dropdown (select) elements in forms. FormElements color
    Form Dropdown Text Color Hover form_dropdown_text_color_hover Controls the text color for the dropdown (select) elements in forms when the mouse is over them. FormElements color
    Form Field Background form_field_background Controls the background color and image for form fields. FormElements background
    Filter Field Border form_field_border Controls the border width, style, and color for the input fields in forms. FormElements border
    Form Field Text Color form_field_text_color Controls the text color in form fields. FormElements color
    Announcement Background announcement_background Controls the background color and image of announcements within the topic list on forum display. Global background
    Announcement Border announcement_border Controls the border color, style, and width of announcements within the topic list on forum display. Global border
    Announcement Text Color announcement_text_color Controls the text color for announcements within the topic list on forum display. Global color
    Autosuggest Background autosuggest_background Controls the background color and image for the global autosuggest dropdown menu. Global background
    Body Background body_background Controls the background color and image of the content frame's background. Global background
    Body Font body_font Controls the base font family, style, and line height for text. Global font
    Body Line Height body_line_height Controls the base line height for text. Global size
    Body Link Color body_link_color Controls the text color for links. Global color
    Body Link Color Hover body_link_color_hover Controls the text color for links when the mouse is over them. Global color
    Body Link Decoration body_link_decoration Controls the text decoration for links. Global textdecoration
    Body Link Decoration Hover body_link_decoration_hover Controls the text decoration for links when the mouse is over them. Global textdecoration
    Body Text Color body_text_color Controls the general default text color for the site. Global color
    Content Entry box header text color content_entry_box_header_text_color Controls the text color of the content entry box header Global color
    Notice Background notice_background Controls the background color and image for notices. Global background
    Notice Border notice_border Controls the border width, style, and color for notices. Global border
    Notice Text Color notice_text_color Controls the text color for notices. Global color
    "Previous" button border color pagination_nextprev_divider_left_color Controls the border color for "previous" navigation button Global color
    "Next" button border color pagination_nextprev_divider_right_color Controls the border color for "next" navigation button Global color
    Placeholder Text Color placeholder_text_color Controls the text color for the placeholder text in form inputs and text areas. Global color
    Wrapper Background wrapper_background Controls the background color and image for the content wrapper (everything between the header and the footer). Global background
    Wrapper Max Width wrapper_max_width Controls the maximum width for the site, including the header and footer. Global size
    Wrapper Min Width wrapper_min_width Controls the minimum width for the site, including the header and footer. Global size
    Wrapper Width wrapper_width Controls the width for the site, including the header and footer. Global size
    Header Background header_background Controls the background color and image for the header area. Header background
    Header Search Button Background header_search_button_background Controls the background color and image for the search button in the header. Header background
    Header Search Button Border header_search_button_border Controls the border width, style, and color for search button in the header. Header border
    Header Search Button Text Color header_search_button_text_color Controls the text color for the search button in the header. Header color
    Header Search Input Background header_search_input_background Controls the background color and image for the search box in the header. Header background
    Header Search Input Border header_search_input_border Controls the border width, style, and color for search box in the header. Header border
    Header Search Input Text Color header_search_input_text_color Controls the text color for the search box in the header. Header color
    Header Search Placeholder Text Color header_search_placeholder_text_color Controls the text color for the placeholder text in the search box in the header Header color
    Header Subtabbar Background header_subtabbar_background Controls the background color and image for the sub navigation links under the tabs in the header area. Header background
    Header Subtabbar Border header_subtabbar_border Controls the border width, style, and color for the sub navigation links under the tabs in the header area. Header border
    Header Subtabbar Text Color header_subtabbar_text_color Controls the text color for the links under the tabs in the header area. Header color
    Header Subtabbar Text Color Hover header_subtabbar_text_color_hover Controls the text color for the links under the tabs in the header area when the mouse is over them. Header color
    Header Tab Background Active header_tab_background_active Controls the background color and image for the navigation tabs in the header area, for the currently selected tab. Header background
    Header Tab Background header_tab_background Controls the background color and image for the navigation tabs in the header area. Header background
    Header Tab Background Hover header_tab_background_hover Controls the background color for the navigation tabs in the header area when the mouse is over them. Header background
    Header Tab Border Active header_tab_border_active Controls the border width, style, and color for the currently selected tab in the navigation tabs in the header. Header border
    Header Tab Text Color Active header_tab_text_color_active Controls the text color for a header navigation tab, when it is currently selected. Header color
    Header Tab Text Color header_tab_text_color Controls the text color for the navigation tabs in the header area. Header color
    Header Tab Text Color Hover header_tab_text_color_hover Controls the text color for header navigation tabs when the mouse is over them. Header color
    Header Tabbar Background header_tabbar_background Controls the background color and image for the navigation tabs area in the header. Header background
    Header Tabbar Border header_tabbar_border Controls the border width, style, and color for the header tabbar. Header border
    Header Text Color header_text_color Controls the text color for any text in the header. Header color
    Favicon File Path favicon This stylevar controls the file path of the favicon. The favicon is the small image displayed in the browser address bar and near browser page title. ImagePaths url
    imgdir_attach ImagePaths imagedir
    Button Image Directory imgdir_button ImagePaths imagedir
    Misc Images Directory imgdir_misc ImagePaths imagedir
    Item Status Icon Folder imgdir_statusicon ImagePaths imagedir
    Title Image titleimage This is your logo or title image. Set to the path of the logo you want to use. ImagePaths url
    Photo Background photo_background Controls the background color and image for photos. Images background
    Photo Border photo_border Controls the border width, style, and color for photos. Images border
    Photo Border Hover photo_border_hover Controls the border width, style, and color for photos when the mouse is over them. Images border
    Photo Preview Background photo_preview_background Controls the background color and image for the photo preview area. Images background
    Photo Preview Border photo_preview_border Controls the border width, style, and color for the photo preview area. Images border
    slideshow_image_background Images background
    Post Editor History Added Text Background diff_add_background This stylevar controls the background of added text in the post edit history. Miscellaneous background
    Post Editor History Added Text Color diff_add_color This stylevar controls the text color of added text in the post edit history. Miscellaneous color
    Post Editor History Removed Text Background diff_remove_background This stylevar controls the background of removed text in the post edit history. Miscellaneous background
    Post Editor History Removed Text Color diff_remove_color This stylevar controls the text color of removed text in the post edit history. Miscellaneous color
    List item background list_item_background Miscellaneous background
    Sticky topic background color sticky_topic_background_color Controls the background color of sticky topics Miscellaneous color
    Tooltip signature background tooltip_signature_background Controls the background of the signature tooltip Miscellaneous background
    Tooltip Signature Border tooltip_signature_border Controls the border width, style, and color for signature tooltips. Miscellaneous border
    Topic Title Color topic_title_color Miscellaneous color
    content_divider_color Miscellaneous color
    private_messages_mark_as_unread_background Miscellaneous background
    search_result_highlight_color Miscellaneous color
    section_divider_color Miscellaneous color
    time_stamp_color Miscellaneous color
    Module Content Background module_content_background Controls the background color and image for module content areas. Modules background
    Module Content Border module_content_border Controls the border width, style, and color for the content area of modules. Modules border
    Module Header Background module_header_background Controls the background color and image for module headers. Modules background
    Module Header Border module_header_border Controls the border width, style, and color for module headers. Modules border
    Module Header Font module_header_font Controls the font for module headers. Modules font
    Module Header Text Color module_header_text_color Controls the text color for module headers. Modules color
    Search module item border module_search_list_item_border Defines the border of the items inside the search module Modules border
    No Content Background no_content_background Controls the background color and image for the "no content" message in modules. Modules background
    Primary Module Background primary_module_background Controls the background color and image for the primary modules. Modules background
    Primary Module Border primary_module_border Controls the border width, style, and color for the primary module. Modules border
    Primary Module Header Background primary_module_header_background Controls the background color and image for primary module headers. Modules background
    Primary Module Header Font primary_module_header_font Controls the font for primary module headers. Modules font
    Primary Module Header Text Color primary_module_header_text_color Controls the text color for primary module headers. Modules color
    Primary Module Subheader Background primary_module_subheader_background Controls the background color and image for primary module subheaders. Modules background
    Primary Module Subheader Border primary_module_subheader_border Controls the border width, style, and color for primary module subheaders. Modules border
    Primary Module Subheader Text Color primary_module_subheader_text_color Controls the text color for primary module subheaders. Modules color
    Module Tab Background Active module_tab_background_active Controls the background color and image for the currently selected module tab. ModuleTabs background
    Module Tab Background module_tab_background Controls the background color and image for module tabs. ModuleTabs background
    Module Tab Border Active module_tab_border_active Controls the border width, style, and color for the currently selected tab in modules. ModuleTabs border
    Module Tab Border module_tab_border Controls the border width, style, and color for tabs in modules. ModuleTabs border
    Module Tab Font module_tab_font Controls the font family, size, and style for module tabs. ModuleTabs font
    Module Tab Text Color Active module_tab_text_color_active Controls the text color for the currently selected module tab. ModuleTabs color
    Module Tab Text Color module_tab_text_color Controls the text color for inactive module tabs. ModuleTabs color
    Module Tab Text Color Hover module_tab_text_color_hover Controls the text color for inactive module tabs when the mouse is over them. ModuleTabs color
    Poll Result Border poll_result_border Controls the border width, style, and color for poll result bars. Polls border
    Poll result percentage background poll_result_percentage_background Controls the background of the percentage number in poll results Polls background
    Poll results vote count text poll_result_vote_count_text Controls the colour of the text displaying the vote count Polls color
    poll_result_color_01 Polls color
    poll_result_color_02 Polls color
    poll_result_color_03 Polls color
    poll_result_color_04 Polls color
    poll_result_color_05 Polls color
    poll_result_color_06 Polls color
    poll_result_color_07 Polls color
    poll_result_color_08 Polls color
    poll_result_color_09 Polls color
    poll_result_color_10 Polls color
    poll_result_color_11 Polls color
    poll_result_color_12 Polls color
    Popup Background popup_background Controls the background color and image for popups. Popups background
    Popup Border popup_border Controls the border width, style, and color for popups. Popups border
    Popup Header Background popup_header_background Controls the background color and image of popup headers. Popups background
    Popup Header Text Color popup_header_text_color Controls the text color of popup headers. Popups color
    Popup Overlay Background popup_overlay_background Controls the background color and image for the overlay behind popups. Popups background
    Activity Stream Avatar Border activity_stream_avatar_border Controls the border width, style, and color for avatars in the activity stream. PostsRepliesAndComments border
    Comment Background comment_background Controls the background color and image for comments. PostsRepliesAndComments background
    Comment Divider Color comment_divider_color Controls the color for the divider between comments. PostsRepliesAndComments color
    Post Border post_border Controls the border width, style, and color for the content area of posts. PostsRepliesAndComments border
    Post Controls Votes Border post_controls_votes_border Controls the border width, style, and color for votes in the post controls area. PostsRepliesAndComments border
    Post Deleted Border post_deleted_border Controls the border width, style, and color for the deleted message that shows for deleted posts. PostsRepliesAndComments border
    Postbit Background postbit_background Controls the background color and image for the user information area of posts. PostsRepliesAndComments background
    postbit_deleted_background PostsRepliesAndComments background
    Postbit Unapproved Background postbit_unapproved_background The background color to show for unapproved posts PostsRepliesAndComments background
    Thread View Avatar Border thread_view_avatar_border Controls the border width, style, and color for avatars in thread view. PostsRepliesAndComments border
    post_controls_divider_color PostsRepliesAndComments color
    post_controls_quote_active_text_color PostsRepliesAndComments color
    post_controls_text_color PostsRepliesAndComments color
    post_rating_color PostsRepliesAndComments color
    post_username_color PostsRepliesAndComments color
    post_user_info_color PostsRepliesAndComments color
    thread_reply_background PostsRepliesAndComments background
    thread_starter_background PostsRepliesAndComments background
    profcustom_navbar_background_active Profiles background
    profcustom_navbar_background Profiles background
    profcustom_navbar_border_active Profiles border
    profcustom_navbar_border Profiles border
    profcustom_navbar_text_color_active Profiles color
    profcustom_navbar_text_color Profiles color
    profcustom_navbar_toolbar_text_color Profiles color
    Profile Navbar Button Background profcustom_navbarbutton_background Profiles background
    Profile Navbar Button Border profcustom_navbarbutton_border Profiles color
    Profile Navbar Button Text Color profcustom_navbarbutton_color Profiles color
    Profile Navbar Secondary Button Background profcustom_navbarbuttonsecondary_background Profiles background
    Profile Navbar Secondary Button Border profcustom_navbarbuttonsecondary_border Profiles color
    Profile Navbar Secondary Button Text Color profcustom_navbarbuttonsecondary_color Profiles color
    Profile Button Primary Background profile_button_primary_background Background for button in profile content area Profiles background
    Profile Secondary Button Background profile_button_secondary_background Background for button in profile content area Profiles background
    Profile Content Background profile_content_background Profiles background
    Profile Content Border Color profile_content_border Profiles color
    Profile Content Link Text Color profile_content_linktext Profiles color
    Profile Content Primary Text Color profile_content_primarytext Profiles color
    Profile Content Secondary Text Color profile_content_secondarytext Profiles color
    Profile section border profile_section_border Profiles border
    User settings tab highlight profile_settings_tab_highlight Controls the border width, style, and color for the tabs in the user settings. Profiles border
    Profile Userpanel Font profile_userpanel_font Controls the font face, size, and style for the profile user panel. Profiles font
    Profile User Panel Text Color profile_userpanel_textcolor Profiles color
    Profile Sidebar Button Background profilesidebar_button_background Profiles background
    Profile Sidebar Button Border Color profilesidebar_button_border Profiles border
    Profile Sidebar Button Text Color profilesidebar_button_text_color FFFFFF Profiles color
    Profile Sidebar Count Text Color profilesidebar_count_text_color Profiles color
    profile_content_divider_border Profiles color
    profile_content_font Profiles font
    profile_section_background Profiles background
    profile_section_font Profiles font
    profile_section_text_color Profiles color
    profile_userpanel_linkcolor Profiles color
    Side Nav Background Active side_nav_background_active Controls the background color and image for the currently selected item in the sidebar navigation area. SidebarNavigation background
    Side Nav Background side_nav_background Controls the background color and image for the sidebar navigation area. SidebarNavigation background
    Side Nav Background Hover side_nav_background_hover Controls the background color and image for the sidebar navigation area when the mouse is over it. SidebarNavigation background
    Side Nav Border side_nav_border Controls the border width, style, and color for the sidebar navigation area. SidebarNavigation border
    Side Nav Item Border Bottom side_nav_item_border_bottom Controls the border width, style, and color for the bottom of each sidebar navigation item. SidebarNavigation border
    Side Nav Item Border Top side_nav_item_border_top Controls the border width, style, and color for the top of each sidebar navigation item. SidebarNavigation border
    Side Nav Text Color Active side_nav_text_color_active Controls the text color for currently selected sidebar navigation items. SidebarNavigation color
    Side Nav Text Color side_nav_text_color Controls the text color for sidebar navigation items. SidebarNavigation color
    Side Nav Text Color Hover side_nav_text_color_hover Controls the text color for sidebar navigation items when the mouse is over them. SidebarNavigation color
    side_nav_avatar_border SidebarNavigation color
    side_nav_number_messages_color SidebarNavigation color
    Inline edit button border inline_edit_button_border Sitebuilder border
    Inline edit field border inline_edit_field_border Sitebuilder border
    inline_edit_module_title_text_color Sitebuilder color
    inline_edit_background Sitebuilder background
    inline_edit_button_disabled_text_color Sitebuilder color
    inline_edit_button_divider_left_color Sitebuilder color
    inline_edit_button_divider_right_color Sitebuilder color
    inline_edit_button_flat_text_color Sitebuilder color
    inline_edit_button_primary_text_color Sitebuilder color
    inline_edit_button_secondary_text_color Sitebuilder color
    inline_edit_folder_active_color Sitebuilder color
    inline_edit_folder_inner_highlight_color Sitebuilder color
    inline_edit_folder_text_color_active_hover Sitebuilder color
    inline_edit_form_text_color Sitebuilder color
    inline_edit_header_body_text_color Sitebuilder color
    inline_edit_header_line_bottom_color Sitebuilder color
    inline_edit_header_line_top_color Sitebuilder color
    inline_edit_popup_comment_line_color Sitebuilder color
    inline_edit_search_bar_background Sitebuilder background
    inline_edit_search_bar_background_active Sitebuilder background
    inline_edit_search_bar_background_hover Sitebuilder background
    inline_edit_search_bar_text_color Sitebuilder color
    inline_edit_search_text_active_color Sitebuilder color
    inline_edit_subheader_text_color Sitebuilder color
    Main Navigation Admin Bar Background main_nav_admin_bar_background Controls the background color and image for the main navigation admin bar. SitebuilderNavigation background
    Main Navigation Admin Bar Text Color main_nav_admin_bar_text_color Controls the text color for the sitebuilder admin navigation bar. SitebuilderNavigation color
    Main Navigation Admin Bar Text Color (Hover) main_nav_admin_bar_text_color_hover Controls the text color for the sitebuilder admin navigation bar when mouse pointer is over them. SitebuilderNavigation color
    Main Navigation Admin Bar Text Color (Disabled) main_nav_admin_bar_text_disabled_color Controls the text color for the sitebuilder admin navigation bar for disabled elements. SitebuilderNavigation color
    Main Nav Button Border main_nav_button_border Controls the border width, style, and color for the buttons in the sitebuilder admin navigation bar. SitebuilderNavigation border
    main_nav_admin_bar_divider_left_color SitebuilderNavigation color
    main_nav_admin_bar_divider_right_color SitebuilderNavigation color
    main_nav_login_error_field_background SitebuilderNavigation background
    main_nav_login_error_text_color SitebuilderNavigation color
    Large Margin Helper spacing_margin_l Sets margin spacing for large margin helper css class. Spacing margin
    Medium Margin Helper spacing_margin_m Sets margin spacing for medium margin helper css class. Spacing margin
    Small Margin Helper spacing_margin_s Sets margin spacing for small margin helper css class. Spacing margin
    Extra Large Margin Helper spacing_margin_xl Sets margin spacing for extra large margin helper css class. Spacing margin
    Extra Small Margin Helper spacing_margin_xs Sets margin spacing for extra small margin helper css class. Spacing margin
    XXL Margin Helper spacing_margin_xxl Sets margin spacing for extra extra large margin helper css class. Spacing margin
    Large Padding Helper spacing_padding_l Sets padding spacing for large padding helper css class. Spacing padding
    Medium Padding Helper spacing_padding_m Sets padding spacing for medium padding helper css class. Spacing padding
    Small Padding Helper spacing_padding_s Sets padding spacing for small padding helper css class. Spacing padding
    Extra Large Padding Helper spacing_padding_xl Sets padding spacing for extra large padding helper css class. Spacing padding
    Extra Small Padding Helper spacing_padding_xs Sets padding spacing for extra small padding helper css class. Spacing padding
    XXL Padding Helper spacing_padding_xxl Sets padding spacing for extra extra large padding helper css class. Spacing padding
    Toolbar Background toolbar_background Controls the background color and image for toolbars. Toolbar background
    Toolbar Border toolbar_border Controls the border width, style, and color for toolbars. Toolbar border
    Toolbar Button Border toolbar_button_border Controls the border width, style, and color for the buttons in toolbars. Toolbar border
    Toolbar Dropdown Background Gradient End toolbar_dropdown_background_gradient_end Controls the gradient end background color in toolbar dropdown menus. Toolbar background
    Toolbar Dropdown Background Gradient Start toolbar_dropdown_background_gradient_start Controls the gradient start background color in toolbar dropdown menus. Toolbar background
    Toolbar Dropdown Border toolbar_dropdown_border Controls the border width, style, and color for the dropdown menus in toolbars. Toolbar border
    Toolbar Dropdown Divider Color toolbar_dropdown_divider_color Controls the divider color in the dropdown menus in toolbars. Toolbar color
    Toolbar Dropdown Text Color Active toolbar_dropdown_text_color_active Controls the text color for text in currently selected menu items in toolbars. Toolbar color
    Toolbar Dropdown Text Color toolbar_dropdown_text_color Controls the text color for the dropdown menus in toolbars. Toolbar color
    Toolbar Form Field Background toolbar_form_field_background Controls the background color and image for the form fields in toolbars. Toolbar background
    Toolbar Form Field Border toolbar_form_field_border Controls the border width, style, and color for the form fields in toolbars. Toolbar border
    Toolbar Form Field Placeholder Text Color toolbar_form_field_placeholder_text_color Controls the text color for the placeholder text in the form fields in toolbars. Toolbar color
    Toolbar Text Color toolbar_text_color Controls the text color for text in toolbars. Toolbar color
    Last edited by Brad Padgett; Wed 29 Oct '14, 1:51am.
    "Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo Emerson
  • Merenguista
    Senior Member
    • Jul 2010
    • 555
    • 5.3.x

    #2
    This table will be very useful ..

    Comment

    • anwar513
      Senior Member
      • Sep 2010
      • 277
      • 5.2.x

      #3
      It table important for me, thank you!

      Comment

      • Brad Padgett
        Senior Member
        • Jul 2014
        • 420
        • 5.1.x

        #4
        Also to add to this, you can edit your "css_additional.css" template any time with this table instead using of the StyleVar editor if you want to change it all at once.

        I don't recommend doing it without creating a child style first as it could change your entire forum. Make sure you use a child style if attempting this.
        Last edited by Brad Padgett; Wed 29 Oct '14, 4:32am.
        "Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo Emerson

        Comment


        • Merenguista
          Merenguista commented
          Editing a comment
          Thank you for the tip ..
      • mgurain
        Senior Member
        • Jul 2003
        • 270
        • 4.2.X

        #5
        I could not find these, which variables are for :
        1. in Forum Home : Forum Name ?
        2. in Forum Home : Widget Thread Title ?
        3. in Thread : Member Name ?
        4. in Thread : Member Info (Title, register date ..)
        5. in Thread : Tools under each post (Edit, Like ..)
        http://www.al-jarodiah.com/vb/
        Arabic Village Social forums

        Comment

        • Wayne Luke
          vBulletin Technical Support Lead
          • Aug 2000
          • 73981

          #6
          Originally posted by mgurain
          I could not find these, which variables are for :
          1. in Forum Home : Forum Name ?
          2. in Forum Home : Widget Thread Title ?
          3. in Thread : Member Name ?
          4. in Thread : Member Info (Title, register date ..)
          5. in Thread : Tools under each post (Edit, Like ..)
          None of these are style variables or even relevant to the look and feel of a site.

          1) You set this when you install the software. Afterwards, you can change it in the Admin CP under Settings -> Options -> Site Name / URL / Contact Details.

          2) You change the titles of modules by editing the module. Each one has its own option for this.

          3) This is a language phrase so you would have to search in Languages and Phrases and update all relevant phrases.

          4) See #3.

          5) See #3
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment

          • mgurain
            Senior Member
            • Jul 2003
            • 270
            • 4.2.X

            #7
            Sorry I did not explain my problem well, I did not mean that, I mean :
            Originally posted by mgurain
            The problem with default Arabic style is the font is small every where !
            How could I change font & size in different parts of the forums ?
            http://www.al-jarodiah.com/vb/
            Arabic Village Social forums

            Comment

            • Wayne Luke
              vBulletin Technical Support Lead
              • Aug 2000
              • 73981

              #8
              Unfortunately, the only way currently is to override the style in the css_additional.css templates. Right-click on the element and get the classes assigned to it via inspect element and then assign CSS to that.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API

              Comment

              • jdj
                Senior Member
                • Jan 2009
                • 824
                • 5.1.x

                #9
                Originally posted by TheXboxCloud
                Big thanks to Wayne Luke for providing them. Now all you vbulletin 5 users have documentation for proper styling until it's added to the site.
                Which is the stylevar that controls the background colour of the area behind an advert when you add a banner to the site?

                Comment

                • Wayne Luke
                  vBulletin Technical Support Lead
                  • Aug 2000
                  • 73981

                  #10
                  Originally posted by jdj

                  Which is the stylevar that controls the background colour of the area behind an advert when you add a banner to the site?

                  Since all modules are placed on the Wrapper, it would be the wrapper_background. That is the white background in the default style here.

                  You can change the background color for an Ad module by targeting the unique CSS ID assigned to all modules in current versions. To get this ID, you have to add the module and they view its generated source code it would look like id="widget_XXX" where XXX is the unique ID.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API

                  Comment


                  • jdj
                    jdj commented
                    Editing a comment
                    Having looked at wrapper_background it's white which is what I want. However the advert I have up has a grey surround so I'm guessing that must be something to do with the module.
                • jdj
                  Senior Member
                  • Jan 2009
                  • 824
                  • 5.1.x

                  #11
                  Originally posted by Wayne Luke
                  You can change the background color for an Ad module by targeting the unique CSS ID assigned to all modules in current versions. To get this ID, you have to add the module and they view its generated source code it would look like id="widget_XXX" where XXX is the unique ID.
                  I think by this you mean view the site with the ad module in place, right-click and view source? When I do this I can locate something called widget_xxx. Or do you mean go into site builder, add the module then click view source?

                  Also when you say targeting the unique CSS where do I do this? The additional.css template? If so, what do I put into it? widget_xxx what?

                  Comment

                  • Wayne Luke
                    vBulletin Technical Support Lead
                    • Aug 2000
                    • 73981

                    #12
                    You need to add the module and save the page before you can view its ID.
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud demonstration site.
                    vBulletin 5 API

                    Comment

                    • jdj
                      Senior Member
                      • Jan 2009
                      • 824
                      • 5.1.x

                      #13
                      Originally posted by Wayne Luke
                      You need to add the module and save the page before you can view its ID.
                      So again, from your previous post you said "You can change the background color for an Ad module by targeting the unique CSS ID assigned to all modules in current versions."

                      Where do you put this code? Additional.css or somewhere else?

                      Comment

                      • Wayne Luke
                        vBulletin Technical Support Lead
                        • Aug 2000
                        • 73981

                        #14
                        You should put all your custom CSS in the css_additional.css template. This will prevent any possible issues from occurring during an upgrade.
                        Translations provided by Google.

                        Wayne Luke
                        The Rabid Badger - a vBulletin Cloud demonstration site.
                        vBulletin 5 API

                        Comment

                        • jdj
                          Senior Member
                          • Jan 2009
                          • 824
                          • 5.1.x

                          #15

                          OK, so you put the code in css_additional.css template. So what do you put into the css_additional.css template to change the background colour? Currently the colour that this ad widget is appearing against is white, but the colour immediately surrounding the advert itself (i.e. what appears to be in the ad widget itself) is grey; that's what I want to change. So the code is below, what code do you have to put into css_additional.css to change this colour from grey to white? And supposing you want it to change the background colour of all ad widgets displayed on your site? Rather than just the single "instance"?

                          <div class="canvas-layout-row no-columns h-clearfix l-row"> <div class="canvas-widget-list section-2 h-clearfix l-col__large-12 l-col__small--full"> <div class="canvas-widget default-widget axd-widget axd-container" data-widget-id="217" data-widget-instance-id="152"> <div class="widget-header h-clearfix"> <div class="module-title h-left"> <h1 class="main-title hide-on-editmode">Ad Widget Forum Page</h1> <span class="admin-only">Ad Widget Forum Page Module</span> </div> <div class="module-buttons"> <span class="admin-only"> <span class="move-icon module-button-item" title="Move module"><span>Move</span></span> <span class="edit-button module-button-item" title="Edit module"><span>Edit</span></span> <span class="close-button module-button-item" title="Remove module"><span>Remove</span></span> </span> <span class="toggle-button module-button-item collapse" title="Collapse" data-toggle-title="Expand"><span class="vb-icon vb-icon-toggle">Collapse</span></span> </div> </div> <div class="widget-content restore axd axd_152">

                          Comment

                          Related Topics

                          Collapse

                          Working...