Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Topic started by: i777Ares on December 17, 2010, 04:37:30 PM

Title: custom profile field pop up banners
Post by: i777Ares on December 17, 2010, 04:37:30 PM
xfire and steam

for Xfire:
add this to your index.css at the bottom
#xfire {width:16px; height: 16px; background-color:#000;}
#xfire a.small, #xfire a.small:visited { display:block; width:16px; height:16px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#xfire a img {border:0;}
#xfire a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#xfire a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#xfire a.small:hover .large {display:block; position:relative; top: -50px; left:200px; width:440px; height:111px; }


Then place this in your custom profile field
<div id="xfire">
<a class="small" href="#nogo" title="small image"><img src="/customicons/xfire.ico" title="small image" align=right />
<img class="large" src="http://miniprofile.xfire.com/bg/co/type/0/{INPUT}.png" title="large image" /></a>
</div>


for steam:
add this to your index.css at the bottom
#steam {width:16px; height: 16px; background-color:#000;}
#steam a.small, #steam a.small:visited { display:block; width:16px; height:16px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#steam a img {border:0;}
#steam a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#steam a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#steam a.small:hover .large {display:block; position:relative; top: -150px; left:200px; width:402px; height:246px; }


Then place this in your steam custom profile field
<div id="steam">
<a class="small" href="#nogo" title="small image"><img src="/customicons/steam.ico" title="small image"/>
<img class="large" src="http://www.site-jump.com/banners/mw2_1/steam_statimage.php?p={INPUT}&s=mw2_1
" title="large image" /></a>
</div>


now make new folder in your main directory called customicons and place the two images in the Attachment there.

now your done just add your xfire id in your profile
the steam one you will need your profile custom url witch you can set when you go to edit profile

now that that is done just hover your mouse over the icon for your banner to POP up