1 (edited by downliner 2008-12-02 12:35)

Topic: Simplified Registration & Login [CSS]

I've just noticed that each page has a unique ID added to the parent div. I never noticed this in 1.2 before lol Decided to have a play with the Registration page and thought I would post up my results for others to try out if ya want.

Original Registration Layout:
http://www.willvilliers.com/old_register.jpg

Simplified Registration Layout: (in my opinion of course)
http://www.willvilliers.com/new_register.jpg

The CSS (written for Oxygen style) is below, just add it to the very end of your style/style_name/style_name.css file

/* Registration Page
--------------------------------------------------------------*/

#brd-register #brd-head,
#brd-register #brd-navlinks,
#brd-register #brd-visit,
#brd-register #brd-main .main-head,
#brd-register #brd-main #brd-crumbs-top,
#brd-register #brd-main .main-frm #afocus .frm-group .set5,
#brd-register #brd-main .main-frm #afocus .frm-group .set6,
#brd-register #brd-main #brd-crumbs-end,
#brd-register #brd-about,
#querytime {display:none;}

#brd-register #brd-main .main-frm {
    margin:100px auto 0px auto;
    width:600px;
}

#brd-register #brd-main .ct-box {
    padding-bottom:10px;
    border-width:0;
    color: #000;
    background:#fff;
    }

.brd #brd-register .frm-buttons {
    border-width:0;
    }

Change "color: #000;" and "background: #fff;" to suit your style. I changed the background value to include an image smile

I may be the only one who likes it, I just prefer to remove anything that may prevent the user from registering lol

Edit: The above code has been edited for use on the Oxygen style, though it can be easily edited.

Simplified Oxygen Registration:
http://www.willvilliers.com/new_oxygen_register.jpg

^ Thats the whole registration page. No headers, nav links necessary tongue

Preview: Login Demo and Registration Demo

2 (edited by downliner 2008-12-02 01:51)

Re: Simplified Registration & Login [CSS]

& just for good measure here's a simplified login page wink

Original Oxygen Login

http://www.willvilliers.com/old_oxygen_login.jpg

Simplfied Oxygen Login

http://www.willvilliers.com/new_oxygen_login.jpg

Add the below code to the bottom of your "style/style_name/style_name.css" file, code has been written for the Oxygen style but should be good for any.

/* Login Page
--------------------------------------------------------------*/

#brd-login #brd-head,
#brd-login #brd-navlinks,
#brd-login #brd-visit,
#brd-login #brd-main .main-head,
#brd-login #brd-main #brd-crumbs-top,
#brd-login #brd-main #brd-crumbs-end,
#brd-login #brd-about {display:none;}

#brd-login #brd-main .main-frm {
    margin:100px auto 0px auto;
    width:600px;
}

#brd-login #brd-main .main-frm div.content-head {
    padding:10px;
    border-width:0;
    }

.brd #brd-login .content-head .hn {
    border-width:0;
    padding:10px 0px 10px 20px
    }

.brd #brd-login .frm-buttons {
    border-width:0;
}

Preview: Login Demo

Re: Simplified Registration & Login [CSS]

The messages on top of each form look out of place. Apart from that, looks good.

Re: Simplified Registration & Login [CSS]

Garciat wrote:

The messages on top of each form look out of place. Apart from that, looks good.

Thanks garciat smile If anyones interested you can use the below code (instead of my originally posted code) if you prefer not to display the information messages...

/* Registration Page
--------------------------------------------------------------*/

#brd-register #brd-head,
#brd-register #brd-navlinks,
#brd-register #brd-visit,
#brd-register #brd-main .main-head,
#brd-register #brd-main #brd-crumbs-top,
#brd-register #brd-main .main-frm #afocus .frm-group .set5,
#brd-register #brd-main .main-frm #afocus .frm-group .set6,
#brd-register #brd-main #brd-crumbs-end,
#brd-register #brd-about,
#querytime,
#brd-register #brd-main .ct-box {display:none;}

#brd-register #brd-main .main-frm {
    margin:100px auto 0px auto;
    width:600px;
}

.brd #brd-register .frm-buttons {
    border-width:0;
    }

/* Login Page
--------------------------------------------------------------*/

#brd-login #brd-head,
#brd-login #brd-navlinks,
#brd-login #brd-visit,
#brd-login #brd-main .main-head,
#brd-login #brd-main #brd-crumbs-top,
#brd-login #brd-main #brd-crumbs-end,
#brd-login #brd-about,
.brd #brd-login .content-head .hn {display:none;}

#brd-login #brd-main .main-frm {
    margin:100px auto 0px auto;
    width:600px;
}

#brd-login #brd-main .main-frm div.content-head {
    padding:10px;
    border-width:0;
    }

.brd #brd-login .frm-buttons {
    border-width:0;
}

I'm not a fan of the messages myself, especially on the registration page. The text just seems a little long, though I suppose I could always shorten it through the language file smile

Login without messages preview:
http://www.willvilliers.com/login_no_msg.jpg

Register without messages preview:
http://www.willvilliers.com/reg_no_msg.jpg

Cheers

5 (edited by downliner 2008-12-02 13:50)

Re: Simplified Registration & Login [CSS]

If you leave the help message on the login page it offers users the opportunity to request a new password. The below code will style the "Forgot Password" page to look the same as the simplified Login and Register pages.

http://www.willvilliers.com/new_forgot_pass.jpg

Add to the bottom of your "style/style_name/style_name.css" file:

/* Request New Password
--------------------------------------------------------------*/

#brd-reqpass #brd-head,
#brd-reqpass #brd-navlinks,
#brd-reqpass #brd-visit,
#brd-reqpass #brd-main .main-head,
#brd-reqpass #brd-main #brd-crumbs-top,
#brd-reqpass #brd-main #brd-crumbs-end,
#brd-reqpass #brd-about {display:none;}

#brd-reqpass #brd-main .main-frm {
    margin:100px auto 0px auto;
    width:600px;
}

.brd #brd-reqpass .frm-buttons {
    border-width:0;
}

/* Password Sent / Error
--------------------------------------------------------------*/

#brd-message #brd-head,
#brd-message #brd-navlinks,
#brd-message #brd-visit,
#brd-message #brd-main .main-head,
#brd-message #brd-main #brd-crumbs-top,
#brd-message #brd-about {display:none;}

#brd-message #brd-main .main-frm {
    margin:100px auto 0px auto;
    width:600px;
}

.brd #brd-message .frm-buttons {
    border-width:0;
}

Demo smile The breadcrumb links are left in place on the "Password Sent" page to ensure the user can return to the homepage.

Re: Simplified Registration & Login [CSS]

Perhaps you could make the

Do you need to register or obtain a new password before you login?

message look like the

Important! An e-mail will be sent to the specified address with instructions on how to change your password.

message instead of hiding it.

7 (edited by TRIVUz 2008-12-05 17:18)

Re: Simplified Registration & Login [CSS]

I've tune up this code for my localized forum-

/* Registration Page
----------------------------5 Dec, 08 by TRIVUz----------------------------------*/

#brd-register #brd-head,
#brd-register #brd-navlinks,
#brd-register #brd-visit,
#brd-register #brd-main .main-head,
#brd-register #brd-main #brd-crumbs-top,
#brd-register #brd-main #brd-crumbs-end,
#brd-register #brd-about,
#querytime {display:none;}

#brd-register #brd-main .main-frm {
    margin:0px auto 0px auto;
    width:800px;
}

#brd-register #brd-main .ct-box {
    padding-bottom:10px;
    border-width:1;
    color: #000;
    background:#fff;
    }

.brd #brd-register .frm-buttons {
    border-width:1;
    }

and

/* Login Page
------------------------------5 Dec, 08 by TRIVUz--------------------------------*/

#brd-login #brd-head,
#brd-login #brd-navlinks,
#brd-login #brd-visit,
#brd-login #brd-main .main-head,
#brd-login #brd-main #brd-crumbs-top,
#brd-login #brd-main #brd-crumbs-end,
#brd-login #brd-about {display:none;}

#brd-login #brd-main .main-frm {
    margin:50px auto 0px auto;
    width:750px;
}

#brd-login #brd-main .main-frm div.content-head {
    padding:10px;
    border-width:1;
    }

.brd #brd-login .content-head .hn {
    border-width:0;
    padding:10px 0px 10px 20px
    }

.brd #brd-login .frm-buttons {
    border-width:0;
}

Live demo:
http://booksuread.com/idforums/register.php

http://booksuread.com/idforums/login.php

Never explain yourself to anyone. Because the person who likes you doesn’t need it, and the person who dislikes you won’t believe it.

8 (edited by downliner 2008-12-06 00:29)

Re: Simplified Registration & Login [CSS]

TRIVUz there is a bug in the original code reported by teva. If you're using the Captcha/Antispam extension you need to apply the following fix:

/* Registration Page
--------------------------------------------------------------*/

#brd-register #brd-head,
#brd-register #brd-navlinks,
#brd-register #brd-visit,
#brd-register #brd-main .main-head,
#brd-register #brd-main #brd-crumbs-top,
#brd-register #brd-main .main-frm #afocus .frm-group .set5,
#brd-register #brd-main .main-frm #afocus .frm-group .set6,
#brd-register #brd-main #brd-crumbs-end,
#brd-register #brd-about,
#querytime,
#brd-register #brd-main .ct-box {display:none;}

Change to:

/* Registration Page
--------------------------------------------------------------*/

#brd-register #brd-head,
#brd-register #brd-navlinks,
#brd-register #brd-visit,
#brd-register #brd-main .main-head,
#brd-register #brd-main #brd-crumbs-top,
#brd-register #brd-main .main-frm #afocus .frm-group .set5 div.select,
#brd-register #brd-main .main-frm #afocus .frm-group .set6,
#brd-register #brd-main .main-frm #afocus .frm-group .set7,
#brd-register #brd-main #brd-crumbs-end,
#brd-register #brd-about,
#querytime,
#brd-register #brd-main .info-box {display:none;}

This has now been released as an extension which allows you to turn on/off the Simplified versions of the pages through your admin panel. It may be best if a moderater would close/merge this thread so all bug reports/fixes/support can be kept in one place.