Staff Widgets?

Hi. I wanted to make a staff widget for my forum Dragons Roleplaying Forum... but I never understood how. Like for example: How did they make the profiles round? What was the code used for a staff widget? I've tried using some of the codes, like this one for example:

Spoiler:

But what that did was completely mess up my forum's color and shape...



Please help me!

Bump

Hello @KittyKat123,

Do you need help in order to fix your forum's color and shape?
Do you need help in order to install the Staff Widget?

I don't need help to fix my forum shape. I just need a code that works for making a staff widget, something like this: 

Spoiler:

And when you hover over the image, a bigger image appears in the space above? 

Is there a code that works for that? (I'd also like the pictures to be small like in the picture above, except more round...)

Hey @Kittykat123,

If you're looking for that, you can find an answer in this topic :
https://help.forumotion.com/t136908-hover-staff-list#924551


If you still want to use your old one, this is the modified markup :

Code:

<style type="text/css">.myStaff { text-align:center }
.myStaff p {
  color: #ffcc00;
  font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
.myStaff a {
  color: #ffcc00;
  font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
.myStaff a img {
  color: #ffcc00;
  font-family: Vivaldi, Verdana, Times New Roman, Arial;
  border-radius: 8px;
}
.myStaff a img:hover {
  color: #ffcc00;
  font-family: Vivaldi, Verdana, Times New Roman, Arial;
  border-radius: 0px;
}
</style>

<div class="myStaff">
  <p>Owner</p><br />
  <br />
  <a href="Profile-Link"><img src="Picture-Link" /></a><br />
  <br />
  <p>Head Administrator</p><br />
  <br />
  <a href="Profile-Link"><img src="Picture-Link" /></a><br />
  <br />
  <p>Administrators</p><br />
  <a href="Profile-Link"><img src="Picture-Link" /></a><br />
  <br />
  <p>Global Moderators</p><br />
  <a href="Profile-Link"><img src="Picture-Link" /></a><br />
  <br />
  <p>Junior Moderators</p><br />
  <a href="Profile-Link"><img src="Picture-Link" /></a><br />
</div>

The problem is that you didn't specify any unique classnames in your style tag ; You were selecting tag names which globally effects that specific tag you're selecting. To overcome this, you simply need to add a unique class to the parent container ( .myStaff ), and then you can use this class to select and style any of its child elements.