Centro de Ayuda

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:

http://panel.elserver.com/img/login/fondo.gif
http://panel.elserver.com/img/login/encabezado1.gif
http://panel.elserver.com/img/login/encabezado2.gif
http://panel.elserver.com/img/login/encabezado3.gif
http://panel.elserver.com/img/login/mensaje.gif
http://panel.elserver.com/img/login/cuerpo1.gif
http://panel.elserver.com/img/login/cuerpo2.gif
http://panel.elserver.com/img/login/cuerpo3.gif
http://panel.elserver.com/img/login/cuerpo-fondo1.gif
http://panel.elserver.com/img/login/cuerpo-fondo2.gif
http://panel.elserver.com/img/login/cuerpo-inferior.gif
http://panel.elserver.com/img/login/input-on.gif
http://panel.elserver.com/img/login/input-off.gif
http://panel.elserver.com/img/login/txt-usuario-on.gif
http://panel.elserver.com/img/login/txt-usuario-off.gif
http://panel.elserver.com/img/login/txt-cuenta-on.gif
http://panel.elserver.com/img/login/txt-cuenta-off.gif
http://panel.elserver.com/img/login/txt-contrasena-on.gif
http://panel.elserver.com/img/login/txt-contrasena-off.gif
http://panel.elserver.com/img/login/submit.gif
http://panel.elserver.com/img/login/submit-enviarme.gif
 

  • 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)

LAYOUT

SAMPLE COLOR

Please read our documentation file to know how to change colors as you want

BACKGROUND COLOR

BACKGROUND TEXTURE