1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



Statistics Table For Sidebar

Discussion in 'General' started by Revo., Sep 21, 2011.

Page 1 of 2
  1. Offline

    Revo. .sense {display:none;}

    Member Since:
    Dec 30, 2007
    Total Posts:
    4,477
    Likes Received:
    83
    Gender:
    Female
    Location:
    NY
    • Awards
    STATISTICS TABLE

    RULES Post here if you use it with a link.
    Leave credit in sidebar or thread. Just somewhere. (=


    PREVIEWS

    [IMG]

    [IMG]

    VERSION ONE (EMBEDDED CSS)
    Here is and html table version with embedded CSS.
    This can be used as is in a dohtml template.

    Code: Select
    <table style="width:180px; margin: 5px auto; font-family:arial;  text-transform:uppercase; background-color:#000; letter-spacing:2px;" border="0">

<tr style="font-weight:bold; background:#111;">
<th style="text-align:left; padding-left:5px;">STATISTICS</th>
<td style="color:#0496f6; text-align:center;">M</td>
<td style="color:#fa48b9; text-align:center;">F</td>
</tr>

<tr style="font-size:8px;">
<th style="color:#ddd; text-align:left;padding-left:5px;">Usergroup</th>
<td style="text-align:center; color:#555;">#</td>
<td style="text-align:center; color:#555;">#</td>
</tr>

<tr style="font-size:8px;">
<th style="color:#aaa; text-align:left;padding-left:5px;">Usergroup</th>
<td style="text-align:center; color:#555;">#</td>
<td style="text-align:center; color:#555;">#</td>
</tr>

<tr style="font-size:8px;">
<th style="color:#888; text-align:left;padding-left:5px;">Usergroup</th>
<td style="text-align:center; color:#555;">#</td>
<td style="text-align:center; color:#555;">#</td>
</tr>

<tr style="font-size:8px;">
<th style="color:#333; text-align:left;padding-left:5px;">Usergroup</th>
<td style="text-align:center; color:#555;">#</td>
<td style="text-align:center; color:#555;">#</td>
</tr>

<tr style="font-weight:bold; background:#111;">
<th style="text-align:left; padding-left:5px;">TOTALS</th>
<td style="color:#0496f6; text-align:center;">#</td>
<td style="color:#fa48b9; text-align:center;">#</td>
</tr>

</table>
    VERSION TWO (EXTERNAL CSS)
    Here is and html table version with external CSS.
    This can be used as is in a dohtml template.
    You can can also extract the CSS part and put it in your skin CSS so it is applied to multiple pages.

    Code: Select
    <style type="text/css">
#statz table {width:150px; margin: 10px auto; font-family:arial;  text-transform:uppercase; letter-spacing:2px; border:1px solid #333; background:#747c87;padding:2px; font-weight:bold; }
#statz th {color:#eee; border-bottom: 1px solid #0b212d; border-top: 1px solid #0b212d;background:#2c4654; font-size:8px; text-align:left; }
#statz td {color:#333; font-size:8px;}
</style>

<div id="statz"><table>
<tr><th>STATISTICS</th>
<th style="color:#0496f6;">M</th>
<th style="color:#fa48b9;">F</th></tr>

<tr><td>Group 1</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 2</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 3</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 4</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 5</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 6</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 7</td> <td>M#</td> <td>F#</td></tr>
<tr><td>Group 8</td> <td>M#</td> <td>F#</td></tr>

<tr><th>TOTALS</th>
<th style="color:#0496f6;">M Total</th>
<th style="color:#fa48b9;">F Total</th>
</tr> </table></div>

    VERSION THREE (EXTERNAL CSS & JAVASCRIPT)
    This is just like version 3, but with javascript so that it will auto calculate your numbers.
    Javascript was coded with assistance of Ashkir.
    It cannot be used in a dohtml template because javascript does not work in posts.

    HEADER OR FOOTER
    Code: Select
    <script type="text/javascript">
var oneMale = 0;
var twoMale = 0;
var threeMale = 0;
var fourMale = 0;
var fiveMale = 0;
var sixMale = 0;
var sevenMale = 0;
var eightMale = 0;
var oneFemale = 0;
var twoFemale = 0;
var threeFemale = 0;
var fourFemale = 0;
var fiveFemale = 0;
var sixFemale = 0;
var sevenFemale = 0;
var eightFemale = 0;
var groupOne = 'GroupName1';
var groupTwo = 'GroupName2';
var groupThree = 'GroupName3';
var groupFour = 'GroupName4';
var groupFive = 'GroupName5';
var groupSix = 'GroupName6';
var groupSeven = 'GroupName7';
var groupEight = 'GroupName8';

/* Don't edit below this line */
var totalMale = oneMale+twoMale+threeMale+fourMale;
var totalFemale = oneFemale+twoFemale+threeFemale+fourFemale;
document.write('<div id="statz"><table><tr><th>STATISTICS</th><th style="color:#0496f6;">M</th><th style="color:#fa48b9;">F</th></tr><tr><td>'+groupOne+'</td> <td>'+oneMale+'</td> <td>'+oneFemale+'</td></tr><tr><td>'+groupTwo+'</td><td>'+twoMale+'</td><td>'+twoFemale+'</td> </tr><tr><td>'+groupThree+'</td><td>'+threeMale+'</td><td>'+threeFemale+'</td></tr><tr><td>'+groupFour+'</td><td>'+fourMale+'</td><td>'+fourFemale+'</td></tr><tr><td>'+groupFive+'</td><td>'+fiveMale+'</td><td>'+fiveFemale+'</td></tr><tr><td>'+groupSix+'</td><td>'+sixMale+'</td><td>'+sixFemale+'</td></tr><tr><td>'+groupSeven+'</td><td>'+sevenMale+'</td><td>'+sevenFemale+'</td></tr><tr><td>'+groupEight+'</td><td>'+eightMale+'</td><td>'+eightFemale+'</td></tr><tr> <th>TOTALS</th><th style="color:#0496f6;">'+totalMale+'</th> <th style="color:#fa48b9;">'+totalFemale+'</th> </tr> </table></div>')

</script>
    CSS OF SKIN
    Code: Select
    /* --- STATISTICS TABLE ---*/
#statz table {width:150px; margin: 10px auto; font-family:arial;  text-transform:uppercase; letter-spacing:2px; border:1px solid #333; background:#747c87;padding:2px; font-weight:bold; }
#statz th {color:#eee; border-bottom: 1px solid #0b212d; border-top: 1px solid #0b212d;background:#2c4654; font-size:8px; text-align:left; }
#statz td {color:#333; font-size:8px;}
    Revo., Sep 21, 2011
    #1
    Naminote and Abby like this.
  2. Offline

    Redheaded Beauty Member

    Member Since:
    Apr 11, 2009
    Total Posts:
    106
    Likes Received:
    44
    Gender:
    Female
    Very nice, to bad it doesn't add up the totals for you. Still very cool code.
    Redheaded Beauty, Sep 24, 2011
    #2
  3. Offline

    Aki Banned

    Member Since:
    Jan 10, 2007
    Total Posts:
    2,939
    Likes Received:
    1,662
    Gender:
    Male
    • Awards
    Hi RedHeaded Beauty. Hope Revo doesn't mind. But I turned it into something for you to do what you want. It isn't pretty, but, it gets the job done and is easy to edit and does the math as you requested.

    Code: Select
    <script type="text/javascript">
var oneMale = 0;
var twoMale = 0;
var threeMale = 0;
var fourMale = 0;
var oneFemale = 0;
var twoFemale = 0;
var threeFemale = 0;
var fourFemale = 0;
var groupOne = 'Usergroup 1';
var groupTwo = 'Usergroup 2';
var groupThree = 'Usergroup 3';
var groupFour = 'Usergroup 4';

/* Don't edit below this line */
var totalMale = oneMale+twoMale+threeMale+fourMale;
var totalFemale = oneFemale+twoFemale+threeFemale+fourFemale;
document.write('<table style="width:180px; margin: 5px auto; font-family:arial;  text-transform:uppercase; background-color:#000; letter-spacing:2px;" border="0"><tr style="font-weight:bold; background:#111;"> <th style="text-align:left; padding-left:5px;">STATISTICS</th> <td style="color:#0496f6; text-align:center;">M</td> <td style="color:#fa48b9; text-align:center;">F</td> </tr>  <tr style="font-size:8px;"> <th style="color:#ddd; text-align:left;padding-left:5px;">'+groupOne+'</th> <td style="text-align:center; color:#555;">'+oneMale+'</td> <td style="text-align:center; color:#555;">'+oneFemale+'</td> </tr>  <tr style="font-size:8px;"> <th style="color:#aaa; text-align:left;padding-left:5px;">'+groupTwo+'</th> <td style="text-align:center; color:#555;">'+twoMale+'</td> <td style="text-align:center; color:#555;">'+twoFemale+'</td> </tr>  <tr style="font-size:8px;"> <th style="color:#888; text-align:left;padding-left:5px;">'+groupThree+'</th> <td style="text-align:center; color:#555;">'+threeMale+'</td> <td style="text-align:center; color:#555;">'+threeFemale+'</td> </tr>  <tr style="font-size:8px;"> <th style="color:#333; text-align:left;padding-left:5px;">'+groupFour+'</th> <td style="text-align:center; color:#555;">'+fourMale+'</td> <td style="text-align:center; color:#555;">'+fourFemale+'</td> </tr>  <tr style="font-weight:bold; background:#111;"> <th style="text-align:left; padding-left:5px;">TOTALS</th> <td style="color:#0496f6; text-align:center;">'+totalMale+'</td> <td style="color:#fa48b9; text-align:center;">'+totalFemale+'</td> </tr> </table>')

</script>
    Change the zeros to what you want. oneMale / oneFemale = Usergroup 1; twoMale / twoFemale = usergroup 2, etc. To change usergroup names edit the text 'Usergroup 1', etc.
    Aki, Sep 27, 2011
    #3
    1 people like this.
  4. Offline

    Revo. .sense {display:none;}

    Member Since:
    Dec 30, 2007
    Total Posts:
    4,477
    Likes Received:
    83
    Gender:
    Female
    Location:
    NY
    • Awards
    Nice addition! I don't mind at all.
    Revo., Sep 27, 2011
    #4
  5. Offline

    Salya The loney one

    Member Since:
    May 25, 2011
    Total Posts:
    47
    Likes Received:
    4
    Gender:
    Female
    Location:
    Lost in my own world of fantasy.
    hope you don't mind but I'm going to use this on my forum. ^_^
    Salya, Oct 11, 2011
    #5
  6. Offline

    AJ! Pan-Sexy

    Member Since:
    Sep 21, 2011
    Total Posts:
    907
    Likes Received:
    468
    Gender:
    Female
    Location:
    Kentucky
    • Awards
    AJ!, Nov 1, 2011
    #6
  7. Offline

    Molione Sunshine and Enthusiasim!

    Member Since:
    Apr 6, 2011
    Total Posts:
    1,286
    Likes Received:
    1,019
    Gender:
    Female
    Location:
    Texas, USA
    Absolutely fantastic! Using here, with full credit! :D
    Molione, Jan 15, 2012
    #7
  8. Offline

    Bobot Member

    Member Since:
    Dec 17, 2008
    Total Posts:
    129
    Likes Received:
    1
    Gender:
    Female
    Location:
    Hogwarts
    Bobot, Jan 15, 2012
    #8
  9. Offline

    Epa Kiss Kiss

    Member Since:
    Mar 10, 2007
    Total Posts:
    453
    Likes Received:
    72
    Gender:
    Female
    Location:
    Georgia
    Epa, Feb 5, 2012
    #9
  10. Offline

    Shanksgasm! New: Member [R]

    Member Since:
    Oct 7, 2011
    Total Posts:
    0
    Likes Received:
    0
    Using it here.
    Many thanks :)
    Shanksgasm!, Mar 2, 2012
    #10
  11. Online

    dwelling an oustanding specimen

    Member Since:
    Jun 19, 2011
    Total Posts:
    71
    Likes Received:
    32
    Gender:
    Female
    Location:
    on the phone.
    using here!

    http://z13.invisionfree.com/Stay_AliveHG/index.php?
    dwelling, Mar 28, 2012
    #11
  12. Offline

    Coley <the abibliophobiac>

    Member Since:
    Sep 8, 2006
    Total Posts:
    3,448
    Likes Received:
    742
    Gender:
    Female
    Location:
    Canada
    • Awards
    Great table, using it here and credited on our credits page!
    Coley, Mar 30, 2012
    #12
  13. Offline

    Silmara Little Miss Airhead~

    Member Since:
    Jan 28, 2012
    Total Posts:
    185
    Likes Received:
    157
    Gender:
    Female
    Location:
    Landskrona, Sweden
    Using it on upcoming site here. Credit given in sidebar :3
    Silmara, Apr 30, 2012
    #13
  14. Offline

    Jedi Knight Muse A muse that's a...Jedi?

    Member Since:
    Jan 8, 2008
    Total Posts:
    1,321
    Likes Received:
    238
    Gender:
    Female
    Location:
    A long time ago, in a galaxy far, far away
    Using it here, with some minor tweaking! Thanks.
    Jedi Knight Muse, May 24, 2012
    #14
  15. Offline

    they-go abraxan kneazle & crup

    Member Since:
    Oct 22, 2011
    Total Posts:
    409
    Likes Received:
    193
    Gender:
    Female
    For the life of me I can't figure this out. this is my site and for some reason, the groups have moved across, and the group names aren't aligning the the left of the table... any ideas why? D:
    they-go, Jun 30, 2012
    #15
  16. Offline

    slayer Member

    Member Since:
    Sep 8, 2006
    Total Posts:
    327
    Likes Received:
    67
    Gender:
    Female
    Using here credited in the sidetable credits.
    slayer, Jun 30, 2012
    #16
  17. Offline

    RORY New Member

    Member Since:
    Jul 4, 2012
    Total Posts:
    2
    Likes Received:
    0
    Gender:
    Female
    Location:
    MD
    Using it here with a minor color adjustment.
    RORY, Jul 4, 2012
    #17
  18. Online

    Leo Love the lovable otter cat.

    Member Since:
    Apr 19, 2010
    Total Posts:
    1,692
    Likes Received:
    401
    Gender:
    Female
    Location:
    In the cub-board by the stairs.
    Can we not change the group name stuff to our own group names? I tried and now the table won't show up at all on my forum <_> (In reference to the Javascript one)
    Leo Love, Jul 22, 2012
    #18
  19. Offline

    Kris Lupin Remus Lupin's wife&Deadmouse's stalker

    Member Since:
    Jun 16, 2012
    Total Posts:
    214
    Likes Received:
    70
    Gender:
    Female
    Location:
    The Lupin Home
    Kris Lupin, Jul 28, 2012
    #19
  20. Offline

    Ryea Spaztastic Awesomesauce

    • Graphics Artist
    Member Since:
    Feb 2, 2010
    Total Posts:
    589
    Likes Received:
    61
    Gender:
    Female
    Location:
    COLORADO
    • Awards
    Ryea, Jul 29, 2012
    #20
Page 1 of 2

Share This Page