The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Multiple background selector

View previous topic View next topic Go down

In progress Multiple background selector

Post by EEYEN3 on 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?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 on 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?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 on 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?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 on 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?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 on 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.

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 on 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 thishttp://www.xwa-universe.com/f66-xwa-head-2-head how do I enter it into the code?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

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

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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

In progress Re: Multiple background selector

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Multiple background selector

Post by EEYEN3 on 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?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

View previous topic View next topic Back to top


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