MyBB Community Forums

NOTE: Make a backup of the code in Index_statisctic templates and Global CSS code

What is it?


Live preview

{$stats['numposts']} = Total forum posts
{$stats['numthreads'] = Total threads
{$stats['numusers']} = Total members

Step one:
Go to Index templates -> index_boardstats template

Step two:
Replace

{$forumstats}

with

</tbody>

Step three
After

</table>
<br />

(At the end of the code)
Add

<div style="text-align: center">
<span class="stats">{$stats['numposts']}</span><span class="statstext"> Posts</span>
<span class="stats">{$stats['numthreads']}</span> <span class="statstext">Threads</span>
<span class="stats">{$stats['numusers']}</span> <span class="statstext">Members</span>
</div>
<br />

CSS steps

Step 1:
Go to Themes -> your theme -> Global.css
Click on 'ModeEdit Stylesheet: Advanced Mode'

Step 2:
Look for

.thead a:hover, .thead a:active {
	transition: .2s linear;
	-moz-transition:.2s linear;
	-webkit-transition:.2s linear;
	text-decoration: underline;
}

Add Under this code

.stats {
-webkit-box-shadow: inset 20px 58px 20px 70px #538297;
-moz-box-shadow: inset 20px 58px 20px 70px #538297;
box-shadow: inset 20px 58px 20px 70px #538297;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left:50px;
color: #ffffff;
font-size: 17px;
padding: 3px 8px;

}

Resize The text next to it:
Add under this class:

.stats:hover {
color: #80d0cd;
-webkit-transition: color 200ms ease-in;
-moz-transition: color 200ms ease-in;
-o-transition: color 200ms ease-in;

}

the Transition is the new CSS3 effects hover change colors
If you got some questions, feel free to ask!

Enjoy!

Thanks to:
Jony (Rapture-gfx) Tutorial and effect idea
Jon (ThemeFreak) for CSS3 effects and code\idea

I found the class for most online and newsest but it didnt workfor some reason, Im trying to find out.

how to "Newest Member" & "Most Online" like http://gfxforums.net/ ?

@OP:
http://community.mybb.com/thread-95775-p...#pid700476

(2012-01-28, 09:35 AM)Jordan L. Wrote: [ -> ]@OP:
http://community.mybb.com/thread-95775-p...#pid700476

Thanks! +1

How to " new member " just a name ?

couse i use {$lang->stats_newestuser} = Please welcome our newest member, .......... ?

Should be something like {$newestmember} or something.

(2012-02-11, 12:47 PM)Jordan L. Wrote: [ -> ]Should be something like {$newestmember} or something.

You help me (again) thanku

I kinda like the ipb scroll up thingy
Will be goodif theres a tut

(2012-02-12, 03:55 PM)Crypter Wrote: [ -> ]I kinda like the ipb scroll up thingy
Will be goodif theres a tut

headerinclude

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
	$('a[href=#top]').click(function(){
		$('html, body').animate({scrollTop:0}, 900);
        return false;
	});
});
</script>

Footer

<a href="#top" rel="nofollow"><img src="http://localhostr.com/files/D1kapsM/up.png" alt="Go to top"></a>

Or use my.PSD

I was just trying to add these tutorial

http://community.mybb.com/thread-112047.html

i edited the templates.

i tried to find this code in global.css

PHP Code:
.thead a:hover, .thead a:active {
transition: .2s linear;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
text-decoration: underline;
}

But i dint had it and had this code.

PHP Code:
.thead a:hover, .thead a:active {
color: #ffffff;
text-decoration: underline;
}


i added this code.

Code:
.stats {
-webkit-box-shadow: inset 20px 58px 20px 70px #538297;
-moz-box-shadow: inset 20px 58px 20px 70px #538297;
box-shadow: inset 20px 58px 20px 70px #538297;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left:50px;
color: #ffffff;
font-size: 17px;
padding: 3px 8px;

}

under the tead.hover.

and this code under the following code.

Code:
.stats:hover {
color: #80d0cd;
-webkit-transition: color 200ms ease-in;
-moz-transition: color 200ms ease-in;
-o-transition: color 200ms ease-in;

}

its not working.

QUOTED :


Quote:
Add Under this code

Code:
.stats {
-webkit-box-shadow: inset 20px 58px 20px 70px #538297;
-moz-box-shadow: inset 20px 58px 20px 70px #538297;
box-shadow: inset 20px 58px 20px 70px #538297;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left:50px;
color: #ffffff;
font-size: 17px;
padding: 3px 8px;

}

Resize The text next to it:
Add under this class:

Code:
.stats:hover {
color: #80d0cd;
-webkit-transition: color 200ms ease-in;
-moz-transition: color 200ms ease-in;
-o-transition: color 200ms ease-in;

}


do i have to add .stats under hover code ?

how to resize the text next to it ? what does it means ?

Add under this class:

Code:
Code:
.stats:hover {
color: #80d0cd;
-webkit-transition: color 200ms ease-in;
-moz-transition: color 200ms ease-in;
-o-transition: color 200ms ease-in;

}

where to add this code ?

PLEASE HELP.