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

How do I move the FB login button?

Discussion in 'XenForo Questions and Support' started by =MGN=RedEagle, Apr 24, 2011.

  1. =MGN=RedEagle

    =MGN=RedEagle Well-Known Member

    Hey guys,

    I would like to make a copy of the Facebook login button and paste it below the sign up button. Do you know how I would do that? Also, I would like to make another copy of the "Watch Thread" button.

    Loving Xenforo and this great community!

    Thanks for all the help!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Moved from development questions.

    For the Facebook login button, add this to EXTRA.css:

    Code:
    /* Add Facebook login button to visitor panel */
    .cta_fbButton {
    margin: 10px 30px;
    text-align: center;
    }
    Edit the sidebar_visitor_template as follows:
    Code:
    <div class="section loginButton">
    <div class="secondaryContent">
    <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:phrase sign_up_now}</a></label>
    
    <xen:if is="{$xenOptions.facebookAppId}">
    <div class="cta_fbButton">
    <a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a>
    </div>
    </xen:if>
    </div>
    </div>
    You didn't say what it was you wanted to do with the Watch Thread link.
    This is the code for it:

    Code:
    <xen:if is="{$canWatchThread}">
        <a href="{xen:link 'threads/watch-confirm', $thread}" class="OverlayTrigger" data-cacheOverlay="false">{xen:if $thread.thread_is_watched, '{xen:phrase unwatch_thread}', '{xen:phrase watch_thread}'}</a>
    </xen:if>
    
     
  3. =MGN=RedEagle

    =MGN=RedEagle Well-Known Member

    Oops, my bad, what I meant to say is I would like to put a FB login next to the watch thread button.
     
  4. Euroman

    Euroman Active Member

    I like to move the facebook login to.

    Just under the signup now button. But I can't find the extra.css is there a step by step manual for it? For dummies? :D
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    EXTRA.css is a default blank template for entering your own custom CSS.

    Just search for the template in the ACP.
     
  6. ineedhelp

    ineedhelp Well-Known Member

    Ok so I've added the code into the EXTRA.css as described above.

    The sidebar is actually called: sidebar_visitor_panel

    I've added the code as above, which makes the template look like this:

    Code:
    <xen:if is="{$visitor.user_id}">
     
    <div class="section visitorPanel">
        <div class="secondaryContent">
     
            <xen:avatar user="$visitor" size="m" img="true" />
         
            <div class="visitorText">
                <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>     
                <div class="stats">
                <xen:hook name="sidebar_visitor_panel_stats">
                    <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                    <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                    <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
                </div>
                </xen:hook>
            </div>
         
        </div>
    </div>
     
    <xen:else />
     
     
    <div class="section loginButton">
    <div class="secondaryContent">
    <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:phrase sign_up_now}</a></label>
     
    <xen:if is="{$xenOptions.facebookAppId}">
    <div class="cta_fbButton">
    <a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a>
    </div>
    </xen:if>
    </div>
    </div>
    </xen:if>
     
    <xen:include template="ad_sidebar_below_visitor_panel" />
    My template also has this at the end:
    Code:
    </xen:if>
     
    <xen:include template="ad_sidebar_below_visitor_panel" />
    Do I keep it or delete it?
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Keep those two lines.

    For reference, this is how a modified sidebar_visitor_panel template should look:
    Code:
    <xen:if is="{$visitor.user_id}">
     
    <div class="section visitorPanel">
        <div class="secondaryContent">
       
            <xen:avatar user="$visitor" size="m" img="true" />
           
            <div class="visitorText">
                <h2>{xen:phrase signed_in_as_x_sidebar, 'name={xen:helper username, $visitor, 'NoOverlay'}'}</h2>       
                <div class="stats">
                <xen:hook name="sidebar_visitor_panel_stats">
                    <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                    <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                    <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
                </div>
                </xen:hook>
            </div>
           
        </div>
    </div>
     
    <xen:else />
     
    <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>
     
            <xen:if is="{$xenOptions.facebookAppId}">
                <div class="cta_fbButton">
                    <a href="{xen:link register/facebook, '', 'reg=1'}" class="fbLogin"><span>{xen:phrase login_with_facebook}</span></a>
                </div>
            </xen:if>
     
        </div>
    </div>
     
    </xen:if>
     
    <xen:include template="ad_sidebar_below_visitor_panel" />
     
    ineedhelp likes this.

Share This Page