Editor de branding

Para la versión 11.30 de cPanel

Esta característica le permite editar las imágenes del encabezado y pie de página en cada plantilla, al igual que los iconos de la página principal para el estilo.

En la parte superior de la página, aparecen dos opciones:

  • Crear/cargar branding — Este botón le permite duplicar el estilo root para que usted lo pueda editar o pueda cargar un estilo nuevo que haya creado.
  • Descargar/borrar branding — Este botón le permite descargar un estilo en su computadora local para editar o eliminar un estilo.

parte_superior_de_la_pantalla_editor_de_branding.png
La parte superior de la pantalla Editor de branding.

Duplicar un estilo de branding

Para duplicar un estilo de branding:

1. Pulse Crear/cargar branding en la primera página.

2. Escriba el nombre del estilo nuevo de branding en el campo Nombre.

  • Esta característica duplicará el estilo de branding predeterminado para que usted pueda descargar o editarlo sin hacerle daño al original.

crearcargar_estilo_de_branding.png
La opción Crear un estilo nuevo de branding.

3. Pulse Crear.

  • WHM duplicará el estilo root.

4. Ahora puede pulsar el medio de dos opciones para editar el estilo que acaba de crear:

  • Hacia atrás a editar (Volver a editar) — Regresa a la pantalla Editar branding, donde puede personalizar el tema con sus propios logotipos, encabezado, etc.
  • Hacia atrás al editor de branding (Volver al editor de branding) — Regresa a la pantalla de inicio del editor de branding.

Descargar un estilo de branding

Para descargar un estilo de branding:

1. Pulse Descargar/borrar branding en la primera página.

2. Pulse el enlace Descargar junto al estilo que desea descargar.

  • Si nunca ha descargado antes el estilo, pulse Descargar (sistema). Si ya ha personalizado y subido una versión de este estilo, tendrá la opción de seleccionar Descargar (suyo) para volver a descargarlo.
  • Un archivo *.tar.gz descargará a su computadora.

descargarborrar_estilo_de_branding.png
La pantalla Descargar/borrar el estilo.

Editar un estilo de branding

Cuando haya descargado el estilo que desea editar:

1. Extraiga el contenido del archivo. Para lograr esto:

  • Si usa una máquina con Windows®, tendrá que descargar un programa (como WinRAR) para extraer el contenido del archivo. Por predeterminación, Windows no maneja un archivo .tar.gz.
  • Si utiliza una máquina con Mac® o *nix, puede usar el comando tar -xvzf de la CLI para extraer el contenido del archivo .tar.gz, o, simplemente, puede abrirlo con el programa de extracción que desee.

2. Cambiar los archivos a su gusto.

  • PICK Recuerde: El tamaño de las imágenes contenidas en el archivo .tar.gz debe quedarse igual para manetener la apariencia del estilo.
  • PICK Recuerde: Tendrá que dejar igual los nombres de archivo; de lo contrario, el servidor no va a saber dónde colocar los archivos en la interfaz.

3. Antes de subir los archivos al servidor, vuelva a colocarlos en un archivo .tar.gz.

  • Con el mismo programa que empleo para extraer el contenido, utilice una máquina Windows para reemplazar el contenido nuevo en un, archivo .tar.gz.
  • En una máquina *nix, puede usar el comando tar -cvzf o comprimir el contenido del archivo de nuevo en un archivo .tar.gz con el software de compresión que elija.

note ¡Ojo!: Para obtener más información sobre el comando tar, consulte las páginas man al escribir man tar en la CLI.

Cargar un estilo de branding

Para cargar un estilo nuevo de branding:

1. Pulse Crear/cargar branding en la primera página.

2. Pulse el botón Choose file (Elegir archivo).

cargar_un_estilo_nuevo_de_branding.png
La opción Cargar un estilo nuevo de branding.

3. Seleccione el archivo en su computadora.

  • El tipo de archivo esperado es un archivo tarball (.tar.gz).

4. Pulse Cargar.

5. Ahora puede pulsar una de dos opciones para editar el estilo que acaba de cargar.

  • Hacia atrás a editar (Volver a editar estilo) — Le lleva a la página Editar estilo de branding, donde puede personalizar el tema con sus propios logotipos, encabezado, etc.
  • Hacia atrás a regresar al editor de branding (Volver al editor de branding) — Le lleva de nuevo a la pantalla inicia del editor de branding.

opciones_despues_de_cargar_un_estilo.png
Opciones después de cargar un estilo.

Borrar un estilo de branding

Para borrar un estilo de branding que ha cargado:

1. Pulse Descargar/borrar branding en la página inicial.

2. Pulse Borrar estilo junto al estilo de branding que quiere borrar de su servidor.

3. Confirme que quiere borrar el estilo al pulsar Remover paquete de personalización (Borrar paquete de branding) en la página siguiente.

  • Pulsa Cancelar para mantener el estilo.

note ¡Ojo!: No puede borrar el estilo root (predeterminado) instalado con cPanel.

la_pantalla_descargarborrar_el_estilo_.png
La pantalla Descargar/borrar el estilo.

La pantalla inicial del editor de branding

La pantalla inicial del editor de branding también tiene varias opciones de estilos existentes en su servidor. Puede acceder a una lista de cuatro opciones bajo cada estilo en su servidor y una casilla sobre el estilo.

estilos_de_branding_disponibles.png
Opciones disponibles, por estilo, en la pantalla del editor de branding.

Cómo usar estas opciones:

  • Para que el estilo esté disponible para los usuarios, seleccione la casilla Activado.
  • Para usar un estilo para su cuenta de cPanel, pulse Aplicar branding (Aplicar a mi cuenta).
  • Para usar un estilo para todas las cuentas de sus usuarios, pulse Aplicar a todas las cuentas.
    • Si accedió este editor de branding al seleccionar una plantilla desde la pantalla de branding de WHM, entonces esta opción sólo aplica a las cuentas que utilizan la pantilla seleccionada.
    • Si usted es un proveedor, esta opción sólo aplica a las cuentas que usted posee que utilizan la plantilla seleccionada.
    • Para más información sobre el branding de cPanel como root o proveedor, lea nuestra guía de branding avanzada.
  • Para seleccionar un estilo como el estilo predeterminado para las cuentas nuevas, pulse Configurar por defecto para sus cuentas nuevas (Aplicar el estilo predeterminado a las cuentas nuevas).
  • Para editar un estilo, pulse Editar branding.

editar_el_estilo_de_establecimiento_de_marca.png
La pantalla Editar el estilo.

Cuando selecciona esta opción, las siguientes opciones presentadas le permiten editar varios aspectors de la interfaz de cPanel:

  • Editar logotipos
  • Editar iconos
  • Editar encabezado/pie de página
  • Editar premostrar imágenes (vista preliminar de imágenes)
  • Editar páginas de HTML
  • Editar hojas de estilo

Cambiar un logotipo

Para cambiar un logotipo:

1. Pulse Editar Logotipos.

  • Los logotipos se localizan en la parte superior de la interfaz de cPanel. Use la imagen en la pantalla como

Cargar_logotipo.png
La pantalla Editar logotipos.

2. Pulse el botón Choose file (Elegir archivo).

  • El logotipo nuevo debe nombrarse top-logo.png.
  • Puede pulsar Resetear (Reiniciar) para cambiar el logotipo a su posición predeterminada.

3. Seleccione el archivo en su computadora que desea utilizar como el logotipo nuevo.

4. Pulse Cargar imágenes.

5. Su logotipo aparecerá en la parte superior de la pantalla de Editar logotipos.

  • Seleccione y arrastre al lugar donde desea que aparezca.
  • Cambie el tamaño del logotipo con los manipuladores que aparecen cuando se coloca el cursor sobre él.
  • El código CSS en el centro de la pantalla se actualizará cada vez que se mueve el logotipo. Desde aquí, usted puede cortar y pegarlo en la pantalla Editar página de estilo (pulse el enlace Editar para acceder a esta pantalla).

editar_logotipos.png
Después de cargar el logotipo, pulse el encabezado para cambiar el tamaño o moverlo.

Cambiar un icono

Para cambiar un icono:

1. Pulse Editar iconos.

  • Los iconos se encuentra en la pantalla principal de la interfaz de cPanel. Se usan para destacar las características de sus usuarios.
  • PICK Recuerde: Use iconos adecuados y claros para asegurarse de que usted y sus usuarios de cPanel puedan navegar por la interfaz fácilmente.

iconos_de_la_pagina_principal.png
La parte superior de la página inicial de iconos.

2. Pulse el botón Choose file (Elegir archivo).

  • Los iconos personalizados tienen que tener los mismos nombres que los originales.
  • Puede pulsar Resetear (Reiniciar) para cambiar el icono a su posición predeterminada.

3. Elija el archivo que desee usar como un icono en su computadora.

parte_inferior_de_la_pagina_indice_de_editar_iconos.png
La parte inferior de la página índice de editar iconos.

4. En la parte inferior de la pantalla, pulse Cargar imágenes.

  • Puede pulsar Revertir todos los iconos (Reiniciar todos los iconos) para cambiar todos los iconos a sus posiciones predeterminadas.
  • Puede pulsar Generar sprites si su icono no se muestra correctamente. Esto regenerará el archivo de cPanel que contiene el (los) icono(s) y puede arreglar el problema.

Más información acerca de los sprites

Los sprites le permiten ahorrar banda ancha y mejorar rendimiento al reducir el número de peticiones al servidor web. Lo hacen al almacenar todos los botones e iconos en una sola imagen. Al cargar una imagen, los sprites se deben generar de forma automática.

Sin embargo, la interfaz de WHM contiene un enlace, Generar sprites, en caso de que el proceso encuentre un problema. El enlace fue creado como una prueba de fallas y debe ser utilizado si los cambios que le ha hecho a la apariencia de la interfaz de cPanel no se aceptan de forma automática.

Cambiar encabezado/pie de página

Para cambiar el encabezado/pie de página:

1. Pulse Editar encabezado/pie de página.

  • Los encabezados y pies de página se encuentran en la parte superior e inferior de la interfaz de cPanel y a menudo sirven como enlaces constantes hacia las secciones comúnmente visitadas de la interfaz.

parte_superior_de_la_pagina_de_encabezado_y_el_pie.png
La parte superior de la página de encabezado y el pie.

2. Busque la imagen que desea reemplazar. Para ayudarle a encontrar la imagen correcta:

  • Los números rojos aparecen en el encabezado y el pie de la página. Cuando pulsa un número, el archivo que le corresponde parpadeará.
  • Del mismo modo, cada archivo tiene un número de imagen que puede pulsar. Al pulsar el número, la imagen que corresponde con el encabezado o del pie de página parpadeará.

3. Pulse el botón Choose file (Elegir archivo).

  • Los encabezados o pies de página personalizados tienen que tener los mismos nombres que los originales.
  • Puede pulsar Resetear (Reiniciar) para cambiar el encabezado o pie de página a su posición predeterminada.

4. Seleccione el archivo que desea usar como icono de su computadora.

parte_inferior_de_la_pagina_de_encabezado_y_pie_de_pagina.png
La parte inferior de la página de encabezado y pie de página.

5. Pulse Cargar imágenes en la parte inferior de la pantalla.

    • Puede pulsar Resetear todos los iconos Reiniciar todos los iconos para cambiar los encabezados y pies de página a su posición predeterminada.
    • Puede pulsar Generar sprites si su imagen no se muestra correctamente. Esto generará el archivo que contiene la(s) imagen(es) de cPanel y puede arreglar el problema.

Editar la UI (Editar la interfaz de usuario)

Para cambiar la apariencia general de la interfaz de usuario:

1. Pulse Editar UI (Editar la interfaz de usuario).

  • Estas imágenes se encuentran en muchos lugares de la interfaz e incluyen los bordes y botones.
  • Tenga cuidado de examinar cada foto y la descripción para asegurarse de que va a reemplazar los archivos correctos.

parte_superior_de_la_pagina_editar_imagenes_de_UI.png
La parte superior de la página Editar imágenes de UI.

2. Pulse el botón Choose File (Elegir archivo).

  • Las imágenes personalizadas tienen que tener los mismos nombres que los originales.
  • Puede pulsar Resetear (Reiniciar) para cambiar la apariencia de la interfaz a su posición predeterminada.

3. Seleccione el archivo que desea usar como icono.

parte_inferior_de_la_pagina_editar_imagenes_de_UI.png
La parte inferior de la página Editar imágenes de UI.

4. Pulse Cargar imágenes en la parte inferior de la página.

  • Puede pulsar Restablecer todas las imágenes (Reiniciar todas las imágenes) para cambiar la apariencia de la interfaz a su posición predeterminada.
  • Puede pulsar Generar sprites si su imagen no se muestra correctamente. Esto generará el archivo que contiene la(s) imagen(es) de cPanel y puede arreglar el problema.

Cambiar la imagen premostrada de un estilo (Cambiar la imagen de vista preliminar de un estilo)

Para cambiar la forma en que la imagen premostrada (la imagen de vista preliminar) aparecerá en el editor de branding de cPanel:

1. Pulse Editar las imágenes premostradas (Editar las imágenes de vista preliminar).

  • Puede sustituir una de las dos imágenes preliminares: la imagen grande o la imagen pequeña.
  • La imagen pequeña se muestra en la pantalla inicial del editor de branding.

parte_superior_de_la_pagina_editar_imagenes_premostradas.png
La parte superior de la página Editar imágenes premostradas (Editar imágenes de vista preliminares).

2. La imagen grande se muestra cuando un usuario pulsa la imagen pequeña en la pantalla inicial del editor de branding.

3. Pulse el botón Choose file (Elegir archivo).

  • Debe seleccionar una captura de pantalla del estilo, ya que será más clara cuando sus usuarios seleccionan la interfaz preferida.
  • Las capturas de pantalla personalizadas tienen que tener los mismos nombres que los originales.
  • Puede pulsar Resetear (Reiniciar) para usar la imagen de vista preliminar predeterminada.
  • PICK Recuerde: Tiene que repetir este proceso para de las imágenes grandes y pequeñas.

parte_inferior_de_la_pagina_editar_imagenes_premostradas.png
La parte inferior de la página Editar imágenes premostradas (Editar imágenes de vista preliminares).

4. Pulse Cargar imágenes en la parte inferior de la pantalla.

  • Puede pulsar Revertir todas las premuestras (Revertir todos los preliminares) para cambiar las dos imágenes de vista preliminar a sus posiciones predeterminadas.

Editar un HTML de estilo

Tiene dos opciones para editar el HTML de estilo directamente: puede usar el editor de *.html de cPanel o puede cargar su archivo personalizado.

Utilizar el editor de HTML de cPanel

Para editar las páginas de HTML del estilo:

1. Pulse el enlace Editar páginas de HTML.

parte_superior_de_la_pagina_editar_html.png
La parte superior de la página Editar HTML.

2. Pulse Editar para editar el HTML en el editor.

  • Puede pulsar Reponer (Revertir) para deshacer los cambios hechos en el editor.

el_editor_de_html.png
El editor de HTML.

3. Puede pulsar Salvar para guardar los cambios que efectuó en el editor.

  • Puede pulsar Resetear (Reiniciar) para cambiar la página de HTML a su posición predeterminada.
  • Puede presionar el botón derecho del ratón en el nombre del archivo de HTML para descargarlo a su computadora y editarlo en un editor de texto.

Cargar su página de HTML personalizada

Alternativamente, puede subir una página de HTML personalizada:

1. Pulse el botón Choose file (Elegir archivo) junto al archivo que desea reemplazar y navegar al archivo *.html que desea cargar.

parte_inferior_de_la_pagina_editar_html.png
La parte inferior de la página Editar HTML.

2. Pulse Cargar páginas en la parte inferior de la pantalla.

  • Puede pulsar Resetear (Reiniciar) para cambiar la página de HTML a su posición predeterminada.
  • Puede presionar el botón derecho del ratón en el nombre del archivo de HTML para descargarlo a su computadora para editarlo en un editor de texto.

ALERT! Advertencia: Si no usa un lenguaje de UTF-8, debe tener mucho cuidado de no emplearlo al crear páginas de HTML. En este caso, utilizar los datos en lenguaje UTF-8 resultará en una página corrompida.

Editar la CSS de un estilo

Para editar la hoja de estilo en cascada (CSS):

1. Pulse el enlace Editar hojas de estilo.

pagina_editar_hojas_de_estilo_.png
La página Editar hojas de estilo.

2. Haga cualquier cambio o adición en el cuadro del editor de CSS.

3. Pulse Salvar CSS para guardar los cambios.

  • Puede pulsar Reponer (Revertir) para cambiar la página de estilo a su posición predeterminada.

ALERT! Advertencia: Si usa un lenguaje UTF-8, debe tener mucho cuidado de no utilizarlo al crear páginas de HTML. En este caso, el uso de los datos del lenguaje UTF-8 resultará en una página corrompida.

Topic revision: r12 - 21 Feb 2012 - 21:43:32 - Main.RosieArcelay