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.

So I got some problems regarding widgets...

View previous topic View next topic Go down

Solved So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 8:29 am

Basically, I'm making this site by myself and have been trying to add things like a staff widget and such. It's a Naruto RP site and I few things in mind for how I want it to look. For starters, I'd like the staff the widget to have a hover effect (basically if you hold the mouse over a picture, a different picture appears in the big area). I'd also like to have each picture in a horizontal line rather than going down.

For example:

The main problem is I have very minimal experience regarding the coding and would like help on this matter, if it's not too much to ask.
My current staff widget coding:


<style type="text/css">
p {
color: #fff;
font-family: Verdana;
}
</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>


" />

Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Pizza Boi on July 21st 2015, 8:41 am

Hi Very Happy

See this link: http://help.forumotion.com/t141892-staff-widgets

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 9:11 am

So I tried managed to get it somewhat right. The first one is in a horizonal lines and does the hover image. However, when I copy and paste that specific part so I could put the rest of the sections, it didn't work.

Spoiler:

Did I do something wrong?

Coding as of now:


<!-- style of the widget --><style type="text/css">#mainBlock { height:230px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
border-radius:100px;
width:50px;
height:50px;
}</style>
<!-- the staff list -->
<div id="staffList">

<div id="mainBlock">
<img id="mainImage" src="http://i.imgur.com/gTGo0ES.jpg" />
</div>

<div align="center">
HEAD ADMINISTRATORS
</div>
<a href="/u1"> <img src="http://i.imgur.com/IblFdzm.png" alt="http://i.imgur.com/eTqkYFq.png" /> </a> <a href="/u2"> <img src="http://i.imgur.com/IAwzZa3.png" alt="http://illiweb.com/fa/admin/icones/help.png" /> </a>
</div>
<div align="center">
ADMINISTRATORS
</div>
<a href="/u1"> <img src="http://i.imgur.com/IblFdzm.png" alt="http://i.imgur.com/eTqkYFq.png" /> </a> <a href="/u2"> <img src="http://i.imgur.com/IAwzZa3.png" alt="http://illiweb.com/fa/admin/icones/help.png" /> </a>
<div align="center">
GLOBAL MODERATORS
</div>
<a href="/u1"> <img src="http://i.imgur.com/IblFdzm.png" alt="http://i.imgur.com/eTqkYFq.png" /> </a> <a href="/u2"> <img src="http://i.imgur.com/IAwzZa3.png" alt="http://illiweb.com/fa/admin/icones/help.png" /> </a>
<div align="center">
MODERATORS
</div>
<a href="/u1"> <img src="http://i.imgur.com/IblFdzm.png" alt="http://i.imgur.com/eTqkYFq.png" /> </a> <a href="/u2"> <img src="http://i.imgur.com/IAwzZa3.png" alt="http://illiweb.com/fa/admin/icones/help.png" /> </a>
<!-- 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>


Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Pizza Boi on July 21st 2015, 9:43 am

Hi Very Happy

Try putting them in one line Smile(The staff list)

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 9:56 am

One...line? You mean like this?

Sorry, I just suck badly with coding:

Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Pizza Boi on July 21st 2015, 10:34 am

Hi Very Happy

Yes. Is that not what you want?

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 3:14 pm

Well I was hoping of having it sections off into groups of each staff group (Head Administrators, Administrators, Global Moderators, etc). Hence I was copy and pasting part of code in more parts

Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Chellizard on July 21st 2015, 3:40 pm

Not to jump in here, but were you looking for something like this?



Last edited by Chellizard on July 21st 2015, 3:42 pm; edited 1 time in total

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 3:41 pm

Yes, yes I was.

Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Chellizard on July 21st 2015, 3:45 pm

I have a personal code that I was given from a friend of mine. I'm going to see if I can optimize it for you. I would need images for each of your staff members and dimensions you would like used. And to make the process faster, if you already have images, then that's perfect. (:

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 3:52 pm

Yeah I do. However, only real staff is me. The rest is simply filler images.

Ze URLS:

Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Chellizard on July 21st 2015, 4:06 pm

Code:
<div class="module">
   
   <div class="inner">
       <span class="corners-top"> <span></span> </span>
      <div class="h3">
         
      </div>
      
      <center>
          <br /><img id="showperson" style="width: 140px; height: 223px;" src="http://i.imgur.com/gTGo0ES.jpg" align="middle" border="0px" />
<span style="font-size: 13px;"><span style="color: blue;"> <span style="font-size: 10px;"> <br /><strong>Administrators</strong> </span></span></span><br /><a href="http://narutogodsofwar.forumotion.com/u3" onmouseover="swap(this,'showperson','Alejandro')"><img style="width: 43px; height: 41px;" src="http://i.imgur.com/IblFdzm.png" /></a>
<span style="font-size: 13px;"> <span style="color: blue;"> <span style="font-size: 10px;"> <br /><strong>Site Moderators</strong> </span> </span> </span> <br /> <a href="http://narutogodsofwar.forumotion.com/" onmouseover="swap(this,'showperson','Filler1')"><img style="width: 43px; height: 41px;" src="http://i.imgur.com/IAwzZa3.png" /></a>
<span style="font-size: 13px;"><span style="color: blue;"><span style="font-size: 10px;"> <br /><strong>Forum Moderators</strong></span></span></span> <br /> <a href="http://narutogodsofwar.forumotion.com/" onmouseover="swap(this,'showperson','Filler2')"><img style="width: 43px; height: 41px;" src="http://i.imgur.com/IAwzZa3.png" /></a>
<span style="color: blue;"> <span style="font-size: 13px;"> </span> <span style="font-size: 10px;"> <br /><strong>C-Box Moderators</strong><br /></span></span> <a href="http://narutogodsofwar.forumotion.com/" onmouseover="swap(this,'showperson','Filler3')"><img style="width: 43px; height: 41px;" src="http://i.imgur.com/IAwzZa3.png" /></a>
<script type="text/javascript">
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
// var image information object
var mloi=new Object();
// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
{
imgInfo.opts[arguments[i]]=new Image();
imgInfo.opts[arguments[i]].src = arguments[i+1];
}
mloi[arguments[0]] = imgInfo;
}
// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
{
link.imgName = imgName;
link.onmouseout = swapBack;
link.swapReady = true;
}
document.images[imgName].src=mloi[imgName].opts[optName].src;
}
function swapBack()
{document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}
//
</script> <script type="text/javascript">
setswap("showperson",'Alejandro','http://i.imgur.com/eTqkYFq.png','filler1','http://illiweb.com/fa/admin/icones/help.png','filler2','http://illiweb.com/fa/admin/icones/help.png','filler3','http://illiweb.com/fa/admin/icones/help.png'

);
//
</script>
      </center>
       <span class="corners-bottom"> <span></span> </span>
   </div>
</div><br />


This should work for you!

The items "Filler1" "Filler2" and "Filler3" can be changed to the names of whomever becomes staff. As well as the URL's to their profiles. And the color "blue" can be changed to a hexcode like #00ffff or 'red' if you'd rather.

I hope it works for you!

Chellizard
Forumember

Female Posts : 113
Reputation : 11
Language : English

http://superhero-rpg.com

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by Big Boy Bane on July 21st 2015, 4:49 pm

This worked ^u^ thank you.

Big Boy Bane
New Member

Posts : 17
Reputation : 2
Language : English

http://narutogodsofwar.forumotion.com/

Back to top Go down

Solved Re: So I got some problems regarding widgets...

Post by SLGray on July 21st 2015, 6:20 pm

Topic solved and archived



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


SLGray
Administrator
Administrator

Male Posts : 35667
Reputation : 2375
Language : English
Location : United States

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