Facebook, Twitter, Google and Steam in Sidebar Visitor Panel

Unmaintained Facebook, Twitter, Google and Steam in Sidebar Visitor Panel 1.0

No permission to download
This Resource is Unsupported - 7/15/2012

This template modification makes sure that all your social network login buttons are evenly spaced. Facebook, Twitter, Google and Steam, in that order, in both your sidebar_visitor_panel, navigation_visitor_tab_link, account_wrapper, helper_login_form and login_bar_form template. I made a Facebook, Twitter, Google and Steam Sprite using CyberAP's Photoshop PSD File, by replacing the VK icon. The modified sprite is attached to this resource as the Download.

Perquisites

Your site should already be associated with Facebook. If not, click here to learn how. You need TMS - Template Modification System, Social Network Authentication (Twitter, Google, VK.com) by guiltar and Steam Authentication & Integration by HowlChrgLazer. This guide is a combination of both TMS and template edits because I installed TMS for the first time today and haven't reverted any of my templates yet.


Screenshots

auth1.webp

auth2.webp

auth4.webp

auth3.webp



Directions (without Steam)


1. No need to download anything, just have your prequisites already installed, excluding Morgan's Steam mod.

2. Go to AdminCP/Appearance/Styles/Template Modifications
Create Template Modification: Social Sidebar Visitor Panel
Template: sidebar_visitor_panel
String Replace this:
Code:
<div class="section loginButton">
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
With this:
Code:
<div class="section loginButton">
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
<div align="center">
<xen:if is="{$xenOptions.facebookAppId}">
<li><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.twitterConsumerKey}">
<li><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin"><span>{xen:phrase social_login_with_twitter}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.googleAppId}">
<li><a href="{xen:link register/google, '', 'reg=1'}" class="googleLogin"><span>{xen:phrase social_login_with_google}</span></a></li>
</xen:if> </div>
Save and Exit






Directions (with Steam)

1. Download the file attach to this resource. Upload buttons-sprite.png to styles/social/ folder on your server.

2. Go to AdminCP/Appearance/Phrases/Create New Phrase
Title: social_login_with_steam
Phrase text: Login with Steam
Save phrase.

3. Go to AdminCP/Appearance/Styles/Templates
Open template: steam_login_bar_item
Delete everything.
Save and Exit

4. Go to AdminCP/Appearance/Styles/Templates
Open template: steam_navigation_visitor_tab_link
Delete everything.
Save and Exit

5. Go to AdminCP/Appearance/Styles/Templates
Open template: steam_account_wrapper_sidebar_settings
Delete everything.
Save and Exit

6. Go to AdminCP/Appearance/Styles/Template Modifications
Create Template Modification: Social Sidebar Visitor Panel Template: sidebar_visitor_panel
String Replace this:
Code:
<div class="section loginButton">
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
With this:
Code:
<div class="section loginButton">
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
<div align="center">
<xen:if is="{$xenOptions.facebookAppId}">
<li><a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.twitterConsumerKey}">
<li><a href="{xen:link register/twitter, '', 'reg=1'}" class="twitterLogin"><span>{xen:phrase social_login_with_twitter}</span></a></li>
</xen:if>
<xen:if is="{$xenOptions.googleAppId}">
<li><a href="{xen:link register/google, '', 'reg=1'}" class="googleLogin"><span>{xen:phrase social_login_with_google}</span></a></li>
</xen:if>
<li><a href="{xen:link register/steam, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_steam}</span></a></li>
</div>
Save and Exit

7. Go to AdminCP/Appearance/Styles/Template Modifications
Search helper_login_form - social_helper_login_form for:
Code:
<xen:if is="{$xenOptions.vkAppId}">
        <dt></dt>
        <dd><a href="{xen:link register/vk, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_vk}</span></a></dd>
    </xen:if>
Delete.
Now right below this code:
Code:
<span>{xen:phrase social_login_with_google}</span></a></dd>
    </xen:if>
Paste this:
Code:
<dt></dt><dd><a href="{xen:link register/steam, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_steam}</span></a></dd>
Save and Exit

9. Go to AdminCP/Appearance/Styles/Template Modifications
Search login_bar_form - social_login_bar_item for:
Code:
    <xen:if is="{$xenOptions.vkAppId}">
        <li><a href="{xen:link register/vk, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_vk}</span></a></li>
    </xen:if>
Replace with:
Code:
        <li><a href="{xen:link register/steam, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_steam}</span></a></li>
Save and Exit

10. Go to AdminCP/Appearance/Styles/Template Modifications
Search navigation_visitor_tab - social_navigation_visitor_tab_link for:
Code:
<xen:if is="{$xenOptions.vkAppId}"><li><a href="{xen:link account/vk}">{xen:phrase social_vk_integration}</a></li></xen:if>
Delete.
Now at the very bottom paste this code:
Code:
<li><a href="{xen:link account/steam}">{xen:phrase steam_integration}</a></li>
Save and Exit.

11. Go to AdminCP/Appearance/Styles/Template Modifications
Search account_wrapper - social_account_wrapper_sidebar_settings for:
Code:
<xen:if is="{$xenOptions.vkAppId}"><li><a class="{xen:if "{$selectedKey} == 'account/vk'", 'secondaryContent', 'primaryContent'}" href="{xen:link account/vk}">{xen:phrase social_vk_integration}</a></li></xen:if>
Delete.
Now at the very bottom paste this code:
Code:
<li><a  class="{xen:if "{$selectedKey} == 'account/steam'", 'secondaryContent', 'primaryContent'}"  href="{xen:link account/steam}">{xen:phrase steam_integration}</a></li>
Save and Exit.
Your done.
Author
DRE
Downloads
298
Views
1,423
First release
Last update

Ratings

5.00 star(s) 4 ratings

More resources from DRE

Latest updates

  1. Changed Steam Link

    Changed Steam Link at Icewolf's suggestion.

Latest reviews

Great resource! Thanks for sharing ;)
thanks!
Sometimes it is the little things that add so much. This is one of them. :)
Great work.
Back
Top Bottom