Wolf X Machina

You're reading the professional blog of Aaron Lopez. For DNN Services, check out Wolf X Machina

DNN

Style the default Login module

Mar 03, 2019

Back to blog

DNN is not the prettiest out of the box. Even now in version 9.2+ the stock Login module looks a bit dated and maligned. A new client recently asked me to make the stock DNN Login module look good so I whipped together some simple skin-level CSS that makes it work on small screens and just ties in better with the rest of the website.

I take great pride in making DNN websites look not-so-much like a DNN website. So here is some really simple CSS that you can put into your DNN skin or portal.css to make the stock Login module a bit nicer to look at:

/* re-style the dnn login */

.LoginPanel {
	width: auto !important;
	float: none !important;
	display: flex !important;
	padding: 0 !important;
	max-width: 100% !important;
	justify-content: center;
}

.LoginPanel > div {
	min-width: 300px;   
	max-width: 500px;
}

/* style the form item wrapper */

.LoginPanel .dnnForm .dnnFormItem {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-bottom: 15px;
}

/* style the form label */

.LoginPanel .dnnFormItem > .dnnLabel {
	margin-top: 0;
}

.LoginPanel .dnnFormItem > .dnnLabel label {
	display: block; 
}

.LoginPanel .dnnLabel {
	display: block;
	float: none;
	position: relative;
	width: auto;
	padding-right: 0;
	margin-right: 0;
	overflow: visible;
	text-align: left;
}

/* boostrap fix - remove the yellow background from the checkbox field */
.dnnCheckbox .mark {
	background: none !important;
}

/* give the Remember Me checkbox a smaller text size */
.dnnLoginRememberMe {
	font-size: 15px;
}

/* style the login panel text input fields */
.LoginPanel .dnnLoginService input[type="text"], 
.LoginPanel .dnnLoginService input[type="password"] {
	width: 100% !important;
	min-width: 100%;
	margin: 0;
	border-radius: 1px;
	padding: 10px;
}

/* hide the empty label beside the Reset Password button */
.LoginPanel .dnnFormItem:last-child span.dnnFormLabel {
	display: none;
}

.LoginPanel ul.dnnActions {
	margin: 0 !important;
	padding: 0 !important;
}

/* primary action buttons - also used in dnn modal popups */

.dnnPrimaryAction, 
.dnnFormItem input[type="submit"], 
a.dnnPrimaryAction {
	background: #015488;
	border: none;
	color: #ffffff;
	text-shadow: none;
	font-weight: 400;
	box-shadow: none;
	border-radius: 1px;
	font-size: 15px;
	padding: 10px 20px;
}
.dnnPrimaryAction:hover, 
.dnnFormItem input[type="submit"]:hover, 
a.dnnPrimaryAction:hover {
	background: #1B6EA2 !important;
	text-decoration: none !important;
}

/* secondary action buttons - also used in dnn modal popups */

.dnnSecondaryAction, 
.dnnFormItem input[type="submit"], 
a.dnnSecondaryAction {
	background: #f5f5f5;
	border: none;
	color: #555;
	text-shadow: none;
	font-weight: 400;
	box-shadow: none;
	border-radius: 1px;
	font-size: 15px;
	padding: 10px 20px;
}
.dnnSecondaryAction:hover, 
.dnnFormItem input[type="submit"]:hover, 
a.dnnSecondaryAction:hover {
	background: #f1f1f1 !important;
	text-decoration: none !important;
}

That's pretty much it. Of course, you can get creative and expand on this (or strip it down to be even simpler). One of the nice advantages to doing this through CSS is you can avoid having to install a 3rd party module for login which saves money on license cost and the headache of needing to upgrade modules. There's even the small added benefit that the .dnnPrimaryAction and .dnnSecondaryAction buttons will get updated so the DNN modal buttons will look a bit better also.

On a more general note, you should never undersestimate small improvements like these. When you work on improving the small things regularly, they add up and eventually you will end up with something that is just more polished. Happy DNN'ing :D

I hope you're able to take this code and make it even better. If you're looking for more advanced DNN theming and beautiful design, be sure to check out Expert DNN Development. Everyday I work with companies to help them improve the design, usability, and flexibility of their DNN websites and I would love to help you, too!

Aaron Lopez

Aaron Lopez

Founder & Developer of Wolf X Machina

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More