• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Unmaintained XBL, PSN, and Steam profiles with Images 1.1

No permission to download
If you're upgrading this add-on, PLEASE, look at the bottom of this page for the upgrade notes and instructions

What Is This?
Adds a simple icon to link to a member's console specific profile. For example Playstation, Xbox Live, and Steam.

What does it look like?
Flowers and Butterflies! I'm just kidding. It's the basic logos. Here take a gander on my site or this image here
Untitled2.jpg

HOW HOW HOW?
1. a. Extract and upload the game_images folder to your forum directory.
1. b. You must create customer user fields for each one! I will demonstrate how to make one custom user field. You must replicate it and change the fields for the the console.
A. Admin Panel > Users > Custom User Fields > +Create New Field.
B. Fill out the following fields specified in the image below and then save.
Untitled.jpg
C. Now Repeat this but replace Field ID, Title, and Description with Steam and PSN
Note: The Field ID is very important! Whatever you set that as must be called to from the code! You can put anything you want! I recommend just being general with this use of it and say 'xbox' 'PSN' and 'Steam' [case sensitive with the code provided below]
2. Now you must add the code where it needs to be placed!
C. Admin panel > Appearance > Templates > Search: Message_User_Info and edit
D. Find

Code:
<xen:if is="@messageShowCustomFields AND {$user.customFields}">
Add This Above it.

Code:
<div class="ConsoleContainer">


<xen:if is="{$user.customFields.psn_id}">
<a href="http://us.playstation.com/playstation/psn/visit/profiles/{$user.customFields.psn_id}" target="_new" class="OXYgames psn"/><span><img src="http://fp.profiles.us.playstation.com/playstation/psn/pid/{$user.customFields.psn_id}.png" onerror="this.style.display='none';"></span></a>
</xen:if>

<xen:if is="{$user.customFields.xboxid}">
<a href="http://live.xbox.com/en-US/Profile?Gamertag={$user.customFields.xboxid}" target="_new" class="OXYgames xbox"/><span><div class="xboxcontainer"><div class="left2"><embed src="http://gamercard.xbox.com/en-US/{$user.customFields.xboxid}.card" width="200px" height="135px"></div><div class="right2"><img src="http://avatar.xboxlive.com/avatar/{$user.customFields.xboxid}/avatar-body.png" width="68px" height="135px"></div></div></span></a>
</xen:if>

<xen:if is="{$user.customFields.SteamID}">
<a href="http://steamcommunity.com/id/{$user.customFields.SteamID}" target="_new" class="OXYgames steam"/><span><iframe src="/game_images/steamwidget.php?SteamID={$user.customFields.SteamID}" scrolling="no" frameborder="0" height="120" width="230">{$user.customFields.SteamID}</iframe></span></a>
</xen:if>
</div>
[/INDENT]
Save!

3. Add the CSS to EXTRA.css
Paste at the top or bottom



Code:
/* XBL, PSN, Steam */

.OXYgames { height:28px;
background-image:url('/game_images/Game-Icons.png');
float:left; }

a.OXYgames span {display:none;
padding:2px 3px;
margin-left:5px;
margin-bottom: 150px;
width:268px; height:
135px;}

a.OXYgames:hover span{ display:inline;
position:absolute;
z-index: 10000;}

a.xbox span {display:none;
padding:2px 3px;
margin-left:5px;
margin-bottom: 150px;
width:268px; height:
135px;}

a.xbox:hover span{ display:inline;
position:absolute;
background: #3a3838;
color:#6c6c6c;
z-index: 10000;}

.ConsoleContainer {width:100%;
height: 28px;
overflow: hidden;}


.psn { width: 25px;
height: 25px;
background-position: -1px 0;
}

.xbox { width: 25px;
height: 25px;
background-position: -28px 0;
}

.steam { width: 25px;
height: 25px;
background-position: -56px 0;
}


.xboxcontainer {width:270px; overflow: hidden;}

.left2 { width: 75%; float: left;}

.right2 { width: 25%; float: right;}

/* END XBL, PSN, Steam */

Explained:
{$user.customFields.xbox}
I got the xbox text for the Field ID when I created the custom field. So whatever is in "Field ID" must replace the green text above in order to grab that specific data.
calls to the field that's been filled out by the user and prints/displays/shows it.

<xen:if is="{$user.customFields.xbox}">
Checks to see if the xbox user field is filled out.
So if we apply this to the end of a URL that requires a user id it'll link us to their profile :)
Without this a the image will show up on everyone's profiles whether they entered their ID or not. This is no bueno (no good), so please be sure to include this in the code.

Explaining it again!
If I enter my (fake XBL) id as 0xy then the URL above will translate to to

My Experience
I'm a novice this was all done through observations from other code, searching, trial and error!
I know there's a better way to table the images. I will eventually use CSS for the whole thing but this is a rushed/simple explanation.

Disclaimer
I'm not responsible if something screws up!

Contributions and Donations
Save your monies!!! All I want is people to positively contribute towards this. Add anything you want to it or re-work the whole thing and make it your own. It's honestly not that difficult...

Support and Donations
I produced this as a free add-on (no point in charging since it's simple!). As a free add-on I can't dedicate my life to it, but that should not be the case in any situation since this is SIMPLE! I will help when and where I can but do not take offense if I do not reply promptly!

I've decided that if you are willing to contribute anything for my work. I ask that you visithttp://www.charitynavigator.org/ and donate whatever amount you were going to donate to me to a charity with a good rating there (4 stars).

---------------------
Upgrade from 1.1 to 1.2
1. Download the resource and upload to overwrite game_images/steamwidget.php
2. Go to message_user_info
3. Find
Code:
<xen:if is="{$user.customFields.SteamID}">
<a href="http://steamcommunity.com/id/{$user.customFields.SteamID}" target="_new" class="OXYgames steam"/><span><iframe src="/game_images/steamwidget.php?SteamID={$user.customFields.SteamID}" scrolling="no" frameborder="0" height="100" width="200">{$user.customFields.SteamID}</iframe></span></a>
</xen:if>
replace with
Code:
<xen:if is="{$user.customFields.SteamID}">
<a href="http://steamcommunity.com/id/{$user.customFields.SteamID}" target="_new" class="OXYgames steam"/><span><iframe src="/game_images/steamwidget.php?SteamID={$user.customFields.SteamID}" scrolling="no" frameborder="0" height="120" width="230">{$user.customFields.SteamID}</iframe></span></a>
</xen:if>

Upgrade from 1.0 to 1.1
For those updating from version 1.0 please delete the game_images folder and remove this from your message_user_info template before continuing

HTML:
<table><tr><td><xen:if is="{$user.customFields.PSN}"><a href="http://us.playstation.com/playstation/psn/visit/profiles/{$user.customFields.PSN}" target="_new"><img src="/game_images/PSN.png" width="25px" height="23px" /></a><br/></xen:if></td><td><xen:if is="{$user.customFields.xboxid}"><a href="http://live.xbox.com/en-US/Profile?Gamertag={$user.customFields.xboxid}" target="_new"/><img src="/game_images/XBL.png" width="25px" height="23px"></a></xen:if></td><td><xen:if is="{$user.customFields.Steam}"><a href="http://steamcommunity.com/id/{$user.customFields.Steam}" target="_new"/><img src="/game_images/steam.png" width="25px" height="23px"></a></xen:if></td></tr></table>
Author
0xym0r0n
Downloads
207
First release
Last update
Rating
5.00 star(s) 3 ratings

More resources from 0xym0r0n

Latest updates

  1. Steam Fix

    1. Fix steam 503 errors 2. Create a slightly more appealing Steam widget style.
  2. Update 1

    1. Create sprite image for the game icons. 2. Created self-hosted steam profile widget 3. Added...

Latest reviews

Simple and elegant.
Awesome mod! :)
Easy to follow instructions, perfect for a gaming site. Thanks for the submission.