OBJETIVO
Estudiar cómo se puede modificar el aspecto del LogIn para Tienda Nube con la herramienta de Hoja de Estilo.
MODO DE USO
Se creó un Dato Fijo por empresa en la sección de Configuración Empresa->Integración TiendaNube para poder personalizar la hoja de estilo (CSS) de la página de logueo que muestra al instalar la App de TiendaNube.
El parámetro es "Hoja estilo login" y se pasa una URL apuntando a la hoja de estilo que quieran utilizar. Por defecto si está vacío este parámetro muestra la hoja de estilo actual.
De ahí toma el estilo para la página del Login.
Armar hoja de Estilo
Para armar la hoja de estilo deberían tener en cuenta principalmente estos elementos:
/* Ejemplos */
/* Fondo de pantalla */
body.authentication-bg-pattern {
background-image: none;
}
/* Barra superior que contiene Logo Empresa y boton Registro */
.no-gutters {
margin-right: 0;
margin-left: 0;
}
/* Logo Empresa */
.card-img-top {
max-height: 100px!important;
}
/* Boton "Registrarme" */
.pull-right {
float: right;
}
/* Titulo Login */
.auth-title {
background-color: #f7fafb;
border-top: 1px solid #ecf2f4;
border-bottom: 1px solid #ecf2f4;
padding: 12px 2.25rem;
margin: 0 -2.25rem 30px;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
/* Texto alertas */
.bg-danger {
background-color: #f0643b!important;
}
/* Formulario Login */
.justify-content-center {
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
}
/* Inputs formulario */
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.9rem + 2px);
padding: 0.45rem 0.9rem;
font-weight: 400;
line-height: 1.5;
color: #6c757d;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.2rem;
}
/* Check recordar usuario*/
#recordarUsuario{
}
/* Olvide clave */
#olvideMiPass{
}
/* Boton "Entrar y Reestablecer contraseña"*/
.btn-primary {
color: #fff;
background-color: #5089de;
border-color: #5089de;
}
/* Pie de Pagina */
.card-footer {
padding: 1rem 1.5rem;
background-color: #edeff1;
border-top: 0 solid #f7f7f7;
}
/* Formularios modales */
#modalNuevoPass {
padding-right: 17px!important;
}
#modalNuevoUsuario{
padding-right: 17px!important;
}
/* Boton Cancelar en modal*/
.btn-info {
color: #fff;
background-color: #56c2d6;
border-color: #56c2d6;
}
/* Boton confirmar en modal */
.btn-success {
color: #fff;
background-color: #23b397;
border-color: #23b397;
}
/* PopUp en caso de registrarse correctamente */
.swal2-popup {
display: none;
position: relative;
flex-direction: column;
justify-content: center;
width: 32em;
max-width: 100%;
padding: 1.25em;
border-radius: 0.3125em;
background: #23b397;
font-family: inherit;
font-size: 1rem;
box-sizing: border-box;
}
Teniendo en cuenta esos elementos crear un archivo .css, subirlo en un Hosting y poner en el parámetro “Hoja de estilo” mencionado anteriormente la ruta a dicho archivo.
Los que menciono son los principales, pero podría modificar además otras cosas, en caso de necesitarlo. Una forma fácil de analizarlo es mediante las herramientas de depuración que poseen los navegadores. En este caso mencionaré como hacerlo en Chrome pero es similar en otros navegadores.
Presionamos F12 o botón derecho sobre el elemento que queremos inspeccionar y luego “Inspeccionar”. Esto abre una pestaña nueva y muestra el tipo de elemento y su clase para después modificarlo en el CSS.
