Comprensión de los archivos indispensables de un tema

Última actualización: March 30, 2016

Para poder funcionar correctamente, los temas utilizan diversos archivos CSS y JavaScript. Este artículo describe los elementos indispensables para el funcionamiento de los temas predeterminados de HubSpot. 
Los temas predeterminados de HubSpot sólo están disponibles en nuevas cuentas de HubSpot. Si desea tener un tema estándar instalado en su cuenta existente, siga estas instrucciones para asegurarse de que su cuenta es compatible con estos temas.

Clases personalizadas de los temas

Para poder reproducir determinados aspectos del diseño de los temas de HubSpot, es necesario aplicar clases personalizadas a ciertos grupos y módulos. Cuando es necesario modificar las plantillas de los temas, se recomienda agregar módulos dentro de los grupos existentes para asegurarse de que las clases permanezcan intactas. Para obtener una lista de algunas de las clases personalizadas que se usan con mayor frecuencia, haz clic aquí.

Hojas de estilo indispensables para los temas

De forma predeterminada, las plantillas de los temas de HubSpot tienen adjuntas una hoja de estilo maestra con un nombre específico para cada tema. El nombre del archivo CSS incluye el nombre del tema; por ejemplo, el archivo CSS del tema Stratus se denomina "stratus-style.css". Las hojas de estilo contienen datos sobre la estética de los temas y son los archivos que deben editarse primero en caso de que sea necesario hacer cambios en el diseño. 

Los archivos CSS están adjuntos a las plantillas (Editar > Editar encabezado), y los archivos CSS globales están deshabilitados. Esta configuración te permite asegurarte de que el tema tenga el estilo correcto. 

Editar la etiqueta del encabezado
Por favor, tenga en cuenta que aunque los temas de HubSpot están configurados para que sólo apliquen sus hojas de estilo CSS correspondientes, archivos que están codificados como etiquetas de enlace en su sitio de cabecera HTML en su configuración de contenido seguirán siendo aplicables a estas plantillas. Esto puede crear problemas de visualización, si dichos archivos tienen un conflicto con el CSS de los temas. Para obtener más información acerca de asegurarse que no hay secuencias de comandos de etiquetas de enlace en conflicto en la configuración de contenido, siga estas instrucciones.

Archivos CSS incluidos

Dentro del editor del archivotheme-name.css(es decir, velocity.css, clarity.css, etc.), hay otros archivos CSS que se incluyen en un archivo CSS final. Entre estos archivos, se incluyen los siguientes:

  • required-base.css: es un archivo CSS que contiene un código para la rejilla con capacidad de respuesta de HubSpot.
  • theme-foundation-v1-0.csseste archivo alberga todas las CSS para los iconos de fuente y las animaciones CSS3. Incluye las CSS de los iconos de Font Awesome y los códigos de animate.css para las animaciones. 
  • hubtheme-modules.csses un archivo indispensable que contiene estilos básicos para los módulos de COS y está incluido en el archivo style.css. No es necesario editarlo.
  • recommended.css : es un archivo CSS adicional que incluye correcciones recomendadas y estilos para los elementos HTML5.

Si editas cualquiera de estos archivos, deberás volver a publicar el archivo maestro theme-name.css para que los archivos actualizados se incluyan en el archivo CSS final. 

Archivos CSS incluidos

Fuentes incluidas

Los archivos CSS de los temas predeterminados de HubSpot tienen una etiqueta @import en la parte superior para cargar diversas fuentes de Google Fonts. Para obtener más información sobre cómo incluir fuentes personalizadas de Google Fonts en un archivo CSS de HubSpot, consulta este artículo.

Etiqueta @import para las fuentes

Variables de color

Las hojas de estilo de los archivos CSS de los temas se basan en variables de color de énfasis que te permiten crear contenido rápidamente y en función de tu marca Si no sabes qué significa esto, no te preocupes. Es muy fácil.  Lo único que necesitas es un color de tu compañía (valor hexadecimal). Antes de que te des cuenta, tendrás un sitio web que se adapta a la marca y el color de tu compañía.

Para modificar el color, edita el archivo theme-name.css (es decir, stratus.css, clarity.css, etc.) en el Administrador de diseño. Los colores de las variables de HubL se definen en la parte superior del archivo CSS (como se muestra a continuación). Si modificas los valores hexadecimales que están entre comillas (p. ej., "#666") y vuelves a publicar el archivo CSS, los colores del tema se modificarán.

Variables de color
Por favor tome nota que cometer errores de sintaxis en estas variables Hubl pueden hacer que el archivo CSS falle al compilar. Al hacer cambios a estas variables de color, asegúrese de que sólo este cambiando el valor entre comillas.

Archivos JavaScript indispensables

Los temas predeterminados de HubSpot también se basan en dos archivos JavaScript clave: theme-name-main.js (es decir, stratus-main.js, velocity-main.js) y theme-foundation-v1-0.js. Los archivos están incluidos en ese orden en un módulo HTML del pie de página global. Este pie de página global está en todas las plantillas de los temas y no debe eliminarse.

Módulo de pie de página con JavaScript

theme-name-main.js

Este archivo JavaScript se usa para crear o activar el menú móvil y mostrar las imágenes del fondo que se encuentran en el banner del tema; además, contiene códigos que permiten que los códigos breves del módulo de iconos se muestren como iconos de Font Awesome. 

theme-foundation-v1-0.js

Este archivo JavaScript contiene códigos de wow.js para las animaciones activadas por desplazamiento por la página y para los códigos que permiten que los códigos breves del módulo de iconos se muestren como iconos de Font Awesome (también se encuentran en el archivo theme-name-main.js).  

La extracción de theme-name-main.js o theme-foundation-v1-0.js romperá diversas características del tema. No quite el pie de página global o módulo de Javascript HTML del pie de página de las plantillas de temas. Para obtener más información, echa un vistazo a este artículo.

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: