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

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

Let guests sign up or sign in through the sidebar visitor planel.

  1. DRE
    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.jpg
    auth2.jpg
    auth4.jpg
    auth3.jpg


    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.
    vfustar, boooooo, Antich and 11 others like this.

Recent Updates

  1. Changed Steam Link

Recent Reviews

  1. MsJacquiiC
    MsJacquiiC
    5/5,
    Version: 1.0
    Great resource! Thanks for sharing ;)
  2. Gabriel Pinho
    Gabriel Pinho
    5/5,
    Version: 1.0
    thanks!
  3. Adam Howard
    Adam Howard
    5/5,
    Version: 1.0
    Sometimes it is the little things that add so much. This is one of them. :)
  4. Chris D
    Chris D
    5/5,
    Version: 1.0
    Great work.