This is a simplified extra add on from the previous topics:
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.
- /httpdocs/admin/Authentication/Logoff.ascx (Optional)
- /httpdocs/admin/Authentication/App_LocalResources/(respective files used)
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:
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:
It contains the following parts:
- Username Textbox
- Verification Control (Captcha)
- Password Textbox
- Login Button
- Labels Controls for each items above.
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.
- Add the following link tag after ” <%@ Register TagPrefix=”dnn” ” to load CSS files
- 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:
You will need to copy out “dnn_ctr377_Login_Login_DNN_txtUsername” in order to change the design. In the css:
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.