Hitskin.com
Hello, I was working on adding two new moderators to the staff widget. I had inserted the coding, and then decided to move their icons manually, which messed up everything. I have tried fixing the coding in many different ways but I can't seem to manage doing it. Now the coding for every icon of Moderators and RP Moderators isn't working. Here's a look at the staff widget:
Now, I moved two icons to be on top of the three moderators. So it goes like, two moderator icons on top and three on bottom. When I did this, the whole coding got messed up. Needless to say, all icons are 50 x 50, but the coding used re-sizes them to 45 x 45, but the two icons that were moved suddenly aren't affected by the code and remained 50 x 50.
I would like to keep the staff widget like in the screenshot, but for the top two icons in moderators to be 45 x 45 by coding and for when the mouse hovers over any icon for Moderators + RP Moderators, a certain (140x223) image will show on top. (Administrators and Super Moderators coding is working very fine.)
Here is the current coding:
- Spoiler:
- Spoiler:
Now, I moved two icons to be on top of the three moderators. So it goes like, two moderator icons on top and three on bottom. When I did this, the whole coding got messed up. Needless to say, all icons are 50 x 50, but the coding used re-sizes them to 45 x 45, but the two icons that were moved suddenly aren't affected by the code and remained 50 x 50.
I would like to keep the staff widget like in the screenshot, but for the top two icons in moderators to be 45 x 45 by coding and for when the mouse hovers over any icon for Moderators + RP Moderators, a certain (140x223) image will show on top. (Administrators and Super Moderators coding is working very fine.)
Here is the current coding:
- Code:
<!-- style of the widget --><style type="text/css">#mainBlock { height:1px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
border-radius:30px;
width:45px;
height:45px;
}</style>
<!-- the staff list -->
<div id="staffList">
<div id="mainBlock">
<img src="http://i.imgur.com/UXVGEsU.png" id="mainImage" />
</div>
<div id="mainBlock">
<br /> <br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<br />
</div>
<div id="staffList">
<strong><span style="font-size: 13px;"><span style="color: rgb(0, 186, 219);"><span style="text-decoration: underline;">ADMINISTRATORS</span></span></span></strong>
</div>
<a href="/u3358"> <img alt="http://i.imgur.com/A669qW2.png http://i.imgur.com/A669qW2.png" src="http://i.imgur.com/65ZnhGi.png" /></a> <a href="/u4205"><img alt="http://i.imgur.com/60SNiaR.png" src="http://i.imgur.com/UisTnBD.png" /></a> <br /><span style="color: rgb(235, 61, 61);"><strong><span style="text-decoration: underline;">SUPER MODERATORS</span></strong></span><a href="/u5307"><br /> <img alt="http://i.imgur.com/bbD8HAT.png" src="http://i.imgur.com/w03JU5q.png" /></a> <br /> <strong><span style="font-size: 13px;"><span style="color: rgb(255, 162, 0);"><span style="text-decoration: underline;">MODERATORS</span></span></span></strong>
</div>
<div id="staffList">
<img alt="http://i.imgur.com/Ctyc26C.png" src="http://i.imgur.com/t0IEdKm.png" /> <img alt="http://i.imgur.com/w74Ry9G.png" src="http://i.imgur.com/dvcMuBE.png" /><a href="/u6489"><br /> <img src="http://i.imgur.com/vlWuXF1.png" alt="http://i.imgur.com/94OjYzI.png" /></a> <a href="/u5522"><img alt="http://i.imgur.com/prGNouv.png" src="http://i.imgur.com/XGRcE2q.png" /></a> <a href="/u5277"> <img alt="http://i.imgur.com/tVJO9a5.png" src="http://i.imgur.com/vIdqWVb.png" /></a>
</div>
<div id="staffList">
<span style="color: rgb(185, 230, 5);"><strong><span style="font-size: 13px;"><span style="text-decoration: underline;">RP MODERATORS</span></span></strong></span><a href="/u6480"><br /> <img alt="http://i.imgur.com/H6heUyJ.png" src="http://i.imgur.com/TdEXXl8.png" /></a> <a href="/u6607"> <img alt="http://i.imgur.com/7O2p743.png" src="http://i.imgur.com/UWiryTh.png" /></a>
<div style="color: rgb(255, 0, 0); text-align: center;">
<!-- 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>
</div>
</div>
.
.
Facebook
Twitter
Pinterest
Youtube
