Forum Stats CSS Issue

[Guiri]

Will the Homepage-only Widget option be making a return? The issue with the Global Widgets option is that the Forum Stats don't scale well to the smaller category sidebar.

[julian]

I believe we're using this widget in the homepage sidebar, although we might use custom CSS to make the font smaller. Perhaps @baris or @psychobunny could shed some light on that.

[baris]

.forum-stats .stats-card h2 {
    font-size: 22px;
}

[Christian Mendieta]

Hi!
Deeply sorry to bring this old topic back, but where should I put the CSS code that @baris mentioned? I'm having the same issue on v1.7.3

Thanks!
Christian

[Christian Mendieta]

I just solved it myself. For reference just add the code to Appearance > Custom Content.

Cheers
Christian

[crazycells]

@baris any code suggestion to make all in one line horizontally ?

on ipad every looks as a vertical one line , and on desktop it looks square 2 x 2... it is never going straight one line with 4 columns...

any help is appreciated.

[crazycells]

any suggestion to fix this appearance of the forum stats?

[baris]

You need to modify this file or overwrite it in a plugin. So it looks like this

<div class="row forum-stats">
	<div class="row">
		<div class="col-md-3">
			<div class="stats-card {statsClass}">
				<h2><span class="stats" title="{online}">{online}</span><br /><small>[[global:online]]</small></h2>
			</div>
		</div>
		<div class="col-md-3">
			<div class="stats-card {statsClass}">
				<h2><span class="stats" title="{users}">{users}</span><br /><small>[[global:users]]</small></h2>
			</div>
		</div>
		<div class="col-md-3">
			<div class="stats-card {statsClass}">
				<h2><span class="stats" title="{topics}">{topics}</span><br /><small>[[global:topics]]</small></h2>
			</div>
		</div>
		<div class="col-md-3">
			<div class="stats-card {statsClass}">
				<h2><span class="stats" title="{posts}">{posts}</span><br /><small>[[global:posts]]</small></h2>
			</div>
		</div>
	</div>
</div>

[PitaJ]

@crazycells

You can overwrite the template with nodebb-plugin-customize.

I suggest you open an issue on widgets-essential to fix this though.

[crazycells]

@baris @PitaJ

Thanks a lot, is there anything else that I need to do besides overwriting and restarting? I have tried several times but could not make it work. I deleted whole template and pasted the code above by using customize plugin. Rebuilded and restarted the forum many times, but still the same look. Is there extra step I am missing?

[crazycells]

@PitaJ said in Forum Stats CSS Issue:

@crazycells

You can overwrite the template with nodebb-plugin-customize.

I suggest you open an issue on widgets-essential to fix this though.

Do you think this is an issue to be fixed? I assumed the widget is designed like this on purpose. Although I would not prefer this look, I was assuming this is a matter of preference...

[PitaJ]

@crazycells make sure the customize plugin is either at the top of bottom of the plugin priority list in the ACP. Otherwise it's templates won't be used to overwrite.

Yes it's an issue if it looks bad.

[crazycells]

@PitaJ said in Forum Stats CSS Issue:

@crazycells make sure the customize plugin is either at the top of bottom of the plugin priority list in the ACP. Otherwise it's templates won't be used to overwrite.

Yes it's an issue if it looks bad.

Thanks a lot, I did this, but I had to add this custom CSS:

.stats-card h2 {
    text-align: center;
}

otherwise it was leaning to the left. This way, it looks only ok if I am in full desktop mode, when I shrink the window instead of 2 by 2 grid, it goes back to straight line, and also mobile appearance does not change.

I will open an issue on widgets-essential, Thanks a lot again.

[crazycells]

@PitaJ said in Forum Stats CSS Issue:

@crazycells

You can overwrite the template with nodebb-plugin-customize.

I suggest you open an issue on widgets-essential to fix this though.

Thanks again, I have opened an issue here:

https://github.com/NodeBB/nodebb-widget-essentials/issues/45

[crazycells]

@Tpk you have very cool stats right here:

would you mind sharing the codes for this appearance ?

[crazycells]

@crazycells said in Forum Stats CSS Issue:

@Tpk you have very cool stats right here:

would you mind sharing the codes for this appearance ?

@Tpk it would be great if you can share the codes. This looks very cool!

[baris]

This should work better

<div class="row forum-stats">
    <div class="row">
        <div class="col-md-3 col-xs-3">
            <div class="stats-card {statsClass}">
                <h2><span class="stats" title="{online}">{online}</span><br /><small>[[global:online]]</small></h2>
            </div>
        </div>
        <div class="col-md-3 col-xs-3">
            <div class="stats-card {statsClass}">
                <h2><span class="stats" title="{users}">{users}</span><br /><small>[[global:users]]</small></h2>
            </div>
        </div>
 
        <div class="col-md-3 col-xs-3">
            <div class="stats-card {statsClass}">
                <h2><span class="stats" title="{topics}">{topics}</span><br /><small>[[global:topics]]</small></h2>
            </div>
        </div>
        <div class="col-md-3 col-xs-3">
            <div class="stats-card {statsClass}">
                <h2><span class="stats" title="{posts}">{posts}</span><br /><small>[[global:posts]]</small></h2>
            </div>
        </div>
    </div>
</div>

[crazycells]

@baris thanks, this one worked.

[crazycells]

@baris Hi Baris,

Forum Stats widget causes the forum to shake on mobile/ipad... This affects the opening of settings/chats windows badly, FYI...

https://streamable.com/oyxz9j