Customize Your Oxwall Join Page: Facebook Look (All oxwall versions)

This page contains different codes compatible with various Oxwall version and will be updated after every Oxwall platform update and please avoid using the code meant for a particular platform version in a different platform version as this may tamper the look of your join page. (e.g. Do not use a code made for Oxwall 1.5.1 in Oxwall 1.5.2 or otherwise)

Please Read How To Customize Your Oxwall Join Page (Facebook Look) before you proceed


Note: If you need a sign-in page or registration page that is similar to Facebook’s, you can simply purchase the Facebook Clone Plugin and customize it to your taste. It’s safer to use because the pages will not be affected by platform update.
Oxwall Codes For ow_system_plugins/views/controllers/join_index.html

Your site Should look like this.

Oxwall 1.7 (Current Oxwall Version)

{style}
{literal}
.reg-container{
overflow:hidden;
}
.reg-contents{
float:left;
width:48%;
padding:0px 5px;
overflow:hidden;
}
.reg-contents img{
max-width:100%;
}
.reg-contents .ow_superwide{
width:100%;
}
{/literal}
{/style}
<div class='reg-container'>
<div class='reg-contents'>
<p>Some Contents Here</p>
<img src='http://4.bp.blogspot.com/--ng3ZQsCeSU/URbNm8iq2II/AAAAAAAABtY/rq_R1pfiaIE/s1600/theme_image_38fd.png' />
<p>Some Contents Here</p>
<img src='http://4.bp.blogspot.com/-NmJiJR9cAm8/URbNS86dcFI/AAAAAAAABm0/2V_pKL3kO2w/s1600/City-Of-Hope-Music-And-Entertainment-Industry-Event-In-LA-12-June-2012-katy-perry-31134689-2560-1704.jpg' />
</div>
<div class='reg-contents'>
{block_decorator name="box" type="empty" addClass="ow_superwide ow_automargin"}
{if isset($notValidInviteCode)}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_not_valid_invite_code"}
{/block_decorator}
{else}
{if $step == 1}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_promo"}
{/block_decorator}{if !empty($joinConnectHook)}
{block_decorator name="box" addClass="ow_center" style="overflow:hidden;" iconClass='ow_ic_key' langLabel='base+join_connect_title'}
{foreach from=$joinConnectHook item='item'}
{$item}
{/foreach}
{/block_decorator}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_or"}
{/block_decorator}
{/if}
{/if}
{block_decorator name='box' type='empty' iconClass='ow_ic_user' langLabel='base+join_form_title'}{/block_decorator}
{form name=joinForm}
<table class="ow_table_1 ow_form">
{if $displayAccountType==true}
<tr class="{cycle values='ow_alt1,ow_alt2'} ow_tr_first ow_tr_last">
<td class="ow_label">
{label name='accountType'}
</td>
<td class="ow_value ow_center">
{input name='accountType'}
<div style="height:1px;">
</div>
{error name='accountType'}
</td>
<td class="ow_desc">
{question_description_lang name="accountType"}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{foreach from=$questionArray key='section' item='questions' name='section'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
{foreach from=$questions item='question' name='question'}
<tr class="{if !empty($question.trClass)}{$question.trClass}{/if} {if empty($section)}ow_tr_first{/if} {if $smarty.foreach.question.last && $question.name!='password'}ow_tr_last{/if}">
<td class="ow_label">
{label name=$question.name}
</td>
<td class="ow_value">
{input name=$question.name}
<div style="height:1px;">
</div>
{error name=$question.name}
</td>
<td class="ow_desc">
{question_description_lang name=$question.realName}
</td>
</tr>
{if $question.name=='password'}
<tr class="{if !empty($question.trClass) && $question.trClass == 'ow_alt1'}ow_alt2{else}ow_alt1{/if} {if $smarty.foreach.question.last}ow_tr_last{/if}">
<td class="ow_label">
{label name='repeatPassword'}
</td>
<td class="ow_value">
{input name='repeatPassword'}
<div style="height:1px;">
</div>
{error name='repeatPassword'}
</td>
<td class="ow_desc">
{question_description_lang name='repeatPassword'}
</td>
</tr>
{/if}
{/foreach}
{if !empty($section)}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{/foreach}
{if $isLastStep}
{if $display_photo}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_user_photo_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='userPhoto'}
</td>
<td class="ow_value">
{input name='userPhoto'}
<div style="height:1px;">
</div>
{error name='userPhoto'}
</td>
<td class="ow_desc">
{question_description_lang name='user_photo'}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_terms_of_use}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_terms_of_use_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='termOfUse'}
</td>
<td class="ow_value">
{input name='termOfUse'}
<div style="height:1px;">
</div>
{error name='termOfUse'}
</td>
<td class="ow_desc">
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_captcha}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_captcha_label"}</th></tr>
<tr class="{cycle name=captchaField values='ow_alt1,ow_alt2'} ow_tr_last" >
<td colspan="3" class="ow_center">
<div style='padding:10px;'>
{input name='captchaField'}
<div style="height:1px;">
</div>
{error name='captchaField'}
</div>
</td>
</tr>
{/if}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
</table>
<div class="clearfix">
<div class="ow_right">
{submit name='joinSubmit'}
</div>
</div>
{/form}
{/if}
{/block_decorator}
</div>
</div>
*Please follow the guidelines in this post for 1.7 mod customization

Oxwall 1.6


{style}
{literal}
.reg-contents{
float:left;
width:48%;
margin:0px; 20px auto;
overflow:hidden;
}
.reg-contents img{
max-width:100%;
}
{/literal}
{/style}
<div class='reg-contents'>
<p>Some Contents Here</p>
<img src='IMAGE 1' />
<p>Some Contents Here</p>
<img src='IMAGE 2' />
</div>
<div class='reg-contents'>
{block_decorator name="box" type="empty" addClass="ow_superwide ow_automargin"}
{if isset($notValidInviteCode)}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_not_valid_invite_code"}
{/block_decorator}
{else}
{if $step == 1}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_promo"}
{/block_decorator}
{if !empty($joinConnectHook)}
{block_decorator name="box" addClass="ow_center" style="overflow:hidden;" iconClass='ow_ic_key' langLabel='base+join_connect_title'}
{foreach from=$joinConnectHook item='item'}
{$item}
{/foreach}
{/block_decorator}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_or"}
{/block_decorator}
{/if}
{/if}
{block_decorator name='box' type='empty' iconClass='ow_ic_user' langLabel='base+join_form_title'}{/block_decorator}
{form name=joinForm}
<table class="ow_table_1 ow_form">
{if $displayAccountType==true}
<tr class="{cycle values='ow_alt1,ow_alt2'} ow_tr_first ow_tr_last">
<td class="ow_label">
{label name='accountType'}
</td>
<td class="ow_value ow_center">
{input name='accountType'}
<div style="height:1px;">
</div>
{error name='accountType'}
</td>
<td class="ow_desc">
{question_description_lang name="accountType"}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{foreach from=$questionArray key='section' item='questions' name='section'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
{foreach from=$questions item='question' name='question'}
<tr class="{if !empty($question.trClass)}{$question.trClass}{/if} {if empty($section)}ow_tr_first{/if} {if $smarty.foreach.question.last && $question.name!='password'}ow_tr_last{/if}">
<td class="ow_label">
{label name=$question.name}
</td>
<td class="ow_value">
{input name=$question.name}
<div style="height:1px;">
</div>
{error name=$question.name}
</td>
<td class="ow_desc">
{question_description_lang name=$question.realName}
</td>
</tr>
{if $question.name=='password'}
<tr class="{if !empty($question.trClass) && $question.trClass == 'ow_alt1'}ow_alt2{else}ow_alt1{/if} {if $smarty.foreach.question.last}ow_tr_last{/if}">
<td class="ow_label">
{label name='repeatPassword'}
</td>
<td class="ow_value">
{input name='repeatPassword'}
<div style="height:1px;">
</div>
{error name='repeatPassword'}
</td>
<td class="ow_desc">
{question_description_lang name='repeatPassword'}
</td>
</tr>
{/if}
{/foreach}
{if !empty($section)}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{/foreach}
{if $isLastStep}
{if $display_photo}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_user_photo_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='userPhoto'}
</td>
<td class="ow_value">
{input name='userPhoto'}
<div style="height:1px;">
</div>
{error name='userPhoto'}
</td>
<td class="ow_desc">
{question_description_lang name='user_photo'}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_terms_of_use}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_terms_of_use_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='termOfUse'}
</td>
<td class="ow_value">
{input name='termOfUse'}
<div style="height:1px;">
</div>
{error name='termOfUse'}
</td>
<td class="ow_desc">
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_captcha}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_captcha_label"}</th></tr>
<tr class="{cycle name=captchaField values='ow_alt1,ow_alt2'} ow_tr_last" >
<td colspan="3" class="ow_center">
<div style='padding:10px;'>
{input name='captchaField'}
<div style="height:1px;">
</div>
{error name='captchaField'}
</div>
</td>
</tr>
{/if}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
</table>
<div class="clearfix">
<div class="ow_right">
{submit name='joinSubmit'}
</div>
</div>
{/form}
{/if}
{/block_decorator}</div>

*Please read this post for 1.6 mod customization

Oxwall 1.5.0 & Oxwall 1.5.1


<table><td width="50%><div class="_7d _6_ _76">
<h1 class="inlineBlock _4-dt _6n _6s _6v" style="padding: 42px 0px 0px; font-size: 28px; line-height: 36px;">
Enjoy The Freedom Of Social Network!</h1>
<div class="mtl pbm">
<p font-size: 16px;><h4>
Join Millions of people having fun and making new friends on Nairatrain.com every day.</h4>
<p><img src='YOUR IMAGE URL HERE'/></td><td width='50%'> {block_decorator name="box" type="empty" addClass="ow_superwide ow_automargin"}
{if isset($notValidInviteCode)}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_not_valid_invite_code"}
{/block_decorator}
{else}
{if $step == 1}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_promo"}
{/block_decorator}
{if !empty($joinConnectHook)}
{block_decorator name="box" addClass="ow_center" style="overflow:hidden;" iconClass='ow_ic_key' langLabel='base+join_connect_title'}
{foreach from=$joinConnectHook item='item'}
{$item}
{/foreach}
{/block_decorator}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_or"}
{/block_decorator}
{/if}
{/if}
{block_decorator name='box' iconClass='ow_ic_user' langLabel='base+join_form_title'}{/block_decorator}
{form name=joinForm}
<table class="ow_table_1 ow_form">
{if $diaplayAccountType==true}
<tr class="{cycle values='ow_alt1,ow_alt2'} ow_tr_first ow_tr_last">
<td class="ow_label">
{label name='accountType'}
</td>
<td class="ow_value ow_center">
{input name='accountType'}
<div style="height:1px;">
</div>
{error name='accountType'}
</td>
<td class="ow_desc">
{question_description_lang name="accountType"}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{foreach from=$questionArray key='section' item='questions' name='section'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
{foreach from=$questions item='question' name='question'}
<tr class="{cycle name=$section values='ow_alt1,ow_alt2'} {if empty($section)}ow_tr_first{/if} {if $smarty.foreach.question.last && $question.name!='password'}ow_tr_last{/if} ">
<td class="ow_label">
{label name=$question.name}
</td>
<td class="ow_value">
{input name=$question.name}
<div style="height:1px;">
</div>
{error name=$question.name}
</td>
<td class="ow_desc">
{question_description_lang name=$question.name}
</td>
</tr>
{if $question.name=='password'}
<tr class="{cycle name=$section values='ow_alt1,ow_alt2'} {if $smarty.foreach.question.last}ow_tr_last{/if}">
<td class="ow_label">
{label name='repeatPassword'}
</td>
<td class="ow_value">
{input name='repeatPassword'}
<div style="height:1px;">
</div>
{error name='repeatPassword'}
</td>
<td class="ow_desc">
{question_description_lang name='repeatPassword'}
</td>
</tr>
{/if}
{/foreach}
{if !empty($section)}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{/foreach}
{if $isLastStep}
{if $display_photo}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_user_photo_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='userPhoto'}
</td>
<td class="ow_value">
{input name='userPhoto'}
<div style="height:1px;">
</div>
{error name='userPhoto'}
</td>
<td class="ow_desc">
{question_description_lang name='user_photo'}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_terms_of_use}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_terms_of_use_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='termOfUse'}
</td>
<td class="ow_value">
{input name='termOfUse'}
<div style="height:1px;">
</div>
{error name='termOfUse'}
</td>
<td class="ow_desc">
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_captcha_label"}</th></tr>
<tr class="{cycle name=captchaField values='ow_alt1,ow_alt2'} ow_tr_last" >
<td colspan="3" class="ow_center">
<div style='padding:10px;'>
{input name='captchaField'}
<div style="height:1px;">
</div>
{error name='captchaField'}
</div>
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
</table>
<div class="clearfix">
<div class="ow_right">
{submit name='joinSubmit'}
</div>
</div>
{/form}
{/if}
{/block_decorator}</td></table>

Oxwall 1.5. & Oxwall 1.5.3


<table><td width="50%><div class="_7d _6_ _76">
<h1 class="inlineBlock _4-dt _6n _6s _6v" style="padding: 42px 0px 0px; font-size: 28px; line-height: 36px;">
Enjoy The Freedom Of Social Network!</h1>
<div class="mtl pbm">
<p font-size: 16px;><h4>
Join Millions of people having fun and making new friends on Nairatrain.com every day.</h4>
<p><img src='YOUR IMAGE URL HERE'/></td><td width='50%'>
{block_decorator name="box" type="empty" addClass="ow_superwide ow_automargin"}
{if isset($notValidInviteCode)}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_not_valid_invite_code"}
{/block_decorator}
{else}
{if $step == 1}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_promo"}
{/block_decorator}
{if !empty($joinConnectHook)}
{block_decorator name="box" addClass="ow_center" style="overflow:hidden;" iconClass='ow_ic_key' langLabel='base+join_connect_title'}
{foreach from=$joinConnectHook item='item'}
{$item}
{/foreach}
{/block_decorator}
{block_decorator name="box" type="empty" addClass="ow_center" style="padding:15px;"}
{text key="base+join_or"}
{/block_decorator}
{/if}
{/if}
{block_decorator name='box' iconClass='ow_ic_user' langLabel='base+join_form_title'}{/block_decorator}
{form name=joinForm}
<table class="ow_table_1 ow_form">
{if $displayAccountType==true}
<tr class="{cycle values='ow_alt1,ow_alt2'} ow_tr_first ow_tr_last">
<td class="ow_label">
{label name='accountType'}
</td>
<td class="ow_value ow_center">
{input name='accountType'}
<div style="height:1px;">
</div>
{error name='accountType'}
</td>
<td class="ow_desc">
{question_description_lang name="accountType"}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{foreach from=$questionArray key='section' item='questions' name='section'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
{foreach from=$questions item='question' name='question'}
<tr class="{if !empty($question.trClass)}{$question.trClass}{/if} {if empty($section)}ow_tr_first{/if} {if $smarty.foreach.question.last && $question.name!='password'}ow_tr_last{/if}">
<td class="ow_label">
{label name=$question.name}
</td>
<td class="ow_value">
{input name=$question.name}
<div style="height:1px;">
</div>
{error name=$question.name}
</td>
<td class="ow_desc">
{question_description_lang name=$question.realName}
</td>
</tr>
{if $question.name=='password'}
<tr class="{if !empty($question.trClass) && $question.trClass == 'ow_alt1'}ow_alt2{else}ow_alt1{/if} {if $smarty.foreach.question.last}ow_tr_last{/if}">
<td class="ow_label">
{label name='repeatPassword'}
</td>
<td class="ow_value">
{input name='repeatPassword'}
<div style="height:1px;">
</div>
{error name='repeatPassword'}
</td>
<td class="ow_desc">
{question_description_lang name='repeatPassword'}
</td>
</tr>
{/if}
{/foreach}
{if !empty($section)}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{/foreach}
{if $isLastStep}
{if $display_photo}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_user_photo_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='userPhoto'}
</td>
<td class="ow_value">
{input name='userPhoto'}
<div style="height:1px;">
</div>
{error name='userPhoto'}
</td>
<td class="ow_desc">
{question_description_lang name='user_photo'}
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_terms_of_use}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_terms_of_use_label"}</th></tr>
<tr class="{cycle name=userPhoto values='ow_alt1,ow_alt2'} ow_tr_last">
<td class="ow_label">
{label name='termOfUse'}
</td>
<td class="ow_value">
{input name='termOfUse'}
<div style="height:1px;">
</div>
{error name='termOfUse'}
</td>
<td class="ow_desc">
</td>
</tr>
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
{if $display_captcha}
<tr class="ow_tr_first"><th colspan="3">{text key="base+questions_section_captcha_label"}</th></tr>
<tr class="{cycle name=captchaField values='ow_alt1,ow_alt2'} ow_tr_last" >
<td colspan="3" class="ow_center">
<div style='padding:10px;'>
{input name='captchaField'}
<div style="height:1px;">
</div>
{error name='captchaField'}
</div>
</td>
</tr>
{/if}
<tr class="ow_tr_delimiter"><td></td></tr>
{/if}
</table>
<div class="clearfix">
<div class="ow_right">
{submit name='joinSubmit'}
</div>
</div>
{/form}
{/if}
{/block_decorator}
</td></table>

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

Please note that codes suggestions for other Oxwall platform versions will be welcomed

2 thoughts on “Customize Your Oxwall Join Page: Facebook Look (All oxwall versions)”

Leave a Reply