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.

Widget design help

View previous topic View next topic Go down

Solved Widget design help

Post by Aqua Vantas on June 11th 2016, 6:49 pm

Hello!
Straight to the point, we would love to have a widget introducing our staff members and a certain one on a different forum sort of caught our eye, but we don't know how to make something like it:
this is the forum that has it: http://op-piratenation.forumotion.com/ and this is the widget idea we want to use: http://prntscr.com/bf4ubu

Thank you in advance for all your ideas Very Happy


Last edited by Aqua Vantas on June 14th 2016, 12:40 pm; edited 1 time in total

Aqua Vantas
New Member

Posts : 12
Reputation : 1
Language : Slovenian / English
Location : Slovenia

http://hogwartspl.slovenianforum.com

Back to top Go down

Solved Re: Widget design help

Post by 10spetter10 on June 11th 2016, 11:17 pm

Read this post: http://help.forumotion.com/t136908-hover-staff-list#924551

If you don't get it working you just say where it goes wrong and I'll try to help.

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Widget design help

Post by Aqua Vantas on June 13th 2016, 10:04 pm

This is great Very Happy thank you so much, you helped me a lot.
I only have one question left Very Happy Say, if I hover on one of these buttons, I want a thick border to appear around it. You have any idea how I could manage that?
This is the code. I haven't worked on fixind the style for now, but that can come in later, I just need it working right now Very Happy
Code:
<!--                                    style of the widget                                    --><style type="text/css">#mainBlock { width:240px } /* weight of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
  margin-bottom: 15px;
}
#staffList .title {
border: 1px dashed black;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 11px;
width: 240px;
color: #000000;
background-color: #FFFFFF;
}
</style> 
<!--                                    the staff list                                    -->
<div id="staffList">
                                                                        
   <div id="mainBlock">
                                            <img src="http://i.imgur.com/OMN5xFb.png" id="mainImage" />                                   
   </div>
                                                      
   <div class="title">
                          ADMIN                   
   </div><a href="u1">      <img alt="http://i66.tinypic.com/k2u82.jpg" src="http://media.tumblr.com/f327aaab5cbe9cf7b9edd9279a1ec9ba/tumblr_inline_mojpw36SUV1qz4rgp.png" />    </a><a href="/u4">    <img alt="http://i.imgur.com/jFJn0up.png" src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=19667266" />  </a><a href="/u3">    <img alt="http://i.imgur.com/QWo9fvU.png" src="http://media.tumblr.com/75892df897945c909d86844611538163/tumblr_inline_mu984jNvYq1s1tkrd.png" />  </a> 
   <div class="title">
                          MOD                   
   </div><a href="u99">      <img alt="http://i.imgur.com/wCJ6VFJ.png" src="https://pbs.twimg.com/profile_images/421766927912927232/srqiR05R.jpeg" />    </a>
</div>
                                       
<!--                                    technical stuff                                    --><script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

Aqua Vantas
New Member

Posts : 12
Reputation : 1
Language : Slovenian / English
Location : Slovenia

http://hogwartspl.slovenianforum.com

Back to top Go down

Solved Re: Widget design help

Post by Aqua Vantas on June 14th 2016, 12:40 pm

Okay, nevermind, it was a dummy question, I figured it out Very Happy Thank you for all your help Very Happy

This is SOLVED Very Happy

Aqua Vantas
New Member

Posts : 12
Reputation : 1
Language : Slovenian / English
Location : Slovenia

http://hogwartspl.slovenianforum.com

Back to top Go down

Solved Re: Widget design help

Post by brandon_g on June 14th 2016, 3:02 pm

Thanks for the help 10spetter10. Smile

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


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5358
Reputation : 489
Language : English
Location : USA

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