How to Create a Custom Sign-In Page for Oxwall Powered Sites

A few months ago, I wrote about How To Customize Your Oxwall Join Page (Facebook Look) but not without crashing my own site twice, not too long after that, I that was born to be my own destroyer embark on a more tedious prank viz.. to tweak the Oxwall sign-in page.

 
Definitely, the later was a success story but a reward of that nature will not come my way without a deadly prize to pay. I will not bore you with all the misfortunes that befalls me in the making of this trick, however, I will share with you briefly of my success story..
Note: If you need a sign-in page that is similar to Facebook login page, you can simply purchase the Facebook Clone Plugin and customize it to your taste. It’s safer to use because your page will not be affected by platform update.

A Quest For A  Sign-In Page

After the introduction of oxwall 1.5 I discovered that the more cute and simple login form on 1.4 has been replaced by a buggy overlay pop-up box. I needed an alternative so I found a way to place a sign-in button on the join page, there and then I saw the need of a better sign in page.

Before
After

To simplify this tutorial we will try and divide it into three steps.

1. Resizing & Customizing your Sign In Page.

This step deals with the background image and page size… viz

  • Login to your cpanel/ftp
  • In /ow_system_plugins/base/views/controllers find user_standard_sign_in.html
  • Download this file for backup.
  • Replace the entire content with the following code:
{style}
	{literal}
		.ow_sign_in_wrap {
			position:absolute;
			scroll:no; overflow-x: hidden;
			margin:0 0 0 -351px;
			background-attachment:fixed;
			background-image:url(http://3.bp.blogspot.com/-BalD45g4MSQ/UbQc8RNbtwI/AAAAAAAACEw/AXtfCnmbecM/s1600/images.jpg); background-position:right top;
			background-repeat:no-repeat;
			background-size:100%; height:100%;
			margin:0 auto;
			padding-left:20px;
			padding-right:30px;
			width:100%;
		}
	{/literal}
{/style} 
<div>
	<div>
		<div style="position:relative;height:0px; margin-left:0px;">
			{component class='BASE_CMP_Console'} 
			<div>
				<h2><a href="https://www.ewtnet.com/%7B$siteUrl%7D">{*$siteName*}</a></h2>
				<div>{*$siteTagline*}</div>
			</div>
			<div>                       {$main_menu} </div>
			<div></div>
		</div>
	</div>
</div>
{$sign_in_form} 
<div>
	<div>
		<div>
			{$bottom_menu}             
			<div>                {text key='base+copyright'}             </div>
			<div style="float:right;padding-bottom: 30px;">                {$bottomPoweredByLink}             </div>
		</div>
	</div>
</div>
{decorator name='floatbox'}
  • Now save your changes and proceed to the next step.

 Replace http://3.bp.blogspot.com/-BalD45g4MSQ/UbQc8RNbtwI/AAAAAAAACEw/AXtfCnmbecM/s1600/images.jpg with your Background Image Url.

2. Modify Sign-In Form Structure.

This step is a bit tricky, you will need to follow the steps carefully…. viz.

  • Login to your cpanel/ftp
  • In /ow_system_plugins/base/views/components find sign_in.html
  • Download this file for backup.
  • Replace the entire content with the following code:
<table>
	<td width="60%">
		<div>
			<h1 style="padding: 42px 0px 0px; font-size: 28px; line-height: 36px; margin-left: 30px; margin-top:70px;">WELCOME TO OURS SOCIAL NETWORK</h1>
			<div>
				<p font-size: 16px;>
				<h4 style="margin-left: 30px;">People are having fun and making new friends here every day. You can too!  every day.</h4>
				</p>
			</div>
		</div>
	</td>
	<td>
		<div>
			<div style="margin-top:100px;">
				<center>
					<h1>{text key='base+base_sign_in_cap_label'}</h1>
				</center>
			</div>
			{form name='sign-in'}      
			<div>
				<div>
					<div><i style="text-decoration:none;color:grey;font-size:10px;">Email Address/Username</i>                    {input name='identity'}                 </div>
					<div><i style="text-decoration:none;color:grey;font-size:10px;">Password</i>                    {input name='password'}                 </div>
					<div>
						<div>                        {submit name='submit' class='ow_positive'}                     </div>
						<p>{input name='remember'}{label name='remember'}</p>
						<p><a href="https://www.ewtnet.com/%7Burl_for_route%20for='base_forgot_password'%7D">{text key='base+forgot_password_label'}</a></p>
					</div>
					<div>
						{component class='BASE_CMP_SignInButtonList'} 
						<p>{text key='base+base_sign_in_txt'}</p>
						<p>{*text key='base+base_sign_in_or_label'*} <a href="https://www.ewtnet.com/%7B$joinUrl%7D">{text key='base+join_submit_button_join'}</a></p>
					</div>
				</div>
				{/form} 
			</div>
		</div>
	</td>
</table>
  • Save your changes.

3. Ice your Cake with CSS

 This is the last and the easiest part… viz.

  • Login to Admin Dashboard
  • Click on Appearance
  • Clik on Edit Theme
  • Click on Css
  • Copy the following code into your custom css:
.nue_signupbox #signup_error,.nue_signupbox #signup_error_captcha{
	background-color:#ffebe8;
	border:1px solid #dd3c10;
	border-radius:5px;color:#333;
	font-weight:700;
	margin:15px auto 5px;
	padding:5px 10px;
	text-align:center
}
.box-title2{
	opacity: .85;
	background: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
	background: -moz-linear-gradient(top, #ffffff, #ffffff);
	border: 1px solid #8A9D44;
	border-top-color: #95AD42;
	border-bottom-color: #7E8D46;
	-moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.6), inset 1px 0 1px 0px rgba(255,255,255,0.2), inset -1px 0 1px 0px rgba(255,255,255,0.2), inset 0px -1px 0px rgba(255,255,255,0.1), inset 0px 1px 0px rgba(255,255,255,0.2);
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6), inset 1px 0 1px 0px rgba(255, 255, 255, 0.2), inset -1px 0 1px 0px rgba(255, 255, 255, 0.2), inset 0px -1px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6), inset 1px 0 1px 0px rgba(255, 255, 255, 0.2), inset -1px 0 1px 0px rgba(255, 255, 255, 0.2), inset 0px -1px 0px rgba(255, 255, 255, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
	vertical-align: middle;
	margin: 10px 0;
	border:1px solid #ddd;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	box-shadow: 5px 5px 5px #CCCCCC;
	padding:10px;
}

voila!

Leave a Reply