1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Flexile Footer Boxes

Discussion in 'Add-on Releases [Archive]' started by Anthony Parsons, Dec 13, 2011.

  1. Anthony Parsons

    Anthony Parsons Well-Known Member

    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

    Screen shot 2011-12-13 at 9.17.34 PM.png

    Screen shot 2011-12-13 at 9.42.21 PM.png

    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:

    HTML:
    #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";
    }
     

    Attached Files:

  2. Anthony Parsons

    Anthony Parsons Well-Known Member

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

    Screen shot 2011-12-13 at 10.18.54 PM.png

    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.

    HTML:
    #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 */
    }
     
    Coop1979, dwdmadmac, Alien and 2 others like this.
  3. JVCode

    JVCode Well-Known Member

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

    Anthony Parsons Well-Known Member

    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.
     
    JVCode likes this.

Share This Page