Footer

XenBase comes with a simple yet flexible footer setup. We allow you to easily customize the look of your footer with numerous properties. This will take a little bit of work to get up and running with how you want it but it's definitely worth it in the end!

All of your edits will go inside your child style

To start customizing the footer head to: Style Properties -> [XB] Footer

First you'll want to check: Enable Advanced Footer if it's not already.

Next you want to determine how many blocks you want to show and the width of each one. In this setup we'll be using 4 blocks, all at 25%.
***note*** to disable a block you simply put a value of 0 without the px/%. Ideally you'll want the remaining block totaling up to 100% or as close as possible to it(33%/33%/33%).
Next onto the blocks, to achieve this setup(not talking about the styling but the setup of the blocks themselves):

Block 1 content:

<h3><i class="fa fa-map-marker"></i> About us</h3> <p>Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat.</p><p>Quisque mi odio, malesuada eu elit ut, euismod rutrumt feugiat.</p>

Block 2 content:

<h3><i class="fa fa-share"></i> Site Functions</h3> <ul class="footerList"> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 1</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 2</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 3</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 4</a></li> </ul>

Block 3 content:

<h3><i class="fa fa-bars"></i> Useful Links</h3> <ul class="footerList"> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 1</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 2</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 3</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 4</a></li> </ul>

Block 4 content:

<h3><i class="fa fa-life-ring"></i> Support the site!</h3> <p>Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. </p><p>Quisque mi odio, malesuada eu elit ut, euismod rutrumt feugiat.</p> <a class="button primary" href="#">Donate now</a>
Another example - EXAMPLE 2 To do a simpler footer version something like this: You'd set Block 1 Width to 75%, and Block 2 Width to 25%, Block 3 Width to 0, Block 4 Width to 0

Block 1 content:

<h3><i class="fa fa-map-marker"></i> About us</h3> <p>Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat. Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat. Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat.</p><p> Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat. Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat. Quisque mi odio, malesuada eu elit ut, euismod rutrumt feugiat.</p>

Block 2 content:

<h3><i class="fa fa-life-ring"></i> Support the site!</h3> <p>Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. </p><p>Quisque mi odio, malesuada eu elit ut, euismod rutrumt feugiat.</p> <a class="button primary" href="#">Donate now</a>
Last example including the Social Icons - EXAMPLE 3 To do a simpler footer with the built in XenBase social icons You'd set Block 1 Width to 50%, and Block 2 Width to 25%, Block 3Width to 25%, Block 4 Width to 0

Block 1 content:

<h3><i class="fa fa-map-marker"></i> About us</h3> <p>Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat. Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat. Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. Maecenas ullamcorper volutpat feugiat.</p>

Block 2 content:

<h3><i class="fa fa-bars"></i> Useful Links</h3> <ul class="footerList"> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 1</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 2</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 3</a></li> <li><a href="#"><i class="fa fa-circle-o"></i> Custom Link 4</a></li> </ul>

Block 3 content:

<h3><i class="fa fa-life-ring"></i> Support the site!</h3> <p>Quisque mi odio, malesuada eu elit ut, euismod rutrum purus. </p><p>Quisque mi odio, malesuada eu elit ut, euismod rutrumt feugiat.</p> <a class="button primary" href="#">Donate now</a>
Finally to add in the social icons you need to do one extra step. We've included templates on each block where you can utilize more XenForo functions than just style properties. Each block is titled: xb_footer_Block1Helper xb_footer_Block2Helper xb_footer_Block3Helper xb_footer_Block4Helper In this case our icons will be going into block 1, so open xb_footer_Block1Helper Simply remove the around the include for the social icons. Finally to shift the icons left if you wanted too you can add this to extra.css:
.footerBlock .xbSocialLinks { text-align: left; }
All of the 4 blocks have helper templates: xb_footer_Block#Helper, where you can extend the blocks even further. If you wanted to use template conditionals to show certain links to users/guests this is where you could put your links instead of in the style property. Each Block also has a hook placed for you so you can place widgets using the Widget Framework! That will be the next tutorial. While the system may seem complicated at first it is truly far more powerful than what we had previously. I hope you enjoy and experiment with the new footer setup.

Check out our other documentation on XenBase features, they can be found in the sidebar!

For further support please start a new thread here. If you want to obtain help via a support ticket just submit a ticket.

Let's work together on your next project

Contact us today to talk about how we can help you