Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
#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;
}
}
{$innerContent|raw}
<div class="custom-stats">
<xf:widget key="forum_overview_forum_statistics" />
</div>
.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");
}
}
}
}
}
}
.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");
}
}
}
}
}