Staff Widget Like This?

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 : 2064
Reputation : 314
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 : 43662
Reputation : 3104
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum