Blatchy

Customer
How can I add your stylized forum stats to the footer and appear on every page?

Ideally I would like to disable all the footer blocks (or stretch one 100%) and stretch it across the entire footer.
 

Russ

Pixel Exit Staff
The easiest approach I can think of at the moment:

1.) Disable Botl stats: Style properties - > Bolt properties ->
2.) Copy this into the template xb_footer_block1
Code:
<div class="custom-stats">
    <xf:widget key="forum_overview_forum_statistics" />
</div>

3.) Set footer block 1 width to 100% and all others to 0px: Style properties -> footer
4.) Set block 1 content to use template: xb_footer_block1

5.) Add this to your extra.less template:
Code:
.custom-stats
{
    [data-widget-key="forum_overview_forum_statistics"]
    {
        .block-container
        {
            background: none;
            border-width: 0;
            box-shadow: none;
            .block-minorHeader
            {
                padding: 0;
                background: none;
                border-width: 0;
                box-shadow: none;
                font-size: @xf-fontSizeLargest;
                @media (max-width: @xf-responsiveMedium) { padding-left: @xf-pageEdgeSpacer; }
            }
            .block-body
            {
                display: flex;
                flex-wrap: wrap;
                margin: -5px;
                @media (max-width: @xf-responsiveMedium)
                {
                    margin: 0;
                }
                padding-right: 0;
                padding-left: 0;

            }
            .pairs.pairs--justified
            {
                flex: 1 1 45%;
                background-color: @xf-contentBg;
                border-radius: @xf-borderRadiusLarge;
                padding: @xf-paddingLarge;
                display: flex;
                margin: 5px;
                flex-direction: column;
                position: relative;
                justify-content: center;
                @media (max-width: @xf-responsiveMedium) { margin: 5px 0; flex: 1 1 100%; }
                dt
                {
                    order: 2;
                    font-size: @xf-fontSizeLarge;
                    float: none;
                    text-align: left;
                    color: @xf-textColor;
                    font-weight: @xf-fontWeightHeavy;
                    &:after { display: none; }
                }
                dd
                {
                    order: 1;
                    font-size: 40px;
                    color: @xf-paletteAccent2;
                    float: none;
                    text-align: left;
                    padding-right: 45px;
                    font-weight: @xf-fontWeightHeavy;
                    @media (max-width: @xf-responsiveWide) { font-size: 20px; }
                }
                &:after
                {
                    .m-faBase();
                    .m-faContent("\f850");
                    vertical-align: middle;
                    position: absolute;
                    right: 10px;
                    font-size: 40px;
                    transform: rotate(0deg);
                    opacity: 0.4;
                }
                &:nth-of-type(2):after
                {
                    .m-faContent("\f040");
                }
                &:nth-of-type(3):after
                {
                    .m-faContent("\f0c0");
                }
                &:nth-of-type(4)
                {
                    dd
                    {
                        font-size: 34px;
                        @media (max-width: @xf-responsiveWide) { font-size: 20px; }
                        @media (max-width: @xf-responsiveNarrow) { font-size: @xf-fontSizeNormal; }
                    }
                    &:after
                    {
                        .m-faContent("\f007");
                    }
                }
            }
        }
    }
}

This will get you started at least. You may want to make adjustments to the color on there using the CSS above.
 

Russ

Pixel Exit Staff
This CSS will result in this:

1666330275577.png


Code:
.custom-stats
{
    [data-widget-key="forum_overview_forum_statistics"]
    {
        .block-container
        {
            background: none;
            border-width: 0;
            box-shadow: none;
            .block-minorHeader
            {
                padding: 0;
                background: none;
                border-width: 0;
                box-shadow: none;
                font-size: @xf-fontSizeLargest;
                @media (max-width: @xf-responsiveMedium) { padding-left: @xf-pageEdgeSpacer; }
            }
            .block-body
            {
                display: flex;
                flex-wrap: wrap;
                margin: -5px;
                @media (max-width: @xf-responsiveMedium)
                {
                    margin: 0;
                }
                padding-right: 0;
                padding-left: 0;

            }
            .pairs.pairs--justified
            {
                flex: 1 1 20%;
                background-color: rgba(0, 0, 0, 0.25);
                border-radius: @xf-borderRadiusLarge;
                padding: @xf-paddingLarge;
                display: flex;
                margin: 5px;
                flex-direction: column;
                position: relative;
                justify-content: center;
                @media (max-width: @xf-responsiveMedium) { margin: 5px 0; flex: 1 1 100%; }
                dt
                {
                    order: 2;
                    font-size: @xf-fontSizeLarge;
                    float: none;
                    text-align: left;
                    color: #FFF;
                    font-weight: @xf-fontWeightHeavy;
                    &:after { display: none; }
                }
                dd
                {
                    order: 1;
                    font-size: 40px;
                    color: @xf-paletteAccent2;
                    float: none;
                    text-align: left;
                    padding-right: 45px;
                    font-weight: @xf-fontWeightHeavy;
                    @media (max-width: @xf-responsiveWide) { font-size: 20px; }
                }
                &:after
                {
                    .m-faBase();
                    .m-faContent("\f850");
                    vertical-align: middle;
                    position: absolute;
                    right: 10px;
                    font-size: 40px;
                    transform: rotate(0deg);
                    opacity: 0.4;
                }
                &:nth-of-type(2):after
                {
                    .m-faContent("\f040");
                }
                &:nth-of-type(3):after
                {
                    .m-faContent("\f0c0");
                }
                &:nth-of-type(4)
                {
                    dd
                    {
                        font-size: 34px;
                        @media (max-width: @xf-responsiveWide) { font-size: 20px; }
                        @media (max-width: @xf-responsiveNarrow) { font-size: @xf-fontSizeNormal; }
                    }
                    &:after
                    {
                        .m-faContent("\f007");
                    }
                }
            }
        }
    }
}
 

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.