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

[Breixo]

Hi! I'm missing previous widget, though that was a good way to make it easy for visitors to register at the forum:

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...

<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...
Thanks in advance for your help!

 

[SyTry]

Hello,

You can use [cXF] Login Widget by @BassMan :

• https://xenforo.com/community/resources/cxf-login-widget.6517/

Regards, SyTry

 

[Breixo]

Hello,

You can use [cXF] Login Widget by @BassMan :

• https://xenforo.com/community/resources/cxf-login-widget.6517/

Regards, SyTry

Thanks, that might work

 

[Breixo]

I've been playing around with html+css, copy&paste and got this:


Proble
Appearance > Widgets > Create > HTML
Added at template:
+ Advanced mode

<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

 

[SyTry]

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

<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

Hello,

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

Regards, SyTry

 

[Breixo]

Hello,

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

Regards, SyTry

Not sure, what can be the benefits of making an addon for this?

Btw, I personalized css a bit:

<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

 

[SyTry]

Not sure, what can be the benefits of making an addon for this?

Btw, I personalized css a bit:

<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

Not sure, what can be the benefits of making an addon for this?

Btw, I personalized css a bit:

<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

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.