[DaRK mAN306]

Originally Posted by JohnMcClane

Could anyone help me have this change the header_background rather than the background?

Thank you

John

Hi John,

In order for you to make the header_background change rather than the background you should follow these step-by-step instructions:

• First: Creating the Profile field:

1. First of all, sign into your Admin CP ..
2. Then, go to "User Profile Fields >> Add New User Profile Field" ..
3. After that, choose "Single-Selection Menu" option from the "Profile Field Type" drop-down menu and click "Continue" ..
4. Next, take a look at this (Screenshot) and edit the configuration to suit your needs (You can change the title,description, options and the display page) ..
5. Finally, don't forget to save the field number (e.g 17) ..

** P.S. If you changed the "options" field, then you'll need to change the code in (Point 7 in the second section) ..
** P.S.2. Each option should be in a separate line, the screenshot shows (Background_1 & 2 & 9 &10) in the same line just to reduce it's size .!

• Second: Editing the style:

1. First, go to "Styles & Templates >> Style Manager" ..
2. After that, choose "Edit Templates" option from your defined vB Style drop-down menu ..
3. Then, Expand the template groups and look for "vbulletin-chrome.css" template and edit it ..
4. Once you enter the template, look for:

   .above_body {
       background:{vb:stylevar header_background};
       _background-image: none;
       margin: {vb:stylevar header_padding};
       width: 100%;
       -moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
       -moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
       -webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
       -webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
   }

   Then delete it from the template and don't forget to "save" it .!
5. After doing that, go to "headinclude" template and add this code in the end of it:

   <style type="text/css">
   <!--
   .above_body {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
       _background-image: none;
       margin: {vb:stylevar header_padding};
       width: 100%;
       -moz-border-radius-bottom{vb:stylevar left}:{vb:stylevar border_radius};
       -moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
       -webkit-border-bottom-{vb:stylevar left}-radius:{vb:stylevar border_radius};
       -webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
   }
   .bg_default {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_1 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_2 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_3 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_4 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_5 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_6 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_7 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_8 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_9 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   .bg_10 {
           background: #2f4456 url(images/gradients/gradient-grey-down.png) repeat-x;
   }
   -->
   </style>

   Make sure that you change the text in RED to the color code you want to use AND the text in BLUE to the image URL .!
6. "Save" the template ..
7. After that, go to "header" template. look for:

   <div class="above_body">

   Replace it with:

   <div class="above_body <vb:if condition="$bbuserinfo['fieldX'] == Default_BG">bg_default</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_1">bg_1</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_2">bg_2</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_3">bg_3</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_4">bg_4</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_5">bg_5</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_6">bg_6</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_7">bg_7</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_8">bg_8</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_9">bg_9</vb:if><vb:if condition="$bbuserinfo['fieldX'] == Background_10">bg_10</vb:if>">

   Make sure that you change the text in RED to your field ID AND if you changed the field options (from point 4 in the first section) then make sure that you change the text in BLUE to the options you entered .!
8. "Save" the template and go check out your header custom BG .!

That should work for you .!
TESTED IN FF3 & IE8 !!

P.S. If you feel that this is so complicated, then you can provide me with the BGs you want and i'll be glad to help you. but unfortunately not before Thursday .!