creaky

Registered
How easy would it be to change the layout of the forum stats to something similar to the attached. I'm using the Bolt style.

stats1.png
 
Try this out in your extra.less:

Code:
#XF .custom-stats [data-widget-key="forum_overview_forum_statistics"] .block-container .pairs.pairs--justified
{
    *
    {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    }
    &:after
    {
        position: relative;
        margin: 0 auto;
        font-size: 24px;
        padding: 0;
        text-align: center;
        right: auto;
        left: auto;
    }

}
 
For the default Bolt look on any style, edit forum_overview_wrapper:

Find:
Code:
{$innerContent|raw}
Add below
Code:
<div class="custom-stats">
    <xf:widget key="forum_overview_forum_statistics" />
</div>

Add this to your extra.less

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;
                color: @xf-textColor;
                @media (max-width: @xf-responsiveMedium) { padding-left: @xf-pageEdgeSpacer; }
            }
            .block-body
            {
                display: grid;
                gap: @xf-paddingMedium;
                grid-template-columns: 1fr 1fr;
                padding-right: 0;
                padding-left: 0;
                &:before, &:after
                {
                    display: none;
                }

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

It'll get this look (Bolt's look)

1717541089282.png



Or use this CSS to achieve this look:

1717541439028.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;
                color: @xf-textColor;
                @media (max-width: @xf-responsiveMedium) { padding-left: @xf-pageEdgeSpacer; }
            }
            .block-body
            {
                display: grid;
                gap: @xf-paddingMedium;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                padding-right: 0;
                padding-left: 0;
                @media (max-width: @xf-responsiveWide)
                {
                    grid-template-columns: 1fr 1fr;  
                }
                @media (max-width: @xf-responsiveNarrow)
                {
                    grid-template-columns: 1fr;  
                }
                &:before, &:after
                {
                    display: none;
                }

            }
            .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;
                align-items: 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;
                    margin: 0 auto;
                    &:after { display: none; }
                }
                dd
                {
                    order: 1;
                    font-size: @xf-fontSizeLarger;
                    color: @xf-paletteAccent2;
                    float: none;
                    text-align: left;
                    font-weight: @xf-fontWeightHeavy;
                    margin: 0 auto;
                    @media (max-width: @xf-responsiveWide) { font-size: 20px; }
                }
                &:after
                {
                    .m-faBase();
                    .m-faContent("\f850");
                    vertical-align: middle;
                    right: auto;
                    left: auto;
                    font-size: 26px;
                    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):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.

Back