Frankly speaking, there are not much great designers specialized in DNN Skinning due to its complexity. The root of the cause is due to the different system structure where I believe it is more programmer friendly than designer.
To skip all the explanations and go for the download, please scroll till the end of this post.
The DNN login page is the most forgotten part in all DNN users and even some professional DNN portals like PokerDiy.com and neoteo.com. There are few modules that allow you to have a simplified login or pop up login like digg.com but you need to pay or it and it is not cheap and easy to change the design.
In order to make changes to your DNN Login page, you have to understand the components in the login module. The DNN Login module consists of 4 parts which is the DNN Membership Authentication System, The Authentication Provider, The Login Module itself and the Language Resources Files (.resx).
The linkage of these components are as below:
Login Module loads Authentication Provider(s) into it and the provider as a gateway to the DNN Membership Authentication System. For example, if a user using LiveID to login your DNN Portal, the LiveID Authentication Provider redirect the user to MSN LiveID Gateway and then pass the credential back to your DNN Portal and match it with the DNN Membership Authentication System.
However, DNN Membership Authentication System also consist of Member Registration, Password Reminder and Forgot Password Question which makes the designing work on Login Works kinda tricky, not even need to mention the words that are loaded from the language resource files.
Ok, lets start changing those ugly interface! First we need to locate all the files that need to be changed. You will need to have FTP access to your DNN installation root.
Step 1: Changing the Login Module Container
The Login Module is basically the Admin’s Container by default where there is actually no login page but a “DNN Control” (Home/ctl/Login.aspx) unless you create a page and specified it in Admin > Site Setting > Advance Setting > Login Page.
Step 2: Locating Files that need to be changed
Now we need to locate the Login Authentication Providers at
There will be 3 default providers which is DNN, LiveID and OpenID. You will find Login.aspx and Login.ascx.resx (under App_LocalResources) inside it and that are the files you are going to change it.
For the DNN authentication files, you can get them at:
/admin/Users/user.aspx and /admin/Authentication/login.aspx
Make sure you didn’t mixed up with login.aspx in providers.
Step 3: Changing the Text and Words
You can either change it using DNN Language editor which is located in Admin > Language in control panel are directly look for the files in FTP. I actually prefer the later method as it is more easier to read and modify using Visual Web Developer.
“Register” “Forgot and Password” at
*If you have more than one portal, the file name will be “Login.ascx.Portal-0”
All you need to to change the text inside between the “value” attribute. I’d not recommend you to put html/css into it as it will increase the load time and may messing up xhtml coding standard…
Step 4: Changing the files.
First, we need to deal with the Login Tabs which is using the DNNTabStrip webcontrol. You can find this file at:
Inside the file, look for:
The Css Classes are located at /Portals/_default/default.css by default. You can either change the css file, override it in skin.css / portal.css or redefine the classes in login.ascx
If you look at the pokerDIY login tabs, you will see that the tabs have been pushed into 2 lines which makes the layout very messy. You can simply widen it by changing the “width=160” to a larger number in the following lines and you will have the problem solved.
Ok, now you have change the “Register” and “Forgot Password?” text but what about the design? For these, you need to look for “cssclass=”CommandButton” in the following lines located inside the same login.ascx.
We’ll leave the other parts of codes inside the file and CSS coding for a moment. Now we proceed to change another login.ascx which is located in:
There are few basic things you need to change to make your login looks beautiful which are: The width, Label text/icon, login button, input box and the text inside it. You can find them in these lines:
Like many others, you probably thought of removing the stupid help icon in the login page. It is simple if you’re only having a single language website version. All you need is to replace the <dnn:label to standard html code.
If you need to persevered the language resources function, you may substitute the dnn label control into standard asp label control as follow:
To change the textbox design as well as the font inside, simply look for <asp:textbox and change the cssclass value and thing applies to <asp:button for the login button.
After you’ve changed all the cssclass value in dnn.ascx, you may proceed to LiveID.ascx and OpenID.ascx using the same method.
Step 5: CSS Styling codes
Now we’ve reached into the hardest part where we need to use css to make a stylish login page. First, I would suggest you to put a new name for each of the value inside the CssClass attribute. This is because the default value are general classes which are shared with other modules and controls in the whole portal.
Instead of teaching you how to code CSS, I’ve made a nice login page which complete codes for you to download. For FREE of course!
Updated: Please read this How to DotNetNuke Customizing your Login – PART 2 for example codes and screen shots.