The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Multiple background selector

2 posters

Go down

In progress Multiple background selector

Post by EEYEN3 April 20th 2015, 2:53 pm

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

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur April 20th 2015, 6:27 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 April 21st 2015, 10:56 am

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

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 April 21st 2015, 2:37 pm

Also

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

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur April 21st 2015, 5:52 pm

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 */
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 April 21st 2015, 10:58 pm

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?
avatar
EEYEN3
Forumember

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur April 22nd 2015, 5:48 pm

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. Wink


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;
}

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 April 23rd 2015, 11:14 am

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.
avatar
EEYEN3
Forumember

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur April 23rd 2015, 6:01 pm

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. Wink
Code:
body { background:url(IMAGE) }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 April 29th 2015, 8:06 am

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?
avatar
EEYEN3
Forumember

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur April 29th 2015, 8:25 am

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 }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 April 29th 2015, 2:56 pm

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

Posts : 83
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur April 29th 2015, 10:35 pm

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';
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 May 13th 2015, 10:29 pm

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?
avatar
EEYEN3
Forumember

Posts : 83
Reputation : 1
Language : English

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum