MyLifeBBS

The world with no boundaries

  • Home
  • Google Apps
  • DotNetNuke
  • Things in The Internet
  • SEO
  • Contact Me
  • PostsComments

DotNetNuke Customizing your Login – PART 3

June 1, 2009 by George

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.

Filed Under: DotNetNuke Tagged With: dnn customization, dnn login, dnn registration

Trackbacks

  1. Guide to implement re-Captcha in DotNetNuke Modules without … | DNN Blog says:
    April 27, 2010 at 1:30 am

    […] DotNetNuke Customizing your Login – PART 3 […]

  2. Customizing the DotNetNuke login page : Karl’s Place says:
    November 22, 2012 at 2:03 am

    […] Since we’re allowing Standard and Windows logins, we need to edit two different Login.ascx files: one in DesktopModulesAuthenticationServicesDNN, and one in AuthenticationServicesActiveDirectory.  I changed the table width to 240, aligned the Windows login parts to the left to match the Standard login, and added helptext = “” to the labels to get rid of the little help icons (I found that tip here). […]

Recommended DNN Modules

SiteGround Hosting Fast and Reliable WordPress hosting that we recommend.
XMOD Pro is a very good module to create complicated forms with external database writing. You could use it to build a simple module as well. The drawbacks like custom permission and filtering might be an issue though.
Ultra Video Gallery is a very advanced multimedia module which allows you to create a site near to YouTube. It allows you to convert video directly in the website, share it, comment, membership integration and so on.
Project Management Templates, This is not a DNN module but if you need to manage your works better, try the project management templates. It helps a lot.

Post Archives

Blogroll

  • Food Promotions in Kuala Lumpur GoEatOut Promotion Page

Recommended Sites

  • DNN Store is the best place to shop for DNN modules
  • Malaysia Food Guide Best place to find malaysia food promotions and place to eat.
  • Malaysia Public Holidays A site that list out all public holidays in Malaysia with lunar calendar too

Recent Comments

  • kenny on How to modify DNN 6 login module skin design – Quick Guide
  • michelle on Turn back On Windows 8 Wifi – 100% works
  • Oracle9 on Turn back On Windows 8 Wifi – 100% works
  • AK on Turn back On Windows 8 Wifi – 100% works
  • Customizing the DotNetNuke login page : Karl’s Place on DotNetNuke Customizing your Login – PART 3

About the Author

I'm the founder of InnoChannel Sdn Bhd. We're here to help people to market their business online and also a Google Apps Premier Partner in Malaysia who provides email consultation, setup, data migration and so on.

Copyright © 2023 · News Pro Theme on Genesis Framework · WordPress · Log in