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 Widget Like This?

View previous topic View next topic Go down

Solved Staff Widget Like This?

Post by Eyeball on July 1st 2017, 12:10 pm

Hello Forumotion!

I came across a Staff Widget that I wanted to implement on my Forum as well.
Though I have no idea how to code or make something similar to this.

Would anyone have any idea how to code something like this?
Provided screenshot below



Last edited by Eyeball on July 1st 2017, 6:20 pm; edited 1 time in total
avatar
Eyeball
Forumember

Male Posts : 34
Reputation : 1
Language : English

http://fukitsuna-clan.forumotion.com/

Back to top Go down

Solved Re: Staff Widget Like This?

Post by _Twisted_Mods_ on July 1st 2017, 1:03 pm

Code:

<style>
.stafftitle img {
display: block;
margin: auto;
}
span.stafftitle {
 margin-bottom: 5px;
display: block;
}
.staffimg img {
    width: 80%;
    height: 80%;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-left: 3px solid grey;
    border-right: 3px solid grey;
    padding: 3px 10px;
}
.staffimg {
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
}
.staffimg:hover img {
    border-left: 6px solid #640202;
    border-right: 6px solid #640202;
-webkit-transition: border 0.5s; /* Safari */
    transition: border 0.5s;
}
 </style>
<div id="staffbox">
<span class="stafftitle">
<img src="http://i21.servimg.com/u/f21/16/89/96/68/admin11.png" />
</span>

<span class="staffimg"><img src="https://i.redd.it/1x58g8jtjndx.jpg" /></span>
<span class="staffimg"><img src="https://i.redd.it/1x58g8jtjndx.jpg" /></span>
<span class="staffimg"><img src="https://i.redd.it/1x58g8jtjndx.jpg" /></span>



<span class="stafftitle">
<img src="http://i21.servimg.com/u/f21/16/89/96/68/admin11.png" />
</span>

<span class="staffimg"><img src="https://i.redd.it/1x58g8jtjndx.jpg" /></span>
<span class="staffimg"><img src="https://i.redd.it/1x58g8jtjndx.jpg" /></span>
<span class="staffimg"><img src="https://i.redd.it/1x58g8jtjndx.jpg" /></span>
</div>
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2043
Reputation : 308
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Staff Widget Like This?

Post by Eyeball on July 1st 2017, 6:19 pm

@_Twisted_Mods_ you are just absolutely fantastic with support!
Thank you so much for your help!

Topic marked solved!
avatar
Eyeball
Forumember

Male Posts : 34
Reputation : 1
Language : English

http://fukitsuna-clan.forumotion.com/

Back to top Go down

Solved Re: Staff Widget Like This?

Post by SLGray on July 1st 2017, 6:32 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39135
Reputation : 2626
Language : English
Location : United States

https://fmthemes.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