Bring Registration forward in Xenforo

So today we are going to discuss how to bring the registration up in a bubble instead of going to a new page to do this.

It’s quite simple only takes a few moments and make your forum very unique compared to others!

So let’s go ahead and log into our forum Admin CP and navigate our way to Appearances and then on to templates. You are going to be looking for: sidebar_visitor_panel  it looks like so:


Click on that and you will see this page:



Now we are going to make some simple edits and we will have the desired look that we want. So let’s look for the following piece of code:

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

We are going to replace this with the following code:

<div class="section loginButton">
<div class="secondaryContent">
<label id="SignupButton"><a href="{xen:link register}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>

So that it looks like this:


Make sure that you click save!

Now we are going to go back to templates and then look for register_form  like so:


Click on that and you will see the following page:


Now we are going to look for the following code snippet:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"

We are going to replace it with the following:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator" id="pageSignUp"

Now it will look like the following image:


So make sure that you have saved this! From there we will be moving back to Templates and then on to Extra.css. It looks like the following image:


So we are going to add the following code to the end of Extra.css:

.xenOverlay #pageSignUp
@property "formOverlay";
color: #eee;
background: rgba(0,0,0, 0.75);
padding: 15px 25px;
border: 20px solid rgba(0,0,0, 0.25);
border-radius: 20px;
box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
_zoom: 1;
@property "/formOverlay";
margin: 0;

.xenOverlay #pageSignUp .heading
@property "formOverlayHeading";
font-weight: bold;
font-size: 12pt;
color: @primaryLightest;
background-color: @primaryMedium;
padding: 5px 10px;
margin-bottom: 10px;
border: 1px solid @primaryDark;
border-radius: 5px;
@property "/formOverlayHeading";

Once you do that it will look like this:


Now make sure that you save! When you go to your forums go ahead and click register and this is what you should see:


Just like that!

If you have any questions comments or concerns please feel free to ask away!

Looking for quality XenForo hosting? Check out Arvixe Web Solutions

Tags: , , , , , , , | Posted under XenForo | RSS 2.0

Author Spotlight

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *