How do I move the FB login button?

=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!
 

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>
 

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
 

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.
 

ineedhelp

Well-known 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>
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?
 

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" />
 
Top