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

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

Aaron Lopez, Wolf X Machina, nos explica cómo cambiar fácilmente el aspecto de inicio de sesión en nuestro web 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.

440 Puntúe este artículo:
Sin puntuar

Deje un comentario

This form collects your name, email, IP address and content so that we can keep track of the comments placed on the website. For more info check our Privacy Policy and Terms Of Use where you will get more info on where, how and why we store your data.
Añadir comentario