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

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:

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

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

voila!

The following two tabs change content below.

Ebenezer Obasi

Senior executive editor at EwtNet
A web developer, IT undergrad, terrible entrepreneur, internet freak and a man of a few other incongruous talents, Ebenezer has been writing on technology since 2012, and plans to do so until a few days before his ultimate fate: cryogenic preservation. If resurrected, he is likely to go back to writing on technology.
  • TAGS :

Recieve Free Email Updates!

Leave a Reply