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.
dnn-login-sample
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.
Login Structure
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 /DesktopModules/AuthenticationServices/ 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 /httpdocs/admin/Authentication/App_LocalResources/Login.ascx.resx
*If you have more than one portal, the file name will be “Login.ascx.Portal-0”
<data name="Remember.Text" xml:space="preserve">
<value>Remember Login</value>
</data>
<data name="cmdForgotPassword.Text" xml:space="preserve">
<value>Forgot Password ?</value>
</data>
<data name="cmdRegister.Text" xml:space="preserve">
<value>Register</value>
</data>
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:
/httpdocs/admin/Authentication/Login.ascx
Inside the file, look for:
<DNN:DNNTabStrip
ID="tsLogin"
runat="server"
TabRenderMode="All"
CssTabContainer="LoginTabGroup"
CssContentContainer="LoginContainerGroup"
DefaultContainerCssClass="LoginContainer"
DefaultLabel-CssClass="LoginTab"
DefaultLabel-CssClassHover="LoginTabHover"
DefaultLabel-CssClassSelected="LoginTabSelected"
visible="false" />
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.
<asp:panel id="pnlLogin" runat="server" Visible="false">
<table cellspacing="0" cellpadding="3" border="0" summary="SignIn Design Table" width="160">
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.
<asp:Linkbutton id="cmdRegister" resourcekey="cmdRegister" cssclass="CommandButton" text="Register" runat="server"/>
<asp:Linkbutton id="cmdPassword" resourcekey="cmdForgotPassword" cssclass="CommandButton" text="Forgot Password?" runat="server" />
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:
/DesktopModules/AuthenticationServices/DNN.ascx
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:
<dnn:label id="plUsername" controlname="txtUsername" runat="server" resourcekey="Username" />
<dnn:label id="plPassword" controlname="txtPassword" runat="server" resourcekey="Password" />
<asp:textbox id="txtUsername" columns="9" width="150" cssclass="NormalTextBox" runat="server" />
<asp:textbox id="txtPassword" columns="9" width="150" textmode="password" cssclass="NormalTextBox" runat="server" />
<asp:button id="cmdLogin" resourcekey="cmdLogin" cssclass="DNNLogin" text="Login" runat="server" />
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:
<asp:label id="plUsername" controlname="txtUsername" runat="server" resourcekey="Username" />
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.
Best DotNetNuke Hosting Recommendation
ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers DotNetNuke hosting starts from $5/month only. We also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable DotNetNuke Hosting, we should be your best choice.