Knowledge Base/Getting Started/Appearance

How Can I Create My Own Login Page?

Alison Groves
posted this on July 30, 2010 03:38 PM

You can whitelabel your account by adding a logo. When you add your own logo, it replaces the Raven logo with your own. If you create a custom subdomain for your account – myname.raventools.com – your login page will also use your logo.

Raven Login Page

While this is a nice feature to have, it's still fairly generic. We knew that some users would want to have a login page that was more consistent with their own branding, which is why we created the Login Widget.

How to Use the Raven Login Widget

The Raven Login Widget allows you to easily place a secure login form on your own website. The only requirement for using the widget is that you must have a subdomain or custom domain (available only to Agency accounts) set up on your account. The Custom Domain option is available to account owners in Preferences.

Once a custom subdomain or domain is set up, the system will provide you with your Login Widget. The widget is a small piece of JavaScript that you can place inside an HTML document. The widget outputs a login, and the HTML looks like this:

<form id="ravenlogin" method="post" action="">   <fieldset>     <legend>Login Form</legend>     <p class="ravenusername"><label for="username">Username:</label><span><input type="text" name="username" /></span></p>     <p class="ravenpassword"><label for="password">Password:</label><span><input class="text" type="password" name="password" /></span></p>     <p class="ravensubmit"><label for="submit"> </label><span><input type="submit" value="Login" name="submit" /></span></p>   </fieldset> </form>

CSS IDs and classes are assigned to the main HTML elements, allowing you to control the layout and appearance of the login form.

#ravenlogin
Assigned to FORM element
.ravenusername
Assigned to P element for the Username label and input field
.ravenpassword
Assigned to P element for the Password label and input field
.ravensubmit
Assigned to P element for the Password label and input field
 
Topic is closed for comments