[Solved] What is code for Staff list like this forum ?

 

Advance Member

Status :

I am Web Developing.

Posts :

218

Posted Wed May 28, 2014 9:22 pm

 

Details: Staff List
Forum Address: http://linux-team.forumgreek.com/
Forum Version: PunBB

Hi all,
How can I create a staff list like this forum?

With Best Regards,
Dark-Avenger

 

Forum Helper

Status :

Coding :)

Posts :

396

Posted Wed May 28, 2014 9:27 pm

 

Code:

<script type="text/javascript">
jQuery(function() {
  var x = document.getElementById('right').getElementsByTagName('table')[9];
  var y = document.getElementById('onlineStaff').getElementsByTagName('span');
  for (i=0; i<y.length; i++) {
    if (x.innerHTML.indexOf(y[i].innerHTML) > 0) y[i].innerHTML+=" - Online";
    else y[i].innerHTML+=" - Offline";
  }
});
</script>

Hope this helps.

 

Advance Member

Status :

I am Web Developing.

Posts :

218

Posted Wed May 28, 2014 10:02 pm

 

Hi Tommy Lee,
No I need something like this http://prntscr.com/3ni2eu

Best Regards,
Dark-Avenger

 

Forum Helper

Status :

What's on your Mind ?

Posts :

5

Posted Wed May 28, 2014 11:56 pm

 

Try this one: (Create an html page)

Code:

<h3 class="maintitle">The Moderating Team</h3>
<table class="ipb_table ipsMemberList">
   <tbody><tr class="header">
      <th scope="col" style="width: 3%"> </th>
      <th scope="col" style="width: 20%">Staff Name</th>
      <th scope="col" style="width: 25%">Position</th>
      <th scope="col" style="width: 25%" class="short">Location</th>
      <th scope="col" style="width: 12%">&nbsp;</th>
   </tr>


   
<tr class="row1">

<td><div class="left"><img src="IMAGE1" class="avt-rr"></div></td>
<td>Name here</td>
<td><span style="color:#E81E90;font-weight:bold;">Position here</span></td>
<td><span class="ipsText_small desc">Location here</span></td>

</tr>
   
<tr class="row2">

<td><div class="left"><img src="IMAGE2" class="avt-rr"></div></td>
<td>Name here</td>
<td><span style="color:#E81E90;font-weight:bold">Position here</span></td>
<td><span class="ipsText_small desc">Location here</span></td>

</tr>
   
<tr class="row1">

<td><div class="left"><img src="IMAGE3" class="avt-rr"></div></td>
<td>Name here</td>
<td><span style="color:#E81E90;font-weight:bold;">Position here</span></td>
<td><span class="ipsText_small desc">Location here</span></td>

</tr>

<tr class="row2">

<td><div class="left"><img src="IMAGE4" class="avt-rr"></div></td>
<td>Name here</td>
<td><span style="color:#E81E90;font-weight:bold">Position here</span></td>
<td><span class="ipsText_small desc">Location here</span></td>
</tr>



</tbody></table>

<style>
.maintitle{
background:#2c5687 url(http://community.invisionpower.com/filestore/public/style_images/master/maintitle.png) repeat-x top;
color:#fff;
padding:10px 10px 11px;
font-size:16px;
font-weight:300;
-moz-border-radius:4px 4px 0 0;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
border-radius:4px 4px 0 0;
-webkit-box-shadow:inset 0px 1px 0 #528cbc;
-moz-box-shadow:inset 0px 1px 0 #528cbc;
box-shadow:inset 0px 1px 0 #528cbc;
border-width:1px 1px 0 1px;
border-color:#316897;
border-style:solid;
}
table.ipb_table{
width:100%;
line-height:1.3;
border-collapse: collapse;
}
table.ipb_table td{
padding:10px;
border-bottom:1px solid #f3f3f3;
}
table.ipb_table tr.unread h4{
font-weight:bold;}
table.ipb_table tr.highlighted td{
border-bottom:0;}
table.ipb_table th{
font-size:11px;
font-weight:bold;
padding:8px 6px;
}
.last_post{
margin-left:45px;
}
table.ipb_table h4,table.ipb_table .topic_title{
font-size:14px;
display:inline-block;
}
.header {
background: #b6c7db;
color: #1d3652;
}
.avt-rr {
width: 30px;
height: 30px;
margin: 3px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.avt-rr:hover {
border-color: #a1a1a1;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
</style>

 

Advance Member

Status :

I am Web Developing.

Posts :

218

Posted Thu May 29, 2014 1:39 am

 

Hi Mark,
Thank you very much its solved.

Best Regards,
Dark-Avenger

 

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Thu May 29, 2014 3:06 am

 

Problem Solved & Locked


" Next time Please be Descriptive to your Question " :)

Staff list ? --> What is code for Staff list like this forum ?

 

Forum Helper

Status :

Coding :)

Posts :

396

Posted Thu May 29, 2014 8:03 am

 

Problem Marked As Solved => Archived

 

Posted