creaky

Customer
I've seen a few sites with forum stats showing as per the screenshots. I currently use Bolt with the forum stats enabled but wondered how easy it would be to do something similar. Which template would I need to edit to attempt it?

footer.PNG
footer2.PNG
 
Solution
Try this updated CSS:

Code:
.custom-stats
{
    background: #f6f7fb;
    padding: 10px 15px;
    [data-widget-key="forum_overview_forum_statistics"]
    {
        h3.block-minorHeader
        {
            color: #000;
        }
        .block-container, .block-container .pairs.pairs--justified
        {
            background-color: transparent;
            border-width: 0;
            box-shadow: none;
            color: #000;
        }
        .block-container .pairs.pairs--justified
        {
            flex: 1 1 23%;
            padding: 5px 15px 5px 60px;
            border-left: 1px solid rgba(204, 204, 204, 0.25);
            border-radius: 0;
            margin: 0;
            &:first-of-type
            {...
Adding just this to your extra.less:

Code:
.custom-stats
{
    [data-widget-key="forum_overview_forum_statistics"] .block-container .pairs.pairs--justified
    {
        flex: 1 1 20%;
    }
}

Would result in:
fCyZjcS.png


Or this is a bit of messy CSS:

Code:
.custom-stats
{
    background: @xf-paletteColor5;
    padding: 10px 15px;
    [data-widget-key="forum_overview_forum_statistics"]
    {
        h3.block-minorHeader
        {
            color: #FFF;
        }
        .block-container, .block-container .pairs.pairs--justified
        {
            background-color: transparent;
            border-width: 0;
            box-shadow: none;
            color: #FFF;
            
            dt { color: #FFF; }
        }
        .block-container .pairs.pairs--justified
        {
            flex: 1 1 20%;
            padding: 5px 10px 5px 60px;
            border-left: 1px solid rgba(204, 204, 204, 0.25);
            border-radius: 0;
            &:first-of-type { border-left-width: 0; }
            dd
            {
                font-size: 20px !important;
                color: #FFF;
                a { color: #FFF; text-decoration: underline; }
            }
            &:after
            {
                right: auto;
                left: 10px;
                font-size: 30px;
            }
        }
        @media (max-width: @xf-responsiveWide)
        {
        .block-container .block-body
        {
            display: block;
        }
            .block-container .pairs.pairs--justified
            {
                border-width: 0;
            }
        }
    }
}

To get this:
wW5PKHN.png
 
Ended up using the 2nd one which works really well, got 2 small issue though

stats.PNG

I want to move the text in each block over to the right which I've almost got but can't find where the extra padding is coming from. Also any suggestions for if a user has a long username as in the screenshot, makes the block bigger than I would like.

This is what I've got at the moment.

Code:
.custom-stats
{
    background: #f6f7fb;
    padding: 10px 15px;
    [data-widget-key="forum_overview_forum_statistics"]
    {
        h3.block-minorHeader
        {
            color: #000;
        }
        .block-container, .block-container .pairs.pairs--justified
        {
            background-color: transparent;
            border-width: 0;
            box-shadow: none;
            color: #000;
            
            dt { color: #000; text-align: right;}
        }
        .block-container .pairs.pairs--justified
        {
            flex: 1 1 20%;
            padding: 5px 10px 5px 60px;
            border-left: 1px solid rgba(204, 204, 204, 0.25);
            border-radius: 0;
            &:first-of-type { border-left-width: 0; }
            dd
            {
                font-size: 20px !important;
                color: #000;
				text-align: right;
                a { color: #000; text-decoration: underline; }
            }
            &:after
            {
                right: auto;
                left: 10px;
                font-size: 30px;
            }
        }
        @media (max-width: @xf-responsiveWide)
        {
        .block-container .block-body
        {
            display: block;
        }
            .block-container .pairs.pairs--justified
            {
                border-width: 0;
            }
        }
    }
}
 
Try this updated CSS:

Code:
.custom-stats
{
    background: #f6f7fb;
    padding: 10px 15px;
    [data-widget-key="forum_overview_forum_statistics"]
    {
        h3.block-minorHeader
        {
            color: #000;
        }
        .block-container, .block-container .pairs.pairs--justified
        {
            background-color: transparent;
            border-width: 0;
            box-shadow: none;
            color: #000;
        }
        .block-container .pairs.pairs--justified
        {
            flex: 1 1 23%;
            padding: 5px 15px 5px 60px;
            border-left: 1px solid rgba(204, 204, 204, 0.25);
            border-radius: 0;
            margin: 0;
            &:first-of-type
            {
                border-left-width: 0;
            }
            &:nth-of-type(4) dd
            {
                font-size: 16px !important;
            }
            &:nth-of-type(4)
            {
                padding-left: 45px;
                padding-right: 5px;
                flex: 1 1 31%;
            }
            dt
            {
                color: #000;
                text-align: right;
                margin-right: 0;
            }
            dd
            {
                font-size: 20px !important;
                color: #000;
                text-align: right;
                padding-right: 0;
                a { color: #000; text-decoration: underline; }
            }
            &:after
            {
                right: auto;
                left: 10px;
                font-size: 30px;
            }
        }
        @media (max-width: @xf-responsiveWide)
        {
        .block-container .block-body
        {
            display: block;
        }
            .block-container .pairs.pairs--justified
            {
                border-width: 0;
            }
        }
    }
}

It'll align them properly and make the right column a little wider than the others helping with longer usernames a bit.
 
Solution

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