• 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?

=MGN=RedEagle

Well-known member
#1
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
#2
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
#4
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
#5
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
#6
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
#7
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" />