1. 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

Images linking to XBL, PSN, and Steam profiles from the user postbit

  1. 0xym0r0n
    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>
    MLB, CritiKiL, DarkGizmo and 4 others like this.

Recent Updates

  1. Steam Fix
  2. Update 1

Recent Reviews

  1. MagnusB
    MagnusB
    5/5,
    Version: 1.1
    Simple and elegant.
  2. DarkGizmo
    DarkGizmo
    5/5,
    Version: 1.0
    Awesome mod! :)
  3. Sheldon
    Sheldon
    5/5,
    Version: 1.0
    Easy to follow instructions, perfect for a gaming site. Thanks for the submission.