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
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:
With this:
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:
With this:
Save and Exit
7. Go to AdminCP/Appearance/Styles/Template Modifications
Search helper_login_form - social_helper_login_form for:
Delete.
Now right below this code:
Paste this:
Save and Exit
9. Go to AdminCP/Appearance/Styles/Template Modifications
Search login_bar_form - social_login_bar_item for:
Replace with:
Save and Exit
10. Go to AdminCP/Appearance/Styles/Template Modifications
Search navigation_visitor_tab - social_navigation_visitor_tab_link for:
Delete.
Now at the very bottom paste this code:
Save and Exit.
11. Go to AdminCP/Appearance/Styles/Template Modifications
Search account_wrapper - social_account_wrapper_sidebar_settings for:
Delete.
Now at the very bottom paste this code:
Save and Exit.
Your done.
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
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>
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>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>
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>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>Now right below this code:
Code:
<span>{xen:phrase social_login_with_google}</span></a></dd>
</xen:if>
Code:
<dt></dt><dd><a href="{xen:link register/steam, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_steam}</span></a></dd>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>
Code:
<li><a href="{xen:link register/steam, '', 'reg=1'}" class="vkLogin"><span>{xen:phrase social_login_with_steam}</span></a></li>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>Now at the very bottom paste this code:
Code:
<li><a href="{xen:link account/steam}">{xen:phrase steam_integration}</a></li>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>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>Your done.
