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 Widgets?

View previous topic View next topic Go down

In progress Staff Widgets?

Post by Kittykat123 on May 10th 2015, 9:29 pm

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:
Code:
<style type="text/css">
p {
color: #ffcc00;
font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
a {
color: #ffcc00;
font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
a img {
color: #ffcc00;
font-family: Vivaldi, Verdana, Times New Roman, Arial;
border-radius: 8px;
}
a img:hover {
color: #ffcc00;
font-family: Vivaldi, Verdana, Times New Roman, Arial;
border-radius: 0px;
}
</style>

<center><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 />
</center>


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



Please help me!
avatar
Kittykat123
Forumember

Female Posts : 50
Reputation : 1
Language : English
Location : United States

http://thebeyond.forumotion.com/

Back to top Go down

In progress Re: Staff Widgets?

Post by Kittykat123 on May 11th 2015, 3:51 am

Bump
avatar
Kittykat123
Forumember

Female Posts : 50
Reputation : 1
Language : English
Location : United States

http://thebeyond.forumotion.com/

Back to top Go down

In progress Re: Staff Widgets?

Post by Nemo on May 11th 2015, 9:12 am

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?

Hello
avatar
Nemo
Active Poster

Male Posts : 1201
Reputation : 119
Language : Greek, English, French

http://www.helpgr.forumgreek.com

Back to top Go down

In progress Re: Staff Widgets?

Post by Kittykat123 on May 12th 2015, 12:50 am

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...)
avatar
Kittykat123
Forumember

Female Posts : 50
Reputation : 1
Language : English
Location : United States

http://thebeyond.forumotion.com/

Back to top Go down

In progress Re: Staff Widgets?

Post by Ange Tuteur on May 12th 2015, 3:40 pm

Hey @Kittykat123,

If you're looking for that, you can find an answer in this topic :
http://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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.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