Flexile Footer Boxes

[Anthony Parsons]

This is a simple 3 box footer layout for the flexile theme.

It should not be affected by version history, providing your version has the footer hook. Otherwise, it is custom coded to run independently, unless Flexile change their colour combinations.

Problems?

Due to the variety of ways the Flexile theme can be installed, there are inherit issues due to having both light and dark themes, of which the dark can run independently or inherited under the light theme.

As a result, I have made this to suit the light theme on install, yet provided the CSS below for you to overwrite the specific template under the dark version, so it will then inherit through any other dark versions you have installed.

Version History

1.0.0 - 13 Dec 2011​

​

Features

• Configurable style properties panel for easy input and text box manipulation.
• Covers both light and dark versions.

Screenshots





Installation

Upload the /library/ folder, overwriting your current library folder.
Install addon .xml file
Configure from style properties

Installation Dark Theme

As above.
Under your top level dark theme (if multiple colours installed), find template: footer_flexile.css and overwrite its entire contents with the below CSS:

#flexileFooter
{
background-color: @pageBackground;
padding: 20px 0;
}
#flexileFooter a, #flexileFooter a:visited
{
display: inline;
padding: 0;
}
#content
{
padding: 30px 0 10px 0 !important;
}
.box1
{
float: left;
margin: 0;
padding: 0;
width: 32%;
}
.box2
{
margin: 0 auto;
padding: 0;
width: 32%;
}
.box3
{
float: right;
margin: 0;
padding: 0;
width: 32%;
}
.box
{
border: 1px solid #0f0f0f;
border-radius: 6px;
-moz-box-shadow: 0 0 12px #0f0f0f;
-webkit-box-shadow: 0 0 12px #0f0f0f;
box-shadow: 0 0 12px #0f0f0f;
}
.box h3
{
font: 14px Georgia, "Times New Roman", serif;
color: #777;
background: #161616 url('styles/flexile/xenforo/gradients/navigation-tab-dark.png') repeat-x top;
padding: 10px 15px;
border-bottom: 1px solid #0f0f0f;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.ffContent
{
@property "ffContent";
padding: 15px;
@property "/ffContent";
}

 

[Anthony Parsons]

For those using the light theme, a slightly different approach look is:



You will need to do a little styling with link color, etc, depending on what colour is being used, though this just shifts the boxes away from the forum content into more isolated footer content.

Overwrite the footer_flexile.css with the following...

You will also need to upload this image: styles/flexile/xenforo/gradients/navigation-tab-dark.png from the dark flexile to the normal flexile, for it to be used. If you don't, it will look awful.

#flexileFooter
{
    padding: 20px 0;
    border-top: 5px solid #6CB2E4; /* Shifts default Flexile footer border */
}
    #flexileFooter a, #flexileFooter a:visited
    {
        display: inline;
        padding: 0;
    }
    .box1
    {
        float: left;
        margin: 0;
        padding: 0;
        width: 32%;
    }
    .box2
    {
        margin: 0 auto;
        padding: 0;
        width: 32%;
    }
    .box3
    {
        float: right;
        margin: 0;
        padding: 0;
        width: 32%;
    }
    .box
    {
        border: 1px solid #0f0f0f;
        border-radius: 6px;
        -moz-box-shadow: 0 0 12px #0f0f0f;
        -webkit-box-shadow: 0 0 12px #0f0f0f;
        box-shadow: 0 0 12px #0f0f0f;
        background-color: #373737;
    }
    .box h3
    {
        font: 14px Georgia, "Times New Roman", serif;
        color: #d6d6d6;
        background: #282828 url('styles/flexile/xenforo/gradients/navigation-tab-dark.png') repeat-x top;
        padding: 10px 15px;
        border-bottom: 1px solid #0f0f0f;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
    }
        .ffContent
        {
            @property "ffContent";
            padding: 15px;
            @property "/ffContent";
        }
.footer
{
    border-top: none !important; /* Shifts default Flexile footer border */
}

 

[JVCode]

Owh, does this only work with the flexile theme? I'd love to have this mod working for the Aurora theme.

 

[Anthony Parsons]

I'm not sure how custom the Aurora theme is... but there is a default XF one of this, that uses complete default XF style properties: http://xenforo.com/community/threads/default-xf-footer-additional-boxes.23296/

Basically, if Aurora is fully customised through default XF style properties, then it may work.

Flexile is not, thus Flexile has a lot of custom coding and non-use of the default XF style properties.