Especial Resellers: Cómo crear skins para el nuevo Panel de Control

Especial Resellers: Cómo crear skins para el nuevo Panel de Control

skins

Como saben, tenemos un gran estreno estos días: Kinto, nuestro nuevo Panel de Control. A partir del miércoles 14 de agosto, haremos la actualización progresiva y muchos usuarios verán esta nueva versión por defecto cuando ingresen al panel.

Si tenés un plan Cloud 4 Resellers, podés ganar tiempo probando el nuevo Panel de Control ahora mismo. En esta guía, te dejamos todo lo que tenés que saber para crear skins para la nueva interfaz. ¡Adelante!

Un sistema más simple

Antes, crear y mantener un skin era complicado: debías subir un complejo archivo CSS adaptando el estilo del panel a tu imagen de marca. Una pequeña actualización significaba pedirle a un diseñador o maquetador que hiciera los cambios, subir el CSS nuevamente… Esto también nos impedía a nosotros, ELSERVER.COM, crear nuevos elementos en la interfaz, ya que quienes utilizaran un skin diferente no los verían correctamente.

Ahora, para crear un skin solamente debés elegir los colores, el tipo de letra y la URL de tu logo. ¡Y listo! Podés crear tantos como quieras, para que tus clientes tengan opciones que se adapten a su gusto.

Porque otra de las novedades es esa: el skin ya no depende de la cuenta, sino del usuario. Podés armar cuatro o cinco opciones, el usuario desde la configuración de su SSO puede guardar su favorita.

Listado de skins

Si tenés un plan Reseller, al ingresar al nuevo Panel de Control verás en el menú izquierdo la opción “Temas”.

Al hacer click allí, verás el listado de todos los temas (skins) que tenés disponibles para tus clientes. Por defecto, verás dos:

– Uno llamado Default, el skin marca blanca por defecto disponible para todas las cuentas de la plataforma.

– Y otro llamado elserver, un skin heredado: podés verlo y tomarlo como referencia, pero no lo van a ver tus clientes.

Crear un nuevo skin

Para crear tu primer skin, hacé click en “Nuevo tema”. Verás un formulario en la parte derecha, donde podrás completar:

Datos básicos

– El nombre del skin: cualquier nombre que te ayude a identificarlo.

– Si es visible: mientras lo estés preparando, quizás no quieras que tus clientes lo vean. Si es así, dejá esta opción destildada.

– Si es el skin por defecto: define si es el tema predeterminado para tus clientes. Cada usuario SSO puede guardar en sus preferencias el skin que quiere utilizar, pero por defecto verá el tema que tildes con esta opción.

Apariencia

Logo: es la imagen que aparecerá en la esquina superior izquierda del panel. Debe ser un PNG con fondo transparente, de 245 x 35 pixels. Debés escribir la URL completa de la imagen, incluyendo http://. Si querés, podés utilizar este ejemplo como punto de partida.

Color principal: es el color que tendrán la barra superior, los enlaces, el indicador de sección activa, las carpetas… ¡todo! Cambiando este color, podés cambiar toda la apariencia del panel. Debe ser un código de color hexadecimal completo, por ejemplo #0088cc. Pronto incluiremos un colorpicker para que el trabajo sea aún más sencillo.

Tamaño de letra: el tamaño base que tendrá el texto en el panel. Debe ser un valor en pixels, entre 12 y 15.

Tipo de letra: podés elegir entre Open Sans, Tahoma, Arial y Verdana.

Previsualizar un skin

Para ver cómo quedaría, podés hacer click en “Previsualizar”. Se abrirá una ventana modal donde podrás ver el skin en acción.

Cambios en el skin

Los cambios podés hacerlos y previsualizarlos en cualquier momento, pero los usuarios que ya estuvieran logueados al panel y utilizando ese skin verán el cambio recién una vez que inicien sesión nuevamente.

Tu skin, tu estilo

Como ves, crear un skin es muy sencillo y tiene un gran efecto en cada detalle de la interfaz de Kinto. Por ejemplo, eligiendo un logo y definiendo el color principal en un tono violeta, podemos lograr algo como:

custom01

El color principal define también los colores de las carpetas, por ejemplo, cuando navegamos por los backups web:

custom02

Ahora con un sólo cambio, podés hacer que tus clientes se sientan como en casa.

Utilizar tus propios skins

Los usuarios SSO de cuentas revendedoras son los únicos que pueden elegir un skin que ellos mismos han creado. Desde el menú de tu SSO, en la esquina superior derecha del panel, podés ir a la sección “Temas” y seleccionar para tu uso personal un skin provisto por ELSERVER o creado en tu multicuenta.

Esto es muy útil para que, si estás vendiendo a la vista de tu potencial cliente, no vea el logo de ELSERVER en ninguna parte de tu pantalla.

En resumen

Esperamos que puedan crear skins con su logo y sus colores de una forma más simple. Si tienen alguna consulta, no duden en contactarnos por mail o bien en los comentarios de esta nota, para que podamos ayudarlos.

¡Nos leemos la próxima!

Related Post
Especial Resellers: Cómo crear un login personalizado para el nuevo Panel de Control

Si sos revendedor, sabés lo importante que es ofrecer una experiencia personalizada a tus clientes. Ya te contamos cómo hacer que Kinto, el nuevo Panel de Control, se adapte a la imagen de tu marca. Hoy te mostramos cómo hacer una pantalla de login, para que tus clientes ingresen a sus cuentas desde tu propio […]

Read more
Nuevo Panel de Control: Aviso IMPORTANTE

¡Se viene KintoPanel.com! Con mucha alegría te contamos que a partir del 14 de Agosto y de manera progresiva, estaremos habilitando el nuevo Panel de Control de ELSERVER.COM el cual bautizamos: KintoPanel. Esto significa que cada vez que accedas a la URL panel.elserver.com te estarás logueando en la nueva interfaz, mucho más rápida, amigable y flexible. Hasta acá […]

Read more
Se viene el nuevo Panel de Control

Estamos a unas semanas de cerrar la etapa de testeos de nuestro nuevo Panel de Control, ¿ya lo probaste? A partir de Junio  de 2013 estaremos utilizando esta nueva interfaz, mucho más rápida, amigable e intuitiva. Con todas las funcionalidades que ya conocés pero con una performance muy superior. Si querés saber más acerca de […]

Read more
Post has 2 comments
  • Mariano Posted 22 agosto, 2013 in 9:52 pm

    La función de poner la imagen png en el header del panel de control no está funcionando.

  • Dev Team Posted 22 agosto, 2013 in 11:39 pm

    Corregimos un error en la nota: debés ingresar la URL completa, incluyendo http://, si tenés alguna otra duda o consulta escribinos a desarrollo@elserver.com que te ayudamos a armarlo. ¡Un saludo!

Deja un comentario

LAYOUT

SAMPLE COLOR

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

BACKGROUND COLOR

BACKGROUND TEXTURE