DotNetNuke Customizing your Login – PART 3

This is a simplified extra add on from the previous topics:

• http://www.mylifebbs.com/2009/03/how-to-modify-dotnetnuke-login-page-the-easy-way/
• http://www.mylifebbs.com/2009/03/dotnetnuke-customizing-your-login-part-2/

The DotNetNuke Customization Shortcomings

The easiest way to have a customized login module is to buy third parties modules. However, it may not fully support other Authentication Providers such as LiveID and Facebook Login, worst it may not functioning well with other DNN modules. If you want to play safe, stick to the default DNN Authentication Providers.

1. If you customize your DNN Login / Registration ascx, it will affect ALL Portals! This problem has been fixed by using Pure CSS Customization and applying additional css class to the relevant ascx files.

2. This customization requires you to have a static login and registration page due to that we need to get the unique CSS ID to modify it. It will not work if you’re using ‘control’ login page (Default setting, something like ‘/ctl/login.aspx?returnurl=%2fdefault.aspx’).

3. Pop up login page requires you to put the login module in every page you wanted to have login. However, due to that login module will be changed once logon, the Jquery will be somehow malfunctioning and it is the thing I’m still working on.

Files to be modified for DotNetNuke Login and Registration Page.

Custom Providers

• /DesktopModules/AuthenticationServices/DNN/Login.ascx
• /DesktopModules/AuthenticationServices/DNN/App_LocalResources/Login.ascx.resx

DNN Authentication

• /httpdocs/admin/Authentication/Login.ascx
• /httpdocs/admin/Authentication/Logoff.ascx (Optional)
• /httpdocs/admin/Authentication/App_LocalResources/Login.ascx.Portal-0.resx

User Registration

• /httpdocs/admin/Users/manageusers.ascx
• /httpdocs/admin/Users/User.ascx
• /httpdocs/admin/Users/Password.ascx
• /httpdocs/admin/Users/MemberServices.ascx
• /httpdocs/admin/Users/Membership.ascx
• /httpdocs/admin/Authentication/App_LocalResources/(respective files used)

CSS Files

You’re advised to create 3 CSS and put into respective portal’s folder but don’t mixed with any of the DNN Default CSS to avoid overwriting other pages CSS. This including default.css, portal.css, skin.css and module.css.

Since we will need to create a static login and registration page, you can embed the styles directly into the page header. For me, I created the following files:

• custom-login.css
• custom-Registration.css
• custom-Login-IE-Fixed.css

and put under /Portals/0/SkinName/

Download/Create all the files from your server and put into respective folders to avoid confusion.

Step 1: Customizing DNN Custom Providers.

First, we start from DNN default login Provider:
/DesktopModules/AuthenticationServices/DNN/Login.ascx

It contains the following parts:

• Username Textbox

<asp:textbox id="txtUsername" columns="9" width="150" cssclass="NormalTextBox" runat="server" />

• Verification Control (Captcha)

<tr id="rowVerification1" runat="server" visible="false">

        <td class="SubHead" align="left"><dnn:label id="plVerification" controlname="txtVerification" runat="server" text="Verification Code:"></dnn:label></td>

    </tr>

    <tr id="rowVerification2" runat="server" visible="false">

        <td align="left"><asp:textbox id="txtVerification" columns="9" width="150" cssclass="NormalTextBox" runat="server" /></td>

    </tr>

    <tr id="trCaptcha1" runat="server">

        <td class="SubHead" align="left"><dnn:label id="plCaptcha" controlname="ctlCaptcha" runat="server" resourcekey="Captcha" /></td>

    </tr>

    <tr id="trCaptcha2" runat="server">

        <td align="left"><dnn:captchacontrol id="ctlCaptcha" captchawidth="130" captchaheight="40" cssclass="Normal" runat="server" errorstyle-cssclass="NormalRed" /></td>

    </tr>

• Password Textbox

<asp:textbox id="txtPassword" columns="9" width="150" textmode="password" cssclass="NormalTextBox" runat="server" />

• Login Button

<asp:button id="cmdLogin" resourcekey="cmdLogin" cssclass="StandardButton" text="Login" runat="server" />

• Labels Controls for each items above.

<dnn:label id="plUsername" controlname="txtUsername" runat="server" resourcekey="Username" />

<dnn:label id="plVerification" controlname="txtVerification" runat="server" text="Verification Code:"></dnn:label>

<dnn:label id="plCaptcha" controlname="ctlCaptcha" runat="server" resourcekey="Captcha" />

<dnn:label id="plPassword" controlname="txtPassword" runat="server" resourcekey="Password" />

Now, remove all redundant codes inherited from Old DNN: Width=”150″ and Change the following attributes accordingly:

• cssclass=”NormalTextBox” to cssclass=”LoginTextBox”
• Add cssclass=”LoginTextLabel” and helptext=”” to all labels:
  • Adding helptext=”” will removed the little Help Icon on the left side of the Label. It is totally optional.

<dnn:label id="plPassword" controlname="txtPassword" cssclass="LoginTextLabel" runat="server" resourcekey="Password" helptext="" />

• Add the following link tag after ” <%@ Register TagPrefix=”dnn”  ” to load CSS files

<link rel="stylesheet" type="text/css" href="/Portals/0/SkinName/custom-login.css" />

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="/Portals/0/SkinName/custom-login-IE.css" />

<![endif]—>

Optionally, you can add it in your login page header. (Page setting > Header)

You are free to remove all other codes like table, tr, td but not any codes start with <%@ and has a runat=”server” attribute inside. Pretty simple right?

If you don’t want to touch Login.ascx at all, you will need to use Firebug to indentify the id and class in order to change it. For example, a default login page (/home/login.aspx) will have something like this:

<input type="text" style="width: 150px;" class="NormalTextBox" id="dnn_ctr377_Login_Login_DNN_txtUsername" size="9" name="dnn$ctr377$Login$Login_DNN$txtUsername"/>

You will need to copy out “dnn_ctr377_Login_Login_DNN_txtUsername” in order to change the design. In the css:

#dnn_ctr377_Login_Login_DNN_txtUsername{

    width:200px;

    height:50px;

    border:1px solid green}

and a little simple Javascript in the module footer (module setting > Advanced Settings > Footer) to override to stupid inline-style:

<script type="text/javascript">

document.getElementById("dnn_ctr377_Login_Login_DNN_txtUsername").style.width="500px";

</script>

Because the nature of DOM and JS, you need to put after the inline-style in order to override it.

That’s end of Part 3-1. I’ll continue in a day or two perhaps.