User Can Choose Background Image

[smartkidbk5]

Well I am trying to make it where a user can choose their own background image.
I have a profile field set up where the user can enter a link to the image.

Then in the vbulletin.css file, instead of stylevar, I just did this:

html {
	background:rgb(0, 0, 0) url({vb:raw post.field17}) no-repeat  fixed center top;
}

But for some reason it isnt working. Is the variable wrong? Or is there another way to do this?

Thanks.

[smartkidbk5]

Anyone know?

[AliMadkour]

{vb:raw post.field17}
it should be
{vb:raw bbuserinfo.field17}

nice Idea hope its work!

[smartkidbk5]

Originally Posted by AliMadkour

{vb:raw post.field17}
it should be
{vb:raw bbuserinfo.field17}

nice Idea hope its work!

Thanks, but it still doesnt work. When I look at the page source, the css appears with nothing in the url box:
This is in the css template:

background:rgb(0, 0, 0) url({vb:raw bbuserinfo.field17}) no-repeat  fixed center top;

This is what appears in page source:

background:rgb(0, 0, 0) url() no-repeat  fixed center top;

[DaRK mAN306]

Hello there smartkidbk5,

Well, I don't think that it's possible to add template variables into the CSS templates except for the "{vb: stylevar <stylevar name>}" .!

To solve that problem, we're going to move the "html" CSS code from "vbulletin.css" to "headinclude" if it's OK with you !!

In order to do that you can follow these step-by-step instructions:

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

   html {
       background:{vb:stylevar doc_background};
   }

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

   <style type="text/css">
   <!--
   html {
       background:rgb(0, 0, 0) url({vb:raw bbuserinfo.fieldX}) no-repeat  fixed center top;
   }
   -->
   </style>

   Don't forget to change the text in RED(X) to your field ID which is 17 as you posted .!
7. "Save" the template and go check out your custom BG background .!

That should do the trick .!
BTW, I've already tested the method and it works like CHARM !!

[smartkidbk5]

Thank you so much Dark man! It worked perfectly.

[JohnMcClane]

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

Thank you

John

[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 .!