Another Forum Stats Question.

[Blatchy]

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]

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

<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:

.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.

 

[Blatchy]

Thanks.. I was trying to use this thread https://pixelexit.com/threads/bolt-stats-template.12902/#post-58679

to make it the same but that is apparently outdated.

 

[Russ]

This CSS will result in this:

.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");
                    }
                }
            }
        }
    }
}

 

[Blatchy]

awesome.. thank you