XF 1.x [FA+] Is there away to put a slider in the header section

GazCBG

Registered
Hi,

Is there away to put a slider background iamges in the header section.

So if you look at this site, it would in the dark blue background behind the logo and the Account, Indox and Alerts links.

Is where I want to put a slider background images.
I think I have a slider, but just don't know how to go about doing it.
 

Russ

Pixel Exit Staff
So assuming you're not using our backstretch script for rotating backgrounds you could easily achieve this using that function with a slight modification.

Out of the box we setup backstretch specifically for stretching background images on the pages background. With this easy tweak you can set the rotating images up on any div really.

Open xb_js_body
Find:
Code:
$.backstretch
Replace with:
Code:
$(".extraFooter").backstretch
.extraFooter being the div you want to target, or for your purpose you may need to change it to: #logoBlock or whatever div you want to focus.

Screenshot_3.png



Next you need to configure the images you want to rotate, go to: Style Properties -> [XB] General Setup -> Backstretch Image place this(this is specific for frag zone you'll just need to modify the image path/names

Code:
"styles/fragzone/xenforo/sources/bgtf.jpg", "styles/fragzone/xenforo/sources/bgbf.jpg", "styles/fragzone/xenforo/sources/bgcod.jpg"
Make sure you have the " " around each one, and a , after each one excluding the last, just like I have it above.

Final result, rotating on any div you want :)
Screenshot_2.png


Let me know if I missed something.

EDIT: Frag Zone doesn't use the logoBlock as the logo is in the nav, so I just used the footer as an example :D
 
Last edited:

GazCBG

Registered
Thanks that got it by using #logoBlock.
The only change I would like to see on this, if it not already is make it repsonsive.
 

Russ

Pixel Exit Staff
Thanks that got it by using #logoBlock.
The only change I would like to see on this, if it not already is make it repsonsive.
Backstretch ideally should resize on all resolutions, that being said it does stretch it the best it can to fit on all devices in the area given.
 

Russ

Pixel Exit Staff
Just a heads up, for the 1.5.6 update this template will show out of date for you which you'll need to simply revert and use the property. You can now add a selector by going to the same area with the other backstretch options:

Screenshot_12.png
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.