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.

Names poping out the avatar in widget

View previous topic View next topic Go down

Solved Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 5:55 pm

Hello.
I have this widget with the way the staff members are
By image order:
[Ιδρυτής] Founder (Sherlock H.)
[Διαχειριστές] Admins (Warrior7 & #theodore#)
[Γενικοί Διαχειριστές] Pro Admins (aimilios)
[Γενικοί Συντονιστές] Global Mods (Xristos)
[Συντονιστές] Mods (-----)



on the image you can see the avatars of the users. How can i make the name pop out right from the avatar?

I am using this code to the widget:
Code:
<div align="center">
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
<a href="/u1"><img title="Sherlock H." src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<a href="/u14"><img title="Warrior7" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<a href="/u2"><img title="#theodore#" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
<a href="/u7"><img title="aimilios" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
<a href="/u23"><img title="Xristos" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

Can someone help me with this?

Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ramdaman on October 18th 2014, 6:00 pm

Do you mean when you hover your mouse over it to pop out? Or to have it always popped out?

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:01 pm

I mean when you hover the avatar the name to pop out going right.






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ramdaman on October 18th 2014, 6:03 pm

Can I get a link to your forum? I'd like to find the CSS path so I can attempt to make it pop out.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:05 pm

Yes ofc you can! Information Forum GR

* mind that it is in greek! Wink






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ange Tuteur on October 18th 2014, 6:09 pm

Hello MrMind,

Something like this ?
Code:
<style type="text/css">
#userTable a { position:relative }
#userTable a .popable {
 background:#EEE;
 border:1px solid #CCC;
 border-radius:3px;
 box-shadow:1px 1px 1px rgba(0,0,0, 0.3);
 padding:3px;
 display:none;
 position:absolute;
 white-space:nowrap;
 left:0;
 bottom:10px;
 z-index:9;
}
#userTable a:hover .popable { display:block }
</style>

<div align="center" id="userTable">
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
<a href="/u1"><span class="popable">Sherlock H.</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<a href="/u14"><span class="popable">Warrior7</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<a href="/u2"><span class="popable">#theodore#</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
<a href="/u7"><span class="popable">aimilios</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
<a href="/u23"><span class="popable">Xristos</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

CSS is at the top if you want to edit it. ^^

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:13 pm

Can we somehow make it look like its popping out of the avatar?






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ange Tuteur on October 18th 2014, 6:17 pm

Like this ?
http://generaltesting.forumotion.com/h6-profil

HTML :
Code:
<style type="text/css">
#userTable a { position:relative }
#userTable a .popable {
  font-size:0;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:1px 1px 1px rgba(0,0,0, 0.3);
  padding:3px;
  opacity:0;
  position:absolute;
  white-space:nowrap;
  left:0;
  bottom:10px;
  z-index:9;
  transition:300ms;
}
#userTable a:hover .popable {
  font-size:12px;
  opacity:1;
}
</style>

<div align="center" id="userTable">
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
<a href="/u1"><span class="popable">Sherlock H.</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<a href="/u14"><span class="popable">Warrior7</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<a href="/u2"><span class="popable">#theodore#</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
<a href="/u7"><span class="popable">aimilios</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
<a href="/u23"><span class="popable">Xristos</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:25 pm

Talking about knowledge man! You are the best! ~1~

All the best for a wonderful weekend!:rose:
Sooolved!






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ange Tuteur on October 18th 2014, 6:26 pm

You're welcome

Topic archived

Thanks you too ^^

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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