eXtremePrivateServers

Basti

Basti

Administrator
Staff member
Designs like these are a nightmare for responsive design, but if you not need that, i kind of like it.
Though i personally would remove all those red borders on each member. Especially with more members i think this will look horrible. But thats just my opinion :)
 
xgcell

xgcell

Member
Not interested in responsive design really. Nearly all my traffic comes from desktops so I didn't feel it was worth my time. Site works alright on my phone so all in all I'm happy with that. With everyone moving to responsive design, I just don't see much creativity anymore. Most sites are very plain and have a cookie cutter feel to them. Figured I would try and old school design and if I fail and burn, well at least I had fun doing it :) The red borders are a bit much. I will probably remove them or tone them way down as to not catch the eye and distract from the listings so much! Thanks for your input!

update: Edited the red lines. Much less distracting now!
 
Last edited:
panzerdude

panzerdude

Member
I like your easy tabs on the details page for comments, videos, info and stats.

I would like something like this, was it hard to do any drawbacks? Thanks and good luck with your site.
 
xgcell

xgcell

Member
You will need to put jquery.easytabs.min.js, jquery-1.9.1.min.js, and jquery.hashchange.min.js in your js directory.

Then you will want to put this in your stats.html

Code: 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.easytabs.min.js" type="text/javascript"></script>
    <script scr="js/jquery.hashchange.min.js" type="text/javascript"></script>
<script type="text/javascript">
      $(document).ready(function(){ $('#tab-container').easytabs(); });
    </script>
and for the HTML:

HTML: 
<div id="tab-container" class="tab-container">
  <ul class='etabs'>

    <li class='tab'><a href="#tabs1-Comments">Comments</a></li>

    <li class='tab'><a href="#tabs1-Video">Video</a></li>
    <li class='tab'><a href="#tabs1-Information">Listing Information</a></li>
    <li class='tab'><a href="#tabs1-Statistics">Statistics</a></li>
  
  
  </ul>

  <div id="tabs1-Comments">
    <h2>{$title} Comments</h2>
    {$stats_before_stats}
  </div>

    <div id="tabs1-Video">
    <h2>Trailer Video</h2>
    {$youtube_video}
  </div>
      <div id="tabs1-Information">
    <h2>Site Listing Information</h2>
        <table>
            <tr>
                <td>Category</td>
                <td>{$category}</td>
            </tr>
        <tr>
                <td>Server Name</td>
                <td>{$title}</td>
            </tr>
        <tr>
                <td>Rank</td>
                <td>{$old_rank}</td>
            </tr>
        <tr>
                <td>URL</td>
                <td>{$url}</td>
            </tr>
        <tr>
                <td>Listed by</td>
                <td>{$username}</td>
            </tr>
        <tr>
                <td>Member Sence</td>
                <td>{$join_date}</td>
            </tr>
        </table>
  </div>
      <div id="tabs1-Statistics">
    <h2>{$title} {$lng->stats_header}</h2>
<div id="stats-tabs2">
    <ul class="tabs">
        <li class="active"><a href="#tabs-1" data-toggle="tab">{$lng->g_daily}</a></li>
        <li><a href="#tabs-2" data-toggle="tab">{$lng->g_weekly}</a></li>
        <li><a href="#tabs-3" data-toggle="tab">{$lng->g_monthly}</a></li>
        <li><a href="#tabs-4" data-toggle="tab">{$lng->g_overall}</a></li>
    </ul>

<div class="cl"></div>

<div id="tabs-1">
<table cellspacing="1" cellpadding="1" id="table1">
    <tr>
        <th>{$lng->g_daily}</th>
        <th{$pv_hide}>{$lng->g_unq_pv}</th>
        <th{$pv_hide}>{$lng->g_tot_pv}</th>
        <th>{$lng->g_unq_in}</th>
        <th>{$lng->g_tot_in}</th>
        <th>{$lng->g_unq_out}</th>
        <th>{$lng->g_tot_out}</th>
    </tr>
    <tr>
        <td>{$lng->g_average}</td>
        <td{$pv_hide}>{$unq_pv_avg_daily}</td>
        <td{$pv_hide}>{$tot_pv_avg_daily}</td>
        <td>{$unq_in_avg_daily}</td>
        <td>{$tot_in_avg_daily}</td>
        <td>{$unq_out_avg_daily}</td>
        <td>{$tot_out_avg_daily}</td>
    </tr>
    <tr>
        <td>{$lng->g_today}</td>
        <td{$pv_hide}>{$unq_pv_0_daily}</td>
        <td{$pv_hide}>{$tot_pv_0_daily}</td>
        <td>{$unq_in_0_daily}</td>
        <td>{$tot_in_0_daily}</td>
        <td>{$unq_out_0_daily}</td>
        <td>{$tot_out_0_daily}</td>
    </tr>
    <tr>
        <td>{$lng->g_yesterday}</td>
        <td{$pv_hide}>{$unq_pv_1_daily}</td>
        <td{$pv_hide}>{$tot_pv_1_daily}</td>
        <td>{$unq_in_1_daily}</td>
        <td>{$tot_in_1_daily}</td>
        <td>{$unq_out_1_daily}</td>
        <td>{$tot_out_1_daily}</td>
    </tr>
    <tr>
        <td>{$2_daily}</td>
        <td{$pv_hide}>{$unq_pv_2_daily}</td>
        <td{$pv_hide}>{$tot_pv_2_daily}</td>
        <td>{$unq_in_2_daily}</td>
        <td>{$tot_in_2_daily}</td>
        <td>{$unq_out_2_daily}</td>
        <td>{$tot_out_2_daily}</td>
    </tr>
    <tr>
        <td>{$3_daily}</td>
        <td{$pv_hide}>{$unq_pv_3_daily}</td>
        <td{$pv_hide}>{$tot_pv_3_daily}</td>
        <td>{$unq_in_3_daily}</td>
        <td>{$tot_in_3_daily}</td>
        <td>{$unq_out_3_daily}</td>
        <td>{$tot_out_3_daily}</td>
    </tr>
    <tr>
        <td>{$4_daily}</td>
        <td{$pv_hide}>{$unq_pv_4_daily}</td>
        <td{$pv_hide}>{$tot_pv_4_daily}</td>
        <td>{$unq_in_4_daily}</td>
        <td>{$tot_in_4_daily}</td>
        <td>{$unq_out_4_daily}</td>
        <td>{$tot_out_4_daily}</td>
    </tr>
    <tr>
        <td>{$5_daily}</td>
        <td{$pv_hide}>{$unq_pv_5_daily}</td>
        <td{$pv_hide}>{$tot_pv_5_daily}</td>
        <td>{$unq_in_5_daily}</td>
        <td>{$tot_in_5_daily}</td>
        <td>{$unq_out_5_daily}</td>
        <td>{$tot_out_5_daily}</td>
    </tr>
    <tr>
        <td>{$6_daily}</td>
        <td{$pv_hide}>{$unq_pv_6_daily}</td>
        <td{$pv_hide}>{$tot_pv_6_daily}</td>
        <td>{$unq_in_6_daily}</td>
        <td>{$tot_in_6_daily}</td>
        <td>{$unq_out_6_daily}</td>
        <td>{$tot_out_6_daily}</td>
    </tr>
    <tr>
        <td>{$7_daily}</td>
        <td{$pv_hide}>{$unq_pv_7_daily}</td>
        <td{$pv_hide}>{$tot_pv_7_daily}</td>
        <td>{$unq_in_7_daily}</td>
        <td>{$tot_in_7_daily}</td>
        <td>{$unq_out_7_daily}</td>
        <td>{$tot_out_7_daily}</td>
    </tr>
    <tr>
        <td>{$8_daily}</td>
        <td{$pv_hide}>{$unq_pv_8_daily}</td>
        <td{$pv_hide}>{$tot_pv_8_daily}</td>
        <td>{$unq_in_8_daily}</td>
        <td>{$tot_in_8_daily}</td>
        <td>{$unq_out_8_daily}</td>
        <td>{$tot_out_8_daily}</td>
    </tr>
    <tr>
        <td>{$9_daily}</td>
        <td{$pv_hide}>{$unq_pv_9_daily}</td>
        <td{$pv_hide}>{$tot_pv_9_daily}</td>
        <td>{$unq_in_9_daily}</td>
        <td>{$tot_in_9_daily}</td>
        <td>{$unq_out_9_daily}</td>
        <td>{$tot_out_9_daily}</td>
    </tr>
    <tr>
        <td>{$lng->stats_highest}</td>
        <td{$pv_hide}>{$unq_pv_max_daily}</td>
        <td{$pv_hide}>{$tot_pv_max_daily}</td>
        <td>{$unq_in_max_daily}</td>
        <td>{$tot_in_max_daily}</td>
        <td>{$unq_out_max_daily}</td>
        <td>{$tot_out_max_daily}</td>
    </tr>
</table>
</div>


<div id="tabs-2">
<table cellspacing="1" cellpadding="1">
    <tr>
        <th>{$lng->g_weekly}</th>
        <th{$pv_hide}>{$lng->g_unq_pv}</th>
        <th{$pv_hide}>{$lng->g_tot_pv}</th>
        <th>{$lng->g_unq_in}</th>
        <th>{$lng->g_tot_in}</th>
        <th>{$lng->g_unq_out}</th>
        <th>{$lng->g_tot_out}</th>
    </tr>
    <tr>
        <td>{$lng->g_average}</td>
        <td{$pv_hide}>{$unq_pv_avg_weekly}</td>
        <td{$pv_hide}>{$tot_pv_avg_weekly}</td>
        <td>{$unq_in_avg_weekly}</td>

        <td>{$tot_in_avg_weekly}</td>
        <td>{$unq_out_avg_weekly}</td>
        <td>{$tot_out_avg_weekly}</td>
    </tr>
    <tr>
        <td>{$lng->g_this_week}</td>
        <td{$pv_hide}>{$unq_pv_0_weekly}</td>
        <td{$pv_hide}>{$tot_pv_0_weekly}</td>
        <td>{$unq_in_0_weekly}</td>
        <td>{$tot_in_0_weekly}</td>
        <td>{$unq_out_0_weekly}</td>
        <td>{$tot_out_0_weekly}</td>
    </tr>
    <tr>
        <td>{$lng->g_last_week}</td>
        <td{$pv_hide}>{$unq_pv_1_weekly}</td>
        <td{$pv_hide}>{$tot_pv_1_weekly}</td>
        <td>{$unq_in_1_weekly}</td>
        <td>{$tot_in_1_weekly}</td>
        <td>{$unq_out_1_weekly}</td>
        <td>{$tot_out_1_weekly}</td>
    </tr>
    <tr>
        <td>{$2_weekly}</td>
        <td{$pv_hide}>{$unq_pv_2_weekly}</td>
        <td{$pv_hide}>{$tot_pv_2_weekly}</td>
        <td>{$unq_in_2_weekly}</td>
        <td>{$tot_in_2_weekly}</td>
        <td>{$unq_out_2_weekly}</td>
        <td>{$tot_out_2_weekly}</td>
    </tr>
    <tr>
        <td>{$3_weekly}</td>
        <td{$pv_hide}>{$unq_pv_3_weekly}</td>
        <td{$pv_hide}>{$tot_pv_3_weekly}</td>
        <td>{$unq_in_3_weekly}</td>
        <td>{$tot_in_3_weekly}</td>
        <td>{$unq_out_3_weekly}</td>
        <td>{$tot_out_3_weekly}</td>
    </tr>
    <tr>
        <td>{$4_weekly}</td>
        <td{$pv_hide}>{$unq_pv_4_weekly}</td>
        <td{$pv_hide}>{$tot_pv_4_weekly}</td>
        <td>{$unq_in_4_weekly}</td>
        <td>{$tot_in_4_weekly}</td>
        <td>{$unq_out_4_weekly}</td>
        <td>{$tot_out_4_weekly}</td>
    </tr>
    <tr>
        <td>{$5_weekly}</td>
        <td{$pv_hide}>{$unq_pv_5_weekly}</td>
        <td{$pv_hide}>{$tot_pv_5_weekly}</td>
        <td>{$unq_in_5_weekly}</td>
        <td>{$tot_in_5_weekly}</td>
        <td>{$unq_out_5_weekly}</td>
        <td>{$tot_out_5_weekly}</td>
    </tr>
    <tr>
        <td>{$6_weekly}</td>
        <td{$pv_hide}>{$unq_pv_6_weekly}</td>
        <td{$pv_hide}>{$tot_pv_6_weekly}</td>
        <td>{$unq_in_6_weekly}</td>
        <td>{$tot_in_6_weekly}</td>
        <td>{$unq_out_6_weekly}</td>
        <td>{$tot_out_6_weekly}</td>
    </tr>
    <tr>
        <td>{$7_weekly}</td>
        <td{$pv_hide}>{$unq_pv_7_weekly}</td>
        <td{$pv_hide}>{$tot_pv_7_weekly}</td>
        <td>{$unq_in_7_weekly}</td>
        <td>{$tot_in_7_weekly}</td>
        <td>{$unq_out_7_weekly}</td>
        <td>{$tot_out_7_weekly}</td>
    </tr>
    <tr>
        <td>{$8_weekly}</td>
        <td{$pv_hide}>{$unq_pv_8_weekly}</td>
        <td{$pv_hide}>{$tot_pv_8_weekly}</td>
        <td>{$unq_in_8_weekly}</td>
        <td>{$tot_in_8_weekly}</td>
        <td>{$unq_out_8_weekly}</td>
        <td>{$tot_out_8_weekly}</td>
    </tr>
    <tr>
        <td>{$9_weekly}</td>
        <td{$pv_hide}>{$unq_pv_9_weekly}</td>
        <td{$pv_hide}>{$tot_pv_9_weekly}</td>
        <td>{$unq_in_9_weekly}</td>
        <td>{$tot_in_9_weekly}</td>
        <td>{$unq_out_9_weekly}</td>
        <td>{$tot_out_9_weekly}</td>
    </tr>
    <tr>
        <td>{$lng->stats_highest}</td>
        <td{$pv_hide}>{$unq_pv_max_weekly}</td>
        <td{$pv_hide}>{$tot_pv_max_weekly}</td>
        <td>{$unq_in_max_weekly}</td>
        <td>{$tot_in_max_weekly}</td>
        <td>{$unq_out_max_weekly}</td>
        <td>{$tot_out_max_weekly}</td>
    </tr>
</table>
</div>

<div id="tabs-3">
<table cellspacing="1" cellpadding="1">
    <tr>
        <th>{$lng->g_monthly}</th>
        <th{$pv_hide}>{$lng->g_unq_pv}</th>
        <th{$pv_hide}>{$lng->g_tot_pv}</th>
        <th>{$lng->g_unq_in}</th>
        <th>{$lng->g_tot_in}</th>
        <th>{$lng->g_unq_out}</th>
        <th>{$lng->g_tot_out}</th>
    </tr>
    <tr>
        <td>{$lng->g_average}</td>
        <td{$pv_hide}>{$unq_pv_avg_monthly}</td>
        <td{$pv_hide}>{$tot_pv_avg_monthly}</td>
        <td>{$unq_in_avg_monthly}</td>
        <td>{$tot_in_avg_monthly}</td>
        <td>{$unq_out_avg_monthly}</td>
        <td>{$tot_out_avg_monthly}</td>
    </tr>
    <tr>
        <td>{$lng->g_this_month}</td>
        <td{$pv_hide}>{$unq_pv_0_monthly}</td>
        <td{$pv_hide}>{$tot_pv_0_monthly}</td>
        <td>{$unq_in_0_monthly}</td>
        <td>{$tot_in_0_monthly}</td>
        <td>{$unq_out_0_monthly}</td>
        <td>{$tot_out_0_monthly}</td>
    </tr>
    <tr>
        <td>{$lng->g_last_month}</td>
        <td{$pv_hide}>{$unq_pv_1_monthly}</td>
        <td{$pv_hide}>{$tot_pv_1_monthly}</td>
        <td>{$unq_in_1_monthly}</td>
        <td>{$tot_in_1_monthly}</td>
        <td>{$unq_out_1_monthly}</td>
        <td>{$tot_out_1_monthly}</td>
    </tr>
    <tr>
        <td>{$2_monthly}</td>
        <td{$pv_hide}>{$unq_pv_2_monthly}</td>
        <td{$pv_hide}>{$tot_pv_2_monthly}</td>

        <td>{$unq_in_2_monthly}</td>
        <td>{$tot_in_2_monthly}</td>
        <td>{$unq_out_2_monthly}</td>
        <td>{$tot_out_2_monthly}</td>
    </tr>
    <tr>
        <td>{$3_monthly}</td>
        <td{$pv_hide}>{$unq_pv_3_monthly}</td>
        <td{$pv_hide}>{$tot_pv_3_monthly}</td>
        <td>{$unq_in_3_monthly}</td>
        <td>{$tot_in_3_monthly}</td>
        <td>{$unq_out_3_monthly}</td>
        <td>{$tot_out_3_monthly}</td>
    </tr>
    <tr>
        <td>{$4_monthly}</td>
        <td{$pv_hide}>{$unq_pv_4_monthly}</td>
        <td{$pv_hide}>{$tot_pv_4_monthly}</td>
        <td>{$unq_in_4_monthly}</td>
        <td>{$tot_in_4_monthly}</td>
        <td>{$unq_out_4_monthly}</td>
        <td>{$tot_out_4_monthly}</td>
    </tr>
    <tr>
        <td>{$5_monthly}</td>
        <td{$pv_hide}>{$unq_pv_5_monthly}</td>
        <td{$pv_hide}>{$tot_pv_5_monthly}</td>
        <td>{$unq_in_5_monthly}</td>
        <td>{$tot_in_5_monthly}</td>
        <td>{$unq_out_5_monthly}</td>
        <td>{$tot_out_5_monthly}</td>
    </tr>
    <tr>
        <td>{$6_monthly}</td>
        <td{$pv_hide}>{$unq_pv_6_monthly}</td>
        <td{$pv_hide}>{$tot_pv_6_monthly}</td>
        <td>{$unq_in_6_monthly}</td>
        <td>{$tot_in_6_monthly}</td>
        <td>{$unq_out_6_monthly}</td>
        <td>{$tot_out_6_monthly}</td>
    </tr>
    <tr>
        <td>{$7_monthly}</td>
        <td{$pv_hide}>{$unq_pv_7_monthly}</td>
        <td{$pv_hide}>{$tot_pv_7_monthly}</td>
        <td>{$unq_in_7_monthly}</td>
        <td>{$tot_in_7_monthly}</td>
        <td>{$unq_out_7_monthly}</td>
        <td>{$tot_out_7_monthly}</td>
    </tr>
    <tr>
        <td>{$8_monthly}</td>
        <td{$pv_hide}>{$unq_pv_8_monthly}</td>
        <td{$pv_hide}>{$tot_pv_8_monthly}</td>
        <td>{$unq_in_8_monthly}</td>
        <td>{$tot_in_8_monthly}</td>
        <td>{$unq_out_8_monthly}</td>
        <td>{$tot_out_8_monthly}</td>
    </tr>
    <tr>
        <td>{$9_monthly}</td>
        <td{$pv_hide}>{$unq_pv_9_monthly}</td>
        <td{$pv_hide}>{$tot_pv_9_monthly}</td>
        <td>{$unq_in_9_monthly}</td>
        <td>{$tot_in_9_monthly}</td>
        <td>{$unq_out_9_monthly}</td>
        <td>{$tot_out_9_monthly}</td>
    </tr>
    <tr>
        <td>{$lng->stats_highest}</td>
        <td{$pv_hide}>{$unq_pv_max_monthly}</td>
        <td{$pv_hide}>{$tot_pv_max_monthly}</td>
        <td>{$unq_in_max_monthly}</td>
        <td>{$tot_in_max_monthly}</td>
        <td>{$unq_out_max_monthly}</td>
        <td>{$tot_out_max_monthly}</td>
    </tr>
</table>
</div>


<div id="tabs-4">
<table cellspacing="1" cellpadding="1">
    <tr>
        <th></th>
        <th{$pv_hide}>{$lng->g_unq_pv}</th>
        <th{$pv_hide}>{$lng->g_tot_pv}</th>
        <th>{$lng->g_unq_in}</th>
        <th>{$lng->g_tot_in}</th>
        <th>{$lng->g_unq_out}</th>
        <th>{$lng->g_tot_out}</th>
    </tr>
    <tr>
        <td>{$lng->g_overall}</td>
        <td{$pv_hide}>{$unq_pv_overall}</td>
        <td{$pv_hide}>{$tot_pv_overall}</td>
        <td>{$unq_in_overall}</td>
        <td>{$tot_in_overall}</td>
        <td>{$unq_out_overall}</td>
        <td>{$tot_out_overall}</td>
    </tr>
</table>
</div>


</div> <!--tabs-->
I pulled that right off my site, you can modify it as you like. Let me know if you still have problems. You will still need to create your own css for them though.
 
You must log in or register to reply here.
Top