The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Staff List Widget

View previous topic View next topic Go down

Solved Staff List Widget

Post by Fortescimo on December 31st 2015, 10:22 pm

Hi, I'm here on behalf of not only my forum, but my friend's forums!

Today, help is being sought out regarding the staff list kind of widget. You know, the one that details who is the owner, admin, and so on. None of us on these forums know of how to make it really spectacular looking like a lot of those forums out there. I have checked out other topics that might deal with the same thing as what I'm bringing up such as the one HERE.

Unfortunately, I still don't know how I should go about doing it. Can somebody please lend me the code that can give me the result of the type of staff widget seen in that link? If so, can you also include how I go about making the images circular and adding in the hover effect for the staff pics?

If you need my forum and my friend's forum, I'll gladly leave them here for you if you tell me that you need them. Thank you very much in advance. @.@


Last edited by Fortescimo on January 4th 2016, 12:49 am; edited 1 time in total

Fortescimo
New Member

Posts : 12
Reputation : 1
Language : English

http://narutoshinobiage.forumotion.com/

Back to top Go down

Solved Re: Staff List Widget

Post by Fortescimo on January 2nd 2016, 11:50 am

Bump

Fortescimo
New Member

Posts : 12
Reputation : 1
Language : English

http://narutoshinobiage.forumotion.com/

Back to top Go down

Solved Re: Staff List Widget

Post by Guest on January 2nd 2016, 1:12 pm

Hello, could you please link to your forum, so that we can verify your forum version and appearance? ^^

Guest
Guest


Back to top Go down

Solved Re: Staff List Widget

Post by Fortescimo on January 2nd 2016, 1:32 pm

Yes, of course. I'l throw in the other forum needing this widget as well. Smile

My Forum:http://narutoshinobiage.forumotion.com/

Other:http://volkaimpathofwar.forumotion.com/

Fortescimo
New Member

Posts : 12
Reputation : 1
Language : English

http://narutoshinobiage.forumotion.com/

Back to top Go down

Solved Re: Staff List Widget

Post by 10spetter10 on January 3rd 2016, 4:33 pm

Just a bit more info about the code that Ange Tuteur posted:

Code:
<!-- style of the widget -->
<style type="text/css">#mainBlock { height:100px; } /* height of the main image block */
#mainBlock img{ max-height:100%; max-width:100%; }
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>
 
<!-- the staff list -->
<div id="staffList">
  <div id="mainBlock">
    <img id="mainImage" src="http://illiweb.com/bl/logo.png" /> 
 </div>
  <a href="/u1">
    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://illiweb.com/fa/admin/icones/help.png" />
  </a>
</div>
   
<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>



You can split the code in 3 parts: css (lay-out), html (content) and javascript (hover effect). I'll focus on the html part because you mainly goining to change this.

html:
Code:
<div id="staffList">
  <!-- START big image -->
    <div id="mainBlock">
      <img id="mainImage" src="---url big image---" />
    </div>
  <!-- END big image -->
  <!--- START stafflist -->
    <a href="/u1">
      <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />
    </a>
    <br /> <! -- '<br />' to start a new line -->
    <a href="/u2">
      <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://illiweb.com/fa/admin/icones/help.png" />
    </a>
    <!-- START user template -->
      <a href="---url to the profile---">
        <img src="---url of small avatar---" alt="---url of big avatar---" />
      </a>
    <!-- END user template -->
    <!-- START example category/title -->
      <span style="font-size: 12pt; color: #ff0000; font-weight: 900;">Admins</span>
      [size=12][color=#FF0000][b]Admins[/b][/color][/size]
    <!-- END example category/title -->
  <!--- END stafflist -->
</div>

If you want some extra help about the size of the images, styling the categories ...

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Staff List Widget

Post by Fortescimo on January 3rd 2016, 11:20 pm

I think this is going to work out for me. Thanks for the help. I'll test out the codes before marking this as solved!

Fortescimo
New Member

Posts : 12
Reputation : 1
Language : English

http://narutoshinobiage.forumotion.com/

Back to top Go down

Solved Re: Staff List Widget

Post by brandon_g on January 8th 2016, 9:31 am

Topic solved and archived ~ brandon_g


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5355
Reputation : 489
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum