Guía avanzada para el branding

Para la versión 11.30 de WHM

(Main >> cPanel >> Branding)

Una manera de comunicar el mensaje de la marca (brand) de su compañía y fomentar la lealtad a la marca es añadirle branding a las interfaces de cPanel de sus usuarios con sus logotipos e imágenes personalizadas. Sus los cambios personalizados de branding se almacenan bajo un estilo en el sistema de cPanel.

Un estilo puede tener una apariencia distintiva, pero retiene la misma funcionalidad subyacente que la interfaz predeterminada de cPanel.

Este documento provee información útil para anfitriones web interesados en añadirle branding a las interfaces de cPanel de sus usuarios.

Conceptos importantes

Estilo: Conocido también como piel (o skin), el estilo contiene las gráficas que determinan la apariencia de la interfaz de cPanel de un usuario. En la interfaz de WHM, se llama style.

Plantilla: En el software de cPanel, la plantilla es el armazón al cual se le aplica el estilo, o "piel". En la interfaz de WHM, se llama theme.

Advertencia: No edite una plantilla existente. Si hace esto sus cambios se sobrescribirán la próxima vez que cPanel se actualiza. A cambio, debe crear una plantilla nueva con los cambios deseados.

Estilos

Los estilos están disponibles para los proveedores. Si el anfitrión web lo permite, un proveedor puede crear o usar su propio estilo para reflejar la marca de su compañía.

Los estilos personalizados se encuentran en /home/$reseller/cpanelbranding/$theme/$style

• $reseller — El directorio principal del proveedor.
• $theme — La plantilla para la cual usted ha creado un estilo. Usualmente, esta será x3.
• $style — El nombre que usted le ha dado a su estilo.

Los estilos son específicos para cada plantilla. Por ejemplo, si usted crea un estilo para la plantilla x3, no funcionará con una plantilla de terceros.

Los administradores de plantilla (como el Universal Theme Manager en WHM) no pueden editar estilos. Solamente le permiten editar la plantilla subyacente.

El editor de branding de cPanel

Los proveedores y usuarios root pueden usar el editor de branding de cPanel para personalizar sus estilos. Hemos escrito instrucciones detallas sobre cómo usar el editor de branding.

La interfaz del editor de branding por lo general es suficiente para cumplir con las necesidades de branding de la mayoría de los proveedores.

La parte superior de la pantalla del editor de branding.

Copiar los estilos a múltiples cuentas

Para que los estilos estén disponibles para todas las cuentas en el servidor, cópielos a /usr/local/cpanel/base/frontend/$theme/branding/$style/. Aquí, $theme es la plantilla para la cual el estilo está diseñado (usualmente x3) y $style es el nombre de su estilo.

Este método elimina la necesidad de descargar y luego recargar el estilo a todas las cuentas de sus proveedores.

Copiar estilos a otro servidor

Con el Editor de branding, usted puede:

1. Descargar su estilo como un archivo a su escritorio.
2. Cargar la plantilla a otro servidor.

La pantalla Descargar/borrar estilo(s) de branding.

La opción Crear un estilo nuevo de branding.

Como alternativa, usted puede copiar el archivo a otro servidor por medio de SSH.

Editar una hoja de estilo

Las CSS, u hojas de estilo en cascada, gobiernan la apariencia de páginas web. Como la interfaz de cPanel es simplemente una serie de páginas web, usted puede usar CSS en la interfaz de cPanel como lo haría en una página de web regular.

La característica Editar la CSS de un estilo del editor de branding le permite modificar la CSS del estilo de cPanel.

La pantalla Editar página de estilo.

Puede ser difícil determinar cuál código de CSS tiene que editar. Si este es el caso, el plugin de Firefox, Firebug, es una herramienta útil para ayudarle a encontrar el código CSS que usted desea editar. Puede descargar Firebug en http://getfirebug.com/ (en inglés).

Recomendación: Cómo los proveedores individuales pueden desactivar los clientes de webmail

La interfaz de webmail de cPanel hereda la CSS de la cuenta de cPanel del usuario. Si usted desea desactivar una aplicación de webmail en particular para sus usuarios, puede hacerlo al añadir el siguiente código a la página Editar página de estilo del estilo apropiado:

• Para esconder Roudcube — #roundcube_cell {display:none;}
• Para esconder SquirrelMail — #sqmail_cell{display:none;}
• Para esconder Horde — #horde_cell{display:none;}

Editar páginas HTML

Esta característica le permitirá personalizar considerablemente la apariencia de las interfaces de cPanel de sus usuarios. Al editar páginas de HTML, usted puede transformar la interfaz de cPanel para imitar la apariencia de su sitio web. Todas estas páginas pueden contener llamadas al API de cPanel y WHM.

La parte inferior de la pantalla Edit HTML Pages.

API1 y API2 permiten que componentes de la interfaz gráfica (que incluye los estilos) interactuar indirectamente con el código fuente de cPanel. Personalizar las llamadas del API desde el editor de branding pueden modificar considerablemente la apariencia de la interfaz de cPanel.

Por ejemplo, estas funciones de API consultan archivos almacenados en la ruta de un estilo en particular y luego incluyen el contenido apropiado de HTML en la página.

• <cpanel Branding="image(cp)"> — Busca por el archivo de imagen cp que termina en .gif, .png o .jpg.
• <cpanel Branding="text(supportinfo)"> — Incluye el text almacenado dentro de supportinfo.txt. Usted puede añadir código HTML aquí.

La razón principal para usar estas etiquetas es el rendimiento. Cuando usted pone estos archivos en el directorio de estilo y las llama con las etiquetas <cpanel Branding>, cPanel puede guardar estos archivos en caché como sprites, lo que mejora significativamente el rendimiento.

Recomendamos encarecidamente que utilice las etiquetas <cpanel Branding> en vez de enlazar directamente a las imágenes existentes en su sitio web.

Editar imágenes preliminares

Las imágenes preliminares no se generan automáticamente. Usted debe usar la característica Cambiar la imagen de vista preliminar de un estilo para crearlos.

Esta característica le permite cargar capturas de pantalla de su plantilla. Esto aparecerá en la pantalla principal del Editor de branding de sus usuarios, para que puedan ver cómo se verá su interfaz de cPanel antes de seleccionar un estilo.

Esto es particularmente útil si usted desea distribuir sus estilos.

Obligar a los proveedores a usar su estilo

Esto es útil si su estilo refleja una marca que no se ofrece con otros estilos.

Para obligar a los proveedores a usar su estilo:

1. Aplíquele su estilo a todos sus usuarios al usar la opción Aplicar a Todas las Cuentas en el Editor de Branding.
2. Pulse la casilla Apply to all resellers' accounts as well en la ventana emergente.
3. Pulse Submit.
4. Elimine la habilidad de un proveedor de usar la opción Change Style. Pueder hacerlo al usar el Feature Manager n WHM.

Para obligar a sus proveedores a usar su estilo, aplíquele su estilo a todos sus usuarios al usar la opción Aplicar a todas las cuentas en el Editor de branding.

Luego, quíteles la habilidad de usar la opción Cambiar estilo con la característica Feature Manager de WHM.

Plugins

Un plugin de cPanel es una aplicación personalizada que usted puede enlazar directamente desde las interfaces de cPanel de sus usuarios.

Es muy simple crear un plugin con nuestro Install File Generator, o generador de archivo de instalación (en inglés).

Una vez que usted ha generado el archivo de instalación, asegúrese de seguir las instrucciones en nuestra documentación sobre cómo instalar Plugins (en inglés).

Por qué se prefieren los plugins

Los plugins trabajan independientemente del estilo o la plantilla. Como resultado, su plugin estará disponible no importa si usa una plantilla que viene con cPanel y WHM o una plantilla de terceros.

Esta independencia de plantilla también significa que es más probable que sus plugins puedan funcionar sin mantenimiento por mucho tiempo.

Cambiar o eliminar la funcionalidad de cPanel

Algunos proveedores de alojamiento, como los que ofrecen alojamiento económico con características limitadas, prefieren cobrarles a sus usuarios por algunas funciones. Para otros anfitriones web, las limitaciones técnicas de su configuración única requieren que eliminen algunas funciones para prevenir que sus usuarios se confundan.

Si usted desea eliminar funciones, puede eliminarlas con el Feature Manager de WHM. Vea nuestras instrucciones para crear y editar las listas de características con el Feature Manager.

El Feature Manager de WHM.

Plantillas personalizadas de entrada al sistema

Usted puede editar las pantallas que sus clientes ven antes de entrar a cPanel, WHM o webmail. Estas pantallas se conocen como login themes, o plantillas de entrada al sistema. Las plantillas predeterminadas son:

• cPanel — /usr/local/cpanel/base/unprotected/cpanel/login_cpaneld.html
• WHM — /usr/local/cpanel/base/unprotected/cpanel/login_whostmgrd.html
• Webmail — /usr/local/cpanel/base/unprotected/cpanel/login_webmaild.html

Para crear su propia plantilla, simplemente copie el directorio cpanel (/usr/local/cpanel/base/unprotected/cpanel/) a un directorio nuevo, como /usr/local/cpanel/base/unprotected/mycpanel. Desde aquí usted puede editar las plantillas a su gusto.

Importante: También tendrá que editar los archivos del encabezado y pie de página en su directorio de plantilla de entrada al sistema personalizado.

Una vez que haya editado su plantilla de entrada al sistema, usted puede configurarla para mostrarla con la interfaz Tweak Settings. Encuentre la opción que dice:

The login theme to display for cPanel Login.

En el campo de texto, escriba el nombre del directorio que tiene su plantilla de entrada al sistema personalizada (como, por ejemplo, mycpanel).

Importante: Su plantilla de entrada al sistema personalizada no será la interfaz de entrada predeterminada a menos que usted desactive la autenticación HTTP en Tweak Settings. Sin embargo, la autenticación HTTP se considera más segura que la alternativa: autenticación basada en cookies. Aunque la autenticación basada en cookies se considera segura, no es tan segura como la autenticación HTTP. Le pedimos que evalúe esta consideración de seguridad versus su necesidad de tener una plantilla de entrada al sistema personalizada.

Los encabezados y pies de página

Los archivos de header (encabezado) y footer (pie de página), como las páginas de entrada al sistema mencionadas anteriormente, residen en el directorio para su plantilla personalizada. Estos archivos sirven para envolver código alrededor del mensaje de entrada y proveen la plantilla general de la página Login.

• El header provee todo el código que viene antes del mensaje de entrada al sistema. Los nombres de archivo del encabezado son:
  • header.html — entrada a cPanel.
  • header_webmaild.html — entrada a webmail.
  • header_whostmgrd.html — entrada a WHM.
• El footer provee todo el código que viene después del mensaje de entrada al sistema. Los nombres de archivo del pié de página son:
  • footer.html — entrada a cPanel.
  • footer_webmaild.html — entrada a webmail.
  • footer_whostmgrd.html — entrada a WHM.

CSS e imágenes personalizadas

Usted puede editar el CSS de la plantilla de entrada al editar la página style.css en el directorio de su plantilla de entrada.

Usted también puede añadirle imágenes personalizadas a su plantilla de entrada al ponerlas en /unprotected/images.

La página de salida del sistema

La plantilla de entrada también gobierna la apariencia de la página de salida.

¡Ojo!: Si solamente desea redirigir a sus usuarios a otro URL al momento que salen del sistema, no tiene que crear una plantilla personalizada. Usted puede configurar esto con la opción de Tweak Settings que lee:

Redirect user to the following URL upon logout of the cPanel interface.

Desplegar una plantilla de entrada personalizada a través de servidores múltiples

Es muy simple desplegar una plantilla de entrada al sistema personalizada a través de múltiples servidores de cPanel y WHM. Simplemente copie los archivos a sus otros servidores de cPanel y WHM. Luego, instale cada plantilla de entrada de los servidores con Tweak Settings, como se explicó anteriormente.

Recursos útiles

YUI — La biblioteca Yahoo! User Interface es la biblioteca de JavaScript que usa cPanel y WHM para propulsar los componentes de Ajax de la interfaz gráfica de cPanel (en inglés). Es útil entender YUI si usted desea añadirle funcionalidad Ajax a cPanel.

cPanel API Basics — Aquí encontrará documentación sobre el API1 y API2 de cPanel (en inglés). No todas las funciones en las plantillas se han actualizado a API2, así que quedan algunas funciones de API1. Usted reconocerá las funciones API2, ya que típicamente tienen el formato (pero no siempre) Module::function en vez de Module="function..."