statistic style & legend

i want my stats style in this way any help ... ? 

i want to add legends in a box type style ... ?

hope some one help me out  

Thanks

Forum Version please ?

sorry for not mention above    phpbb3 

thanks

Go in administration Panel -> Modules -> Javascript Management -> Create a new javascript , tick in all pages , name what you want

Code:

$(function(e) {
$('#wrap').after('
<div class="fotis">
<div class="fotis_content">
<div class="left_fotis">
<div class="header_fotis">Who we are ?</div>
We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming
</div>
<div class="center_fotis">
<div class="header_fotis">Who we are ?</div>
We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming
</div>

<div class="right_fotis">
<div class="header_fotis">Who we are ?</div>
We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming
</div>

</div>

</div>



');
});

Now , go in Administration Panel -> Display -> Colors -> CSS Stylesheet and add that code

Code:

.fotis{
padding: 10px;
margin: 0 auto;
}

.fotis_content {
max-width: 740px;
margin: 0 auto;
background: rgb(116, 116, 116);
padding: 20px;
font-size: 11px;
border-radius: 5px;
color: #474747;
text-shadow: none;
border: 1px solid rgb(66, 66, 66);
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.17) inset;
}

.left_fotis {
float: left;
max-width: 220px;
border-right: 1px solid rgba(0, 0, 0, 0.4);
padding-right: 10px;
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.29);
}

.header_fotis {
font-size: 20px;
text-align: center;
color: white;
}

.center_fotis {
width: 220px;
margin: 0 auto;
padding-left: 30px!important;
border-right: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.29);
padding-right: 10px;
display: inline-block;
}

.right_fotis {
width: 225px;
float: right;
margin-top: -2px;
}

And it's done, you have an similary footer with this.

sorry to say nothing changed

Any help url here ( http://gsmehfil.forumotion.net/ )

Thanks

Verify if you have the Javascript activated .
You want to style the statistics like screenshoot or want a similary table ?

same as in screen shot please 
and yes js is activated 
Thanks

I can't make exactly like the screenshoot because is protected by a copyright :'(

how about similar to that ?

I looked on your javascripts and you don't added my..

i added before when nothing comes up so i delided em 

Thanks u can see u got my pm for test account

Is it possible for PunBB to?

Hi,

it is possible for punBB since you are able to edit the templates. However, I can provided something similar to it? Can you please create your separte thread and I'll be more glad to help you out with it, thank you.

Sir chivas a

Any help for phpbb3 ?

thanks in advance waiting for ur response

Mistirious boy, candyfears script will work but he copied it in the post a bit messy, copy now::

Code:

$(function(e) {
$('#wrap').after('<div class="fotis"><div class="fotis_content"><div class="left_fotis"><div class="header_fotis">Who we are ?</div>We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming</div><div class="center_fotis"><div class="header_fotis">Who we are ?</div>We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming</div><div class="right_fotis"><div class="header_fotis">Who we are ?</div>We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming We are a new community dedicated to gaming</div></div></div>');});

Than add the CSS he posted up. This is what you'll get put of it. It's tested on FM so it would work on your BB3 forum.

nothing changed

Any help ?

thanks

It's appearing fine for me on your forum after test it. Look at the bottom of the page.



Did you add the script corectly in Modules > JS Managment, mark all pages, and enabled JS?

no no u got me wrong i dont need a saperate box downwords

am giving an example to have my statistics look like that i hope u got it ?

i mean  there are one box three colums
1. who's online  2. stats  3. legends 

thanks

Create a new javascript and add that :

Code:

$(document).ready(function(){
$('img#i_whosonline').next('p').addClass('p_cine_este_conectat');
$('div.h3:contains("Who is Online?")').addClass('a_cine_este_conectat');
$('div.h3:contains("Statistcs")').addClass('a_statistici');
$('.a_statistici').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.a_statistici').next('.page-bottom').next('.page-bottom').next('.page-bottom').addClass('p_statistici');
$('.p_statistici:eq(0)').addClass('p-bottom');
$('.p_statistici:eq(1)').addClass('p-bottom');
$('.p_statistici:eq(2)').addClass('p-bottom');
$('.p-bottom').wrapAll('<div class="p_statistici_toate">');
});

Now , go in administration Panel -> Display -> Colors -> CSS Stylesheet

Code:

.a_statistici, .a_cine_este_conectat{
border-bottom: none;
background: #F3F3F3;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
text-align: center;
margin-bottom: 5px;
box-shadow: inset 0px 0px 5px #DDD;
}

.p_cine_este_conectat, .p_statistici{
background: #EEE;
border: 1px solid #DDD;
padding: 5px 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
}

.p_statistici.doilea, .p_statistici.treilea{
margin-top: 3px!important;
}

.p_cine_este_conectat em{
font-style:normal!important;
padding-top: 6px;
border-top: 1px solid #DDD;
display: block!important;
}

#i_whosonline{
float: right;
}

I can't make exactly like table , but I can change the style .

ummmmmm still remains same ?

u have test acc please check it out 

Thanks waiting for ur response