Multiple background selector

Is there a way to have multiple backgrounds in your CSS and allow for each user to pick their own?

Hi @EEYEN3,

Yes, it's possible with JavaScript. You didn't provide your forum version, but I can give you an example that is applicable to all versions. Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Background selector
Placement : In all the pages

Code:

$(function() {
  var backgrounds = [
    'red',
    'green',
    'blue',
    'cyan',
    'yellow',
    'magenta',
    'white',
    'black'
  ], i = 0, j = backgrounds.length, c = my_getcookie('fa_background'), s = document.createElement('SELECT'), o = '<option value="">Select a background</option>';
 
  for (; i<j; i++) o += '<option ' + ( c == 'bg-' + backgrounds[i] ? 'selected="true"' : '' ) + ' value="bg-' + backgrounds[i] + '">' + backgrounds[i] + '</option>';
  s.innerHTML = o;
  s.onchange = function() {
    /bg-.*/.test(document.body.className) &&  (document.body.className = document.body.className.replace(/bg-.*/,''));
    document.body.className += ' ' + this.value;
    my_setcookie('fa_background', this.value);
  };
 
  document.body.appendChild(s);
  document.body.className += ' ' + s.value;
});

At the top you'll see an array with color names. These are just the names of the background types. You can change these to whatever you want, and add as much as you want, just make sure multiple names are separated by a comma.

Then to style the background, we can use body.bg- + your background name. Here's some CSS for the example :

Code:

body.bg-red { background:red }
body.bg-green { background:green }
body.bg-blue { background:blue }
body.bg-cyan { background:cyan }
body.bg-yellow { background:yellow }
body.bg-magenta { background:magenta }
body.bg-white { background:white }
body.bg-black { background:black }

Note, the script will add a select element to the very bottom of the body.

And if I want to make the graphics, where in the code would I put the URL in the code?

Also

Would it be possible to attach specific backgrounds based on what part of the forum the user is browsing?

You define the background style via CSS, the selector script is only for applying the classname to the body tag. So, if I wanted to display an image for the red background, I would change the value to this :

Code:

body.bg-red { background:url(images/redbg.png) repeat red }

In answer to your other question, yes it's possible by checking either the location object or an anchor element on the page. For example ;

Code:

if (/\/f1-mycat/.test(window.location.pathname)) document.body.className += ' bg-locale-mycat';

and css :

Code:

body.bg-locale-mycat { background:url(images/mycat.png) repeat #FFF !important }
/* use the !important flag to override styles, namely, the bg selector backgrounds */

Thanks so much. One last thing... How do I set something as the default choice in the background selector?

EDIT: Also, would it be possible for the background selector to appear centered at the bottom of the page?

By default I added a cookie for the backgrounds. So the one you have selected will remain selected until you change it or the cookie is deleted. I figured the default background would be the base body tag without any classes. For example :

Code:

/* default background */
body { background:gray }

If you really want an option for it though, let me know.


As for centering it, find s.innerHTML = o; and add this line after it :

Code:

s.id = 'backgroundSelector';

Then you can style the field with CSS.

Code:

#backgroundSelector {
  display:block;
  margin:0 auto;
}

My users are all complaining they have to set it every time they re-open their web browser. Those that set cookies still have to set it every so often as well. Is there a way to integrate their option into their user preferences?

...

And as far as the default feature goes, I'd really like it to be an image as well.

Do these members clear their browser history when they close their browsers ? If so, there's the reason why they have to reselect it every time they open the browser.

It's possible to have it as a profile field, but you then have to use AJAX to check the profile field which can be delayed and send unneeded requests when we need to get the value.


If you want it to be an image, then add url() to the value.

Code:

body { background:url(IMAGE) }

Ange Tuteur wrote:You define the background style via CSS, the selector script is only for applying the classname to the body tag. So, if I wanted to display an image for the red background, I would change the value to this :

Code:

body.bg-red { background:url(images/redbg.png) repeat red }

In answer to your other question, yes it's possible by checking either the location object or an anchor element on the page. For example ;

Code:

if (/\/f1-mycat/.test(window.location.pathname)) document.body.className += ' bg-locale-mycat';

and css :

Code:

body.bg-locale-mycat { background:url(images/mycat.png) repeat #FFF !important }
/* use the !important flag to override styles, namely, the bg selector backgrounds */

I'm struggling to make this work. If my URL is this http://www.xwa-universe.com/f66-xwa-head-2-head how do I enter it into the code?

Change the JS to this :

Code:

if (/\/f66-xwa-head-2-head/.test(window.location.pathname)) document.body.className += ' bg-f66';

and the CSS would be this :

Code:

body.bg-f66 { background:#FF0 }

I did as you said and it's not working for me.

My bad, I forgot to wrap the code in a document ready function. Try now :

Code:

$(function() {
  if (/\/f66-xwa-head-2-head/.test(window.location.pathname)) document.body.className += ' bg-f66';
});

It's only appearing for me when I have no background selected. Is there a way to have the section background over-ride the pre-selected one?