Announcement

Collapse
No announcement yet.

navbar Stylevars

Collapse
X
Collapse
  •  

  • navbar Stylevars

    The navbar template provides the basis of your primary navigation throughout your vBulletin community. From here, your users will be able to access all areas of your community. This article discusses the stylevars used to customize this template.
    navbar tabs search box subnav breadcrumb global ad notices
    navbar
    Click on the element you need more information on.

    Navbar Tabs

    The Navbar Tabs provide access to the major sections of your site. The default tabs are Home (cms), Forum, Blog and What's New (new posts). From these tabs you can access all of your content.

    navbar_tab_background Sets the background for all tabs in the navbar. Allows you to set the color, background image, image position and image repeat properties.
    navbar_tab_selected_background Allows you to highlight the selected tab using the tab background. This also controls the background of all tabs as you mouse over them. The selected tab attribute is set within the PHP code and should reflect the section you are in. Allows you to set the color, background image, image position and image repeat properties.
    navbar_tab_color Sets the color of the text links in each tab. This should be a contrasting color to both the navbar_tab_background and navbar_tab_selected_background stylevars.
    navbar_tab_linkhover_color Sets the color of text when the mouse is hovering over the link. This should be a contrasting color to both the navbar_tab_background and navbar_tab_selected_background stylevars. It can be the same color as navbar_tab_color if you wish.
    navbar_tab_size Allows you to set the height and width of each tab. These should be large enough to show all your text but small enough to fit within the width of your page. Default value is pixels.
    navbar_tab_font Sets the font of the navbar tabs. You can control the font families, size, weight, style and variant.
    navbar_tab_border Used to define any borders around your tabs. You can choose whether or not to have borders on each side as well as their color and width.
    navbar_tab_bevel Allows you to specify a bevel highlight around each tab. This makes them appear more like a button. You can control the color and width of the bevel.
    navbar_tab_selected_top_width Provides an additional highlight on top of the selected tab. This stylevar allows you to control the height of that highlight.

    Subnav

    The subnav provides acces to sub-sections within your site. The links here vary depending on the section of the site that you are in. These links provide quick access to different features for that section of the site.

    navbar_background Sets the background color and image for the entire navigation portion of the navbar. In the navbar_tab area, this is overwritten by navbar_tab_background.
    navbar_color Sets the color of text within the subnav. This is overwritten by navbar_link_color but they can contain the same value. This should contrast with the color value set in navbar_background.
    navbar_link_color Sets the color value of links within the subnav area. This overwrites the value set in navbar_color. It should be a contrasting color to navbar_background.
    navbar_linkhover_color Sets the color of links shown when the cursor is hovering over them. This should be a contrasting color to navbar_background. It can be the same color as navbar_color or navbar_link_color.
    navbar_font Sets the size and other options for the text used within the navbar area.
    navbar_border Allows you to define a border around the entire navbar area. By default, this is blank.
    navbar_margin Allows you to set the margins of your navbar including the tabs. You can move it up or to the right using negative margins.
    navbar_padding Allows you to specify padding or empty space between the navbar edges and the content within.
    navbar_popup_link_background Specifies the background of navbar elements that are popup menus. To configure the actual menus see "PopupMenu Stylevars"

    Searchbox

    The searchbox is a global search form that allows you to search all content that is searchable. This is a global form and appears on every page. Most of the attributes of the search box are handled by the navbar_tab stylevars.

    navbarsearch_borderWidth Sets the width of the border around the search input.
    navbarsearch_input_borderColor Sets the color of the border around the search input.
    navbarsearch_padding Sets the padding or blank space around the search input.

    Breadcrumb

    The breadcrumb provides both directions and signposts on to your current location within the community. It allows a secondary form of navigation similar to the back button on your browser. The breadcrumb uses common stylevars for its link colors.

    lightweightbox_border Sets the color of the border around breadcrumb links when the cursor hovers over them. Only the color attribute is used. Changing this may affect other aspects of your community in unforeseen ways. You will need to test your changes.
    lightweightbox_background Sets the color of the background behind breadcrumb links when the cursor hovers over them. Only the color attribute is used. Changing this may affect other aspects of your community in unforeseen ways. You will need to test your changes.
    border_radius Changes the radius of the curves on the background shown when the cursor is hovering over a breadcrumb link. This stylevar controls all rounded corners in the system. Change with caution.
    link_color Sets the link color of your breadcrumb links. This is a global color and sets the link color of all links throughout the system unless they have their own stylevar to overwrite them. You can assign your own custom color by assigning CSS to these elements within the additional.css template.
    Example:
    .breadcrumb .navbit a {color:red;}
    body_color Sets the color non-link text within your breadcrumb. This is a global color and sets the color of all text throughout the system unless they have their own stylevar to overwrite them. You can assign your own custom color by assigning CSS to these elements within the additional.css template.
    Example:
    .breadcrumb .navbit {color:red;}

    Notices

    Notices are announcements or other pieces of information that you want your users to see. They have a lot of configuration options and you can show multiple notices at one time.

    notices_background Allows you to set the color and image for the background of your notices. In addition, you can set the background image repeat and location values.
    notices_shadow_color Allows you to set the color of the shadow shown under the notices. Enter the color code or name here. Use transparent to remove the shadow. If no color is specified, the system will use the default shadow color defined in the stylevar shadow_color.

    Advertising Templates

    The navbar template contains one advertising template. This is set within the Advertising Manager in your AdminCP. The representation in the image above is a simple example. To learn more about advertising in vBulletin please see: <<<link here>>>.

    Last edited by Wayne Luke; Fri 14th Mar '14, 12:21pm.
      Posting comments is disabled.

    About the Author

    Collapse

    Wayne Luke A curious juxtaposition of nature, technology and sustainability. Find out more about Wayne Luke

    Article Tags

    Collapse

    advanced (5) affiliate (1) album (1) android (2) api (29) array (17) beginner (17) blog (4) bloginfo (1) calendar (2) cms (2) custom profile fields (1) forum (3) forums (4) Intermediate (7) iphone (3) mapi (30) methods (10) mobile (34) security (2) style (2) threads (4) tls (1) vb5howto (5) vBulletin (5)

    Latest Articles

    Collapse

    • doc Stylevars
      by Wayne Luke
      The doc_ stylevars allow you to set up the basic format of your vBulletin style and determine how the basic page is set up in the browser. These stylevars are located in the Common stylevar group. ...
      Wed 17th Aug '11, 2:09pm
    • footer Stylevars
      by Wayne Luke
      <style> #stylevar_ref { font-family: sans-serif; } #stylevar_ref p { margin-bottom: 12px; } #stylevar_ref a { color: #417394; } #stylevar_ref
      Wed 17th Aug '11, 12:30pm
    • imagepath Stylevars
      by Wayne Luke
      These stylevars tell the vBulletin system where to find the images it needs. In the default style these are located in the images directory but you can point them to custom directories for your own styles. Any image not found will return an error to your browser....
      Wed 17th Aug '11, 12:18pm
    • navbar Stylevars
      by Wayne Luke
      The navbar template provides the basis of your primary navigation throughout your vBulletin community. From here, your users will be able to access all areas of your community. This article discusses the stylevars used to customize this template. ...
      Wed 17th Aug '11, 9:54am
    • header Stylevars
      by Wayne Luke
      The header appears at the top of most pages within your vBulletin community. We will outline the stylevars that affect the header template and the items it contains. You will learn how to change your logo, the attributes of the toplink controls in the upper right corner and the basics of the header template. ...
      Wed 17th Aug '11, 9:48am
    • Stylevar Types
      by Wayne Luke
      The following lists show you the type of stylevars and the inputs available to them. ...
      Fri 17th Jun '11, 1:48pm
    Working...
    X