Forum Stats CSS Issue

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

Screen Shot 2019-07-01 at 4.25.32 PM.png

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?

Screen Shot 2019-07-06 at 8.13.25 AM.png

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:

https://tcgforum.pl/

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:

https://tcgforum.pl/

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