XF 2.0 Rotating background image in 2.0

Bonsai Coder · Jan 20, 2018

One of my customizations in 1.x was to have a rotating background image on my site - every time you would refresh the page you would have a different background image.

This was accomplished by editing the PAGE_CONTAINER template and editing/adding the following code:

Code:

</head>

<xen:set var="$background.1">path/to/background1.gif</xen:set>
<xen:set var="$background.2">path/to/background2.gif</xen:set>
<xen:set var="$background.3">path/to/background3.gif</xen:set>

<body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'} style="background-image: url('{xen:raw '$background.{xen:calc '({$serverTime} % 3) + 1'}'}');">
<xen:hook name="body">

(In this example it rotates between three images - but you can edit it for any number) Because of the changes in the 2.0 PAGE_CONTAINER template, I honestly don't know how to make this code work any longer. Any help?

Bonsai Coder · Jan 21, 2018

@Alien or @Bryan do you have any thoughts on this? I understand the code for randomizing the background selection... but I don't know where/how the current XenForo2.0 handles the background image in the Page_Container

Bonsai Coder · Jan 25, 2018

I'm having trouble with this code... I think it should work, but it doesn't.

HTML:

<xf:set var="$background.1">styles/default/bn2custom/background1_bn2.jpg</xf:set>
<xf:set var="$background.2">styles/default/bn2custom/background2_bn2.jpg</xf:set>
<xf:set var="$background.3">styles/default/bn2custom/background3_bn2.jpg</xf:set>

<body style="background-image: url('{xf:raw '$background.{xf:calc '({$serverTime} % 3) + 1'}'}');">

DL6 · Jan 27, 2018

The equivalent for XenForo 2 is
Find:

HTML:

<div class="p-pageWrapper" id="top">

replace:

HTML:

<xf:set var="$background.1">styles/default/bn2custom/background1_bn2.jpg</xf:set>
<xf:set var="$background.2">styles/default/bn2custom/background2_bn2.jpg</xf:set>
<xf:set var="$background.3">styles/default/bn2custom/background3_bn2.jpg</xf:set>

<div class="p-pageWrapper" id="top" style="background-image: url('{$background.{{ ($xf.time % 3) + 1 }}|raw}');">

Bonsai Coder · Jan 27, 2018

DL6 said:
The equivalent for XenForo 2 is

Thank you so much! I was looking at p-pageWrapper but couldn't quite pull it all together. Your example helps on several other things I am working on as well. I really appreciate your time!

Bonsai Coder · Jan 28, 2018

For the benefit of any members here who want to try this code make sure to add a "/" as the lead element of the path to your image file location for example:

HTML:

<xf:set var="$background.1">/styles/default/bn2custom/background1_bn2.jpg</xf:set>

XF 2.0 Rotating background image in 2.0

Bonsai Coder

Active member

Bonsai Coder

Active member

Bonsai Coder

Active member

DL6

Well-known member

Bonsai Coder

Active member

Bonsai Coder

Active member

Similar threads

We value your privacy