• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Adding a option account preferences


on our website we have a background that is changing within a certain time frame (15 sec). Some of our members want to have a static background ,i want to create a yes/no option to enable or disable the background change.

do i need to make a child template with only a fixed background? or is it possible to add it as a option in development mode?

Background change is done with CSS


XenForo moderator
Staff member
Either do it as a separate style or create a custom user field checkbox, which will activate/deactivate it (depending on how it has been implemented).

I would probably just go with the two styles option.
ok i have created a checkbox and changed the code part of the background cycle (see below)

when changed it disables my right mouse button, and stops the background change to start even when the option is set to true..
when i remove the <xen:if= then it is working normal..


<xen:if is="{$user.customFields.DynamicBG.true} == 'on' ">

<!-- Background Cycler--!>
<div id="background_cycler" style="display: block;"><script type="text/javascript">
$('#background_cycler').hide();// hide the background while the images load, ready to fade in later
<div class="" style="display: block; z-index: 1; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-3.jpg);"></div> <!-- Dragon Age III --!>
<div style="z-index: 1; display: block; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-4.jpg);" class=""></div> <!-- The Witcher 3 --!>
<div style="z-index: 1; display: block; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-5.jpg);" class=""></div> <!-- CoD - AW --!>
<div style="z-index: 3; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-2.jpg)" ;="" class="active"></div> <!-- Mix (Eerst Background) --!>
<div style="z-index: 1; display:block; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-6.jpg)"></div> <!-- Battlefield 4 --!>
<div style="z-index: 1; display:block; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-7.jpg)"></div> <!-- Hardline --!>
<div style="z-index: 1; display:block; background-image: url(https://inthegame.nl/forums/styles/default/xenforo/backgrounds/background-cycler/wall-8.jpg)"></div> <!-- World of Warcraft --!>
<script type="text/javascript">
function cycleImages(){
      var $active = $('#background_cycler .active');
      var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler div:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(3000,function(){//fade out the top image
      $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one

          // run every 20s
          setInterval('cycleImages()', 15000);
<!-- Einde background cycler divs --!>


fixed it.. i selected the wrong sort of custom field.
Last edited: