Announcement

Collapse
No announcement yet.

header Stylevars

Collapse
X
Collapse
  •  

  • header Stylevars

    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.
    titleimage toplinks global ad global ad
    header
    Click on the element you need more information on.

    Header Stylevars

    These stylevars control the general look and feel of your header including fonts, background colors and images and how links are formatted.

    header_font This stylevar controls the look of the font used within the header.
    header_color This stylevar controls the color of text shown within the header. It should be a contrasting color to the header_background color. This can be overwritten by the toplinks_text stylevar for the top-right controls.
    header_background This stylevar controls the color and image backgrounds used in the header area of your vBulletin community. You can also control the repeating value of the background or position it as needed.
    header_border This stylevar allows you to add a border around your header if you wish.
    header_link_color This stylevar specifies the color of links within your header. This can be overwritten by the toplinks_link_color stylevar for the top-right controls.
    header_linkhover_color This stylevar specifies the color of links within your header when the mouse is hovering over them. This can be overwritten by the toplink_linkhover_color stylevar for the top-right controls.
    header_padding Sets the padding or space between the edges of the header and the content within it.
    bodyheader_margin Note: This stylevar doesn't actually affect the header. It is being included for completeness.
    This stylevar controls the margins of the .above_body class. This is a container class that holds the header and navbar. You can use this stylevar to change the margins around your header and navbar. Adjusting the left and right values would make them wider or more narrow.

    Logo Stylevar

    Allows you to control the logo image shown on every page within your vBulletin community.

    titleimage This is your logo and will show on every page by default. To change this, upload your custom image to your vBulletin images directory and enter the path to the image here. Your header will grow in size to accomodate the size of your logo image. With larger logos, some other header elements may appear over the logo.
    Example: ./image/logo.png - This states your logo is named logo.png and is located in the /images directory.

    Toplink Stylvars

    The toplinks are the controls in the top right corner of your header. These allow the user to access his account, notifications and Facebook Connect. They also provide tools for login and registration on every page.

    toplinks_background This stylevar controls the backround of the controls in the top right corner of the header. This should be a contrasting color to the one specified in toplinks_text
    toplinks_text This stylevar controls the color of text within the toplinks controls shown in the top right corner of the header. It should be a contrasting color to toplinks_background.
    toplinks_link_color This controls the color of links (<a>....</a> tags) within the toplinks controls shown in the top right corner of the header.
    toplinks_linkhover_color This controls the color of links (<a>....</a> tags) when they are moused over. This only affects the toplinks controls shown in the top right corner of the header.
    toplinks_form_input This stylevar controls the color of text input into the login form fields shown in the header. This should be a contrasting color to the value entered into toplinks_input_login_backgroundColor.
    toplinks_form_input_defaultValue This stylevar controls the color of default text shown in the login form fields shown in the header. E.g: username and password. This should be a contrasting color to the value entered into toplinks_input_login_backgroundColor.
    toplinks_input_login_backgroundColor This stylevar controls the background color of the input elements of the login form shown in the top right corner of the header. This should be a contrasting color to the value entered into both toplinks_form_input and toplinks_form_input_defaultValue.
    navbar_background_notify Used to highlight the Notifications link in the toplinks control area. This is used when the user has notifications that you want to draw to their attention.

    Advertising Templates

    The header template contains two advertising templates. These are set within the Advertising Manager in your AdminCP. The representations in the image above are simple examples.

    Last edited by Wayne Luke; Fri 14th Mar '14, 12:23pm.

    • malmazan
      #1
      malmazan commented
      Editing a comment
      You forgot the link to the docoment on the ads

    • Anders P
      #2
      Anders P commented
      Editing a comment
      It would be nice if these descriptions could be entered in the admin CP as the description phrase of these styelvars.

    • Crazy8sNYK
      #3
      Crazy8sNYK commented
      Editing a comment
      How do you change the colour of the Post New Thread in the main forum?
    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) android (2) api (29) array (17) attachment options (1) beginner (17) blog (4) calendar (2) center (1) cms (2) forum (3) forums (4) Intermediate (7) iphone (3) mapi (30) methods (10) mobile (34) post (1) security (2) ssl (1) style (2) threads (4) tutorial (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