Personalizando el módulo de inicio de sesión de DNN

Debemos reconocer que DNN "out of the box" no es todo lo bonito que debería; quizás nos faltan diseñadores gráficos en la Comunidad DNN, que aporten el toque de glamour que le falta a nuestro CMS. Mientras tanto, iniciativas personales como ésta de Aaron Lopez nos ayudan a ir mejorando el aspecto de nuestros DNN. En concreto, aquí se trata de modernizar el módulo de inicio de sesión y facilitar su adaptación a pantallas pequeñas. No son más que algunos sencillos cambios CSS que podemos incluir en nuestro tema, o en cualquier otra CSS que se cargue al final, como portal.css:

/* 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;
}

Esto no es más que una base, un primer paso que nos puede servir para ser más creativos y cambiar más aún el módulo de inicio de sesión. Y solo tocando CSS, sin necesidad de programar ni añadir nuevos módulos.

Puede parecer poca cosa, pero la suma de muchos pequeños detalles harán que nuestro resultado final quede mucho mejor.

Cambiando el idioma predeterminado en DNN El nuevo web de la Comunidad DNN