Preguntas Frecuentes

Panel de Control » Multicuenta

Cómo modifico el estilo del formulario de acceso al panel de control?

Para cambiar el estilo del formulario de acceso al panel de control, tenés que seguir estos pasos:

Cambiar las imágenes incluídas por defecto, y subirlas vía FTP. Las rutas a las imágenes por defecto son:

Incluir el siguiente código css, modificando las rutas a las imágenes por la ubicación absoluta de las que hayas cargado. Por ejemplo, reemplazar:

background: transparent url("/img/login/encabezado1.gif") no-repeat top

por:

background: transparent url("http://www.ruta-a-la-nueva-imagen.com/imagen.gif") no-repeat top

A continuación, el código css que tenés que modificar:

body.login {
 margin: 0;
 padding: 0;
 background: #ffffff url("/img/login/fondo.gif") repeat-x top left;
 }
 
 div.loginContenedor {
 width: 400px;
 margin: 55px auto auto;
 }
 
 div.loginContenedor table {
 border-collapse: collapse;
 margin: 0;
 padding: 0;
 }
 
 td.loginEncabezadoIzquierda div { visibility: hidden; }
 td.loginEncabezadoIzquierda {
 background: transparent url("/img/login/encabezado1.gif") no-repeat top
 left;
 padding: 0;
 width: 47px;
 }
 td.loginEncabezadoCentro {
 background: #36434E url("/img/login/encabezado2.gif") repeat-x top left;
 width: 268px;
 padding: 142px 0 23px 0;
 vertical-align: top;
 }
 td.loginEncabezadoCentro span {
 display: block;
 width: 1px;
 height: 1px;
 font-size: 1px;
 }
 div.loginEncabezadoMensaje {
 font-weight: bold;
 color: #000000;
 text-align: center;
 background: #FFD200 url("/img/login/mensaje.gif") no-repeat top left;
 width: 268px;
 height: 46px;
 font-size: 10pt;
 overflow: hidden;
 }
 div.loginEncabezadoMensaje div {
 padding-top: 15px
 }
 
 td.loginEncabezadoDerecha div { visibility: hidden; }
 td.loginEncabezadoDerecha {
 padding: 0;
 background: transparent url("/img/login/encabezado3.gif") no-repeat top
 right;
 width: 47px;
 }
 
 table.loginCuerpo {
 height: 349px;
 background-color: #CCE70B;
 width: 362px;
 }
 /*
 td.loginCuerpoIzquierda div { visibility: hidden; }
 td.loginCuerpoIzquierda {
 background: #36434E url("/img/login/cuerpo1.gif") no-repeat bottom left;
 padding: 0;
 width: 47px;
 }
 td.loginCuerpoCentro {
 background: #36434E url("/img/login/cuerpo2.gif") repeat-x bottom left;
 width: 268px;
 padding: 14px 0 0 0;
 vertical-align: top;
 }
 td.loginCuerpoDerecha div { visibility: hidden; }
 td.loginCuerpoDerecha {
 padding: 0;
 background: #36434E url("/img/login/cuerpo3.gif") no-repeat bottom
 right;
 width: 47px;
 }
 */
 td.loginCuerpoIzquierda {
 background: #CCE70B url('/img/login/cuerpo-fondo1.gif') repeat-y left
 top;
 }
 td.loginCuerpoCentro {
 background:#CCE70B url('/img/login/cuerpo2.gif') repeat-x scroll left
 top;
 }
 td.loginCuerpoDerecha {
 background: #CCE70B url('/img/login/cuerpo-fondo2.gif') repeat-y left
 top;
 }
 td.loginCuerpoInferior {
 height: 40px;
 background: #CCE70B url('/img/login/cuerpo-inferior.gif') no-repeat left
 top;
 }
 div#loginOpcionesQueEsSSOContent {
 display: none;
 float: left;
 overflow: hidden;
 }
 div#loginOpcionesQueEsSSOContent a {
 color: #3E4D59;
 font-weight: bold;
 text-decoration: underline;
 }
 
 div.loginInput,
 div.loginInputBlur {
 padding-top: 26px;
 }
 div.loginInput input,
 div.loginInputBlur input {
 width: 263px;
 height: 34px;
 line-height: 34px;
 overflow: hidden;
 background: #CCE70B url("/img/login/input-on.gif") repeat-x top left;
 border: 0;
 margin: 1px 0 0 0;
 padding: 0 0 0 5px;
 font-size: 18pt;
 font-weight: bold;
 color: #000000;
 }
 div.loginInputBlur input {
 background: #CCE70B url("/img/login/input-off.gif") repeat-x top left;
 color: #626F06;
 }
 
 div.loginInputUsuario span { display: none; }
 div.loginInputUsuario {
 width: 48px;
 height: 11px;
 cursor: pointer;
 }
 div.loginInput div.loginInputUsuario {
 background: transparent url("/img/login/txt-usuario-on.gif") no-repeat
 top left;
 }
 div.loginInputBlur div.loginInputUsuario {
 background: transparent url("/img/login/txt-usuario-off.gif") no-repeat
 top left;
 }
 
 div.loginInputCuenta span { display: none; }
 div.loginInputCuenta {
 width: 45px;
 height: 11px;
 cursor: pointer;
 }
 div.loginInput div.loginInputCuenta {
 background: transparent url("/img/login/txt-cuenta-on.gif") no-repeat
 top left;
 }
 div.loginInputBlur div.loginInputCuenta {
 background: transparent url("/img/login/txt-cuenta-off.gif") no-repeat
 top left;
 }
 
 div.loginInputContrasena span { display: none; }
 div.loginInputContrasena {
 width: 74px;
 height: 14px;
 cursor: pointer;
 }
 div.loginInput div.loginInputContrasena {
 background: transparent url("/img/login/txt-contrasena-on.gif")
 no-repeat top left;
 }
 div.loginInputBlur div.loginInputContrasena {
 background: transparent url("/img/login/txt-contrasena-off.gif")
 no-repeat top left;
 }
 
 div.loginRecordar {
 margin-top: 24px;
 float: left;
 }
 
 div.loginOlvido {
 margin: 5px 0 0;
 }
 div.loginOlvido a {
 color: #3E4D59;
 font-weight: bold;
 }
 
 div.loginOpciones {
 margin-top: 60px;
 width: 262px;
 float: left;
 }
 div.loginOpciones a {
 color:#3E4D59;
 font-weight:bold;
 }
 div.loginOpcionNoTengoSSO {
 float: left;
 }
 div.loginOpcionQueEsSSO {
 margin-left: 5px;
 float: left;
 }
 
 div.loginSubmit {
 padding-top: 35px;
 text-align: right;
 }
 div.loginSubmit input {
 background: transparent url("/img/login/submit.gif") no-repeat top left;
 width: 71px;
 height: 42px;
 padding-top: 42px;
 overflow: hidden;
 margin: 0;
 border: 0;
 cursor: pointer;
 }
 
 div.loginEnviarClave {
 padding-top: 35px;
 text-align: right;
 }
 div.loginEnviarClave input {
 background: transparent url("/img/login/submit-enviarme.gif") no-repeat
 top left;
 width: 165px;
 height: 42px;
 padding-top: 42px;
 overflow: hidden;
 margin: 0;
 border: 0;
 cursor: pointer;
 }
 .loginMensajeOlvido {
 border: 2px dotted #ff0000;
 padding: 10px;
 text-align: center;
 background: #fff000;
 }

Incluir el código modificado junto con el existente desde "Agregar un Skin" en el panel de control (Panel > Diseños Personalizados)

Tags: panel, multicuenta, skin

Preguntas Frecuentes

Secciones

Panel de Control » Multicuenta

Cómo modifico el estilo del formulario de acceso al panel de control?

Votá este artículo

Artículos en esta categoría

Productos

Features

Ayuda

Social