XF 2.0 Missing "sign up now" widget from XF1 at XF2

Breixo

Breixo

Well-known member
Hi! I'm missing previous widget, though that was a good way to make it easy for visitors to register at the forum:
1538415544559.webp
It was also better when Twitter&Facebook easy login where there too.
Any reason why they're not there anymore?

Was trying to figure out how to code a widget just for visitors.
Shouldn't be so hard...

Code: 
<xf:if is="!$xf.visitor.user_id">
   <xf:widget key="sidebar_signup" />
</xf:if>

But don't know enough to add the html code for the buttons and their CSS... :rolleyes:
Thanks in advance for your help!
 
Sort by date Sort by votes
I've been playing around with html+css, copy&paste and got this:
1538685273304.webp

Proble
Appearance > Widgets > Create > HTML
Added at template:
+ Advanced mode
Code: 
<xf:if is="!$xf.visitor.user_id">
<ul class="listHeap">
<li><a href="/register/"><button class="button button--cta button--icon button--icon--login rippleButton">
    <span class="button-text">Sign up!</span>
    <div class="ripple-container">
    </div></button></a></li></ul>
    <ul class="listHeap">
   
<li><a href="/register/connected-accounts/facebook/?setup=1" class="button--provider button--provider--facebook button rippleButton">
<span class="button-text">
Facebook</span><div class="ripple-container">
</div>
</a>
</li></ul>
        <ul class="listHeap">
<li><a href="/register/connected-accounts/twitter/?setup=1" class="button--provider button--provider--twitter button rippleButton"><span class="button-text">
Twitter</span>
</a>
</li></ul>

<ul class="listHeap"><li><a href="/register/connected-accounts/google/?setup=1" class="button--provider button--provider--google button rippleButton"><span class="button-text">
Google</span>
<div class="ripple-container">
</div>
</a>
</li>
    </ul>
   
</xf:if>

PS: probably not the fanciest way, it would be better to center the buttons, but that's beyond my knowledge, any styling upgrade appreciated :)
 
Last edited:
Upvote 0 Downvote
Breixo said:
I've been playing around with html+css, copy&paste and got this:
View attachment 184768

Proble
Appearance > Widgets > Create > HTML
Added at template:
+ Advanced mode
Code: 
<xf:if is="!$xf.visitor.user_id">
<ul class="listHeap">
<li><a href="/register/"><button class="button button--cta button--icon button--icon--login rippleButton">
    <span class="button-text">Sign up!</span>
    <div class="ripple-container">
    </div></button></a></li></ul>
    <ul class="listHeap">
  
<li><a href="/register/connected-accounts/facebook/?setup=1" class="button--provider button--provider--facebook button rippleButton">
<span class="button-text">
Facebook</span><div class="ripple-container">
</div>
</a>
</li></ul>
        <ul class="listHeap">
<li><a href="/register/connected-accounts/twitter/?setup=1" class="button--provider button--provider--twitter button rippleButton"><span class="button-text">
Twitter</span>
</a>
</li></ul>

<ul class="listHeap"><li><a href="/register/connected-accounts/google/?setup=1" class="button--provider button--provider--google button rippleButton"><span class="button-text">
Google</span>
<div class="ripple-container">
</div>
</a>
</li>
    </ul>
  
</xf:if>

PS: probably not the fanciest way, it would be better to center the buttons, but that's beyond my knowledge, any styling upgrade appreciated :)
Click to expand...
Hello,

Do you want an add-on with this template (widget) ?

Regards, SyTry
 
Upvote 0 Downvote
SyTry said:
Hello,

Do you want an add-on with this template (widget) ?

Regards, SyTry
Click to expand...
Not sure, what can be the benefits of making an addon for this?

Btw, I personalized css a bit:
Code: 
<xf:if is="!$xf.visitor.user_id">
<ul class="listHeapSidebarRegister">
<li><a href="/register/"><button class="button button--cta button--icon button--icon--login rippleButton">
    <span class="button-text">Registro</span>
    <div class="ripple-container">
    </div></button></a></li>    
<li><a href="/register/connected-accounts/facebook/?setup=1" class="button--provider button--provider--facebook button rippleButton">
<span class="button-text">
Facebook</span><div class="ripple-container">
</div>
</a>
</li>
<li><a href="/register/connected-accounts/twitter/?setup=1" class="button--provider button--provider--twitter button rippleButton"><span class="button-text">
Twitter</span>
</a>
</li>
<li><a href="/register/connected-accounts/google/?setup=1" class="button--provider button--provider--google button rippleButton"><span class="button-text">
Google</span>
<div class="ripple-container">
</div>
</a>
</li>
</ul>
    <style type="text/css">
        .listHeapSidebarRegister{
            text-align: center;
            list-style-type:none;
            clear:both;
            padding:0;
        }
        .listHeapSidebarRegister li{
            padding:0;
            margin: 9px 0;
        }
    </style>
  
</xf:if>
CSS can be placed within the widget or at the styles sheet.
Hope this helps :)
 
Last edited:
Upvote 0 Downvote
Breixo said:
Not sure, what can be the benefits of making an addon for this?

Btw, I personalized css a bit:
Code: 
<xf:if is="!$xf.visitor.user_id">
<ul class="listHeapSidebarRegister">
<li><a href="/register/"><button class="button button--cta button--icon button--icon--login rippleButton">
    <span class="button-text">Registro</span>
    <div class="ripple-container">
    </div></button></a></li>   
<li><a href="/register/connected-accounts/facebook/?setup=1" class="button--provider button--provider--facebook button rippleButton">
<span class="button-text">
Facebook</span><div class="ripple-container">
</div>
</a>
</li>
<li><a href="/register/connected-accounts/twitter/?setup=1" class="button--provider button--provider--twitter button rippleButton"><span class="button-text">
Twitter</span>
</a>
</li>
<li><a href="/register/connected-accounts/google/?setup=1" class="button--provider button--provider--google button rippleButton"><span class="button-text">
Google</span>
<div class="ripple-container">
</div>
</a>
</li>
</ul>
    <style type="text/css">
        .listHeapSidebarRegister{
            text-align: center;
            list-style-type:none;
            clear:both;
            padding:0;
        }
        .listHeapSidebarRegister li{
            padding:0;
            margin: 9px 0;
        }
    </style>
 
</xf:if>
CSS can be placed within the widget or at the styles sheet.
Hope this helps :)
Click to expand...
Breixo said:
Not sure, what can be the benefits of making an addon for this?

Btw, I personalized css a bit:
Code: 
<xf:if is="!$xf.visitor.user_id">
<ul class="listHeapSidebarRegister">
<li><a href="/register/"><button class="button button--cta button--icon button--icon--login rippleButton">
    <span class="button-text">Registro</span>
    <div class="ripple-container">
    </div></button></a></li>   
<li><a href="/register/connected-accounts/facebook/?setup=1" class="button--provider button--provider--facebook button rippleButton">
<span class="button-text">
Facebook</span><div class="ripple-container">
</div>
</a>
</li>
<li><a href="/register/connected-accounts/twitter/?setup=1" class="button--provider button--provider--twitter button rippleButton"><span class="button-text">
Twitter</span>
</a>
</li>
<li><a href="/register/connected-accounts/google/?setup=1" class="button--provider button--provider--google button rippleButton"><span class="button-text">
Google</span>
<div class="ripple-container">
</div>
</a>
</li>
</ul>
    <style type="text/css">
        .listHeapSidebarRegister{
            text-align: center;
            list-style-type:none;
            clear:both;
            padding:0;
        }
        .listHeapSidebarRegister li{
            padding:0;
            margin: 9px 0;
        }
    </style>
 
</xf:if>
CSS can be placed within the widget or at the styles sheet.
Hope this helps :)
Click to expand...
Via the add-on I can make options to enable registration via Google, Facebook, etc. The CSS can be modified via the style properties. If you have any suggestions ! ;)
A very simple add-on.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

N
  • Question Question
XF 2.3 Upgrade XFRM from XF1 to XF2 (Unknown widget 'xfrm_forum_overview_new_resources' )
Replies
5
Views
72
Jeremy P
Jeremy P
Amaury
As designed "Sign up now!" Button Missing Title Case
Replies
4
Views
676
Amaury
Amaury
planetzu
  • Question Question
XF 1.2 Linking 'Sign Up Now' Button to the Registration Form Page
2
Replies
20
Views
6K
TsinJu
TsinJu
F
  • Question Question
New style for button "Sign up now"
Replies
3
Views
673
fredrikse
F
erich37
  • Suggestion Suggestion
Lack of interest header drop down / orange "Sign Up Now" button
Replies
0
Views
920
erich37
erich37
Back
Top Bottom