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!

Kittykat123
Forumember

Female Posts : 49
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

Kittykat123
Forumember

Female Posts : 49
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

Nemo
Support Moderator
Support Moderator

Male Posts : 992
Reputation : 101
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...)

Kittykat123
Forumember

Female Posts : 49
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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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