Usar CSS para personalizar Brandguide

Utilice CSS para determinar la estructura visual, el diseño y la estética de su guía de marca.

Planes:

Brandfolder

Permisos:

Propietario
Administrador

Find out if this capability is included in Smartsheet Regions or Smartsheet Gov.

CSS, o Hojas de estilo en cascada, es un lenguaje de diseño que se utiliza para crear un aspecto uniforme y visualmente agradable en varias páginas de un sitio web. El HTML determina en gran medida el contenido textual, pero el CSS determina la estructura visual, el diseño y la estética del sitio web.

La personalización de CSS solo se recomienda si tiene conocimientos avanzados de CSS, ya que el equipo de soporte no proporciona asistencia para implementar código personalizado en Brandguide.

Brandguide desinfecta el código para evitar ataques XSS. Tenga en cuenta que podemos cambiar el código subyacente de Brandguide en cualquier momento, lo que puede afectar su CSS y HTML.

Usar CSS en Brandguides

Abra su Brandguide.
Seleccione Configuración en el menú de la izquierda.
Desplácese hacia abajo hasta la sección Customization e ingrese su código en el cuadro de texto CSS .

Propiedades útiles de CSS

A continuación, le mostramos algunas propiedades de CSS que pueden resultarle útiles para personalizar su Brandguide:

Propiedades del texto

font-family: Establece la fuente del texto, por ejemplo: Arial o Times
font-size: Establece el tamaño de fuente, por ejemplo: 5px o 1em
font-weight: Establece el peso de la fuente o "negrita", por ejemplo: "bold" o 200
color: Establece el color del texto, por ejemplo: blue, #add8e6 o rgb(135,206,250)
line-height: Espacio vertical entre líneas, por ejemplo: 5px o 1em
letter-spacing: Espacio entre caracteres, por ejemplo: 5px o 1em
word-spacing: Espacio entre palabras, por ejemplo: 5px o 1em

Propiedades de fondo

background-color: Establezca el color de fondo del elemento, por ejemplo: blue, #add8e6 o rgb(135,206,250)
background-image: Establece una imagen de fondo basada en la URL, por ejemplo: url('sample-image.jpg')
background-position: Establece la posición inicial de una imagen de fondo, por ejemplo: centro o 50%

Propiedades del espacio

Las siguientes propiedades aceptan auto, heredar, % o cualquier unidad de longitud de CSS

height: Establece la altura del elemento
anchura: Establece el ancho del elemento
padding: Establece el espacio de relleno del elemento
margin: Establece el espacio del margen del elemento

Longitudes y unidades

px: Píxeles (1px = 1/96 de 1 pulgada)
em: Relativo al tamaño de fuente del elemento (3em = 3 veces el tamaño de la fuente actual)
vw: Relativo al 1% del ancho de la ventana gráfica
vh: Relativo al 1% de la altura del mirador
%: Relativo al elemento primario

Agregar fuentes de terceros

@font-face es una regla de CSS que le permite importar y utilizar fuentes de terceros en su Brandguide. Le recomendamos que agregue su fuente a través de CSS en el nivel de configuración global (a diferencia del nivel de bloque).

Puede agregar una fuente de terceros de dos maneras:

Vaya a la biblioteca de fuentes de su elección y seleccione la fuente que desea agregar a su Brandguide, y copie y pegue la URL.

O bien

Convierta la fuente a un formato woff o woff2. Este formato de fuente web es más compatible con los navegadores que los formatos de archivo de texto ttf/otf.

Las siguientes secciones muestran cada forma.

Usar una fuente de terceros tal cual

Vaya a la biblioteca de fuentes de su elección y seleccione la fuente que desea agregar a su Brandguide. En este ejemplo, utilizamos Satisfy de Google Fonts.
Una vez seleccionada, copie y pegue la URL de @import en una nueva pestaña del navegador.

Esto te llevará a una página que contiene la URL y el formato necesarios para importar la fuente a tu Brandguide.

4. Copia la URL src y pégala en el código @fontface y font-family, como en el siguiente ejemplo:

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

Pega el código en el cuadro CSS y Selecciona Actualizar CSS para guardar los cambios.

La fuente recién importada se completa en el menú desplegable Tipo de letra predeterminado en el menú lateral Configuración global.

Utiliza la siguiente sintaxis como plantilla para cualquier otra fuente que quieras usar; simplemente actualiza el font-family y la URL src para que coincidan con la fuente deseada. Es la misma sintaxis que el ejemplo anterior; es todo lo que necesitas para importar la fuente.

@font-face {
font-family: '[Font name}';
src: url([Font SRC URL);
}

Usa una fuente convertida al formato WOFF o WOFF2

Encuentra un convertidor de fuentes a WOFF o WOFF2.
Convierte la fuente a un formato WOFF o WOFF2 y descárgala. Este formato de fuente web es más compatible con los navegadores que los formatos de archivo de texto ttf/otf.
Sube la fuente a una sección de archivos dentro de Brandfolder.
Abre el activo, ve a la pestaña Insertar y selecciona Copiar enlace.
Copia el código siguiente en el cuadro CSS. Establece la familia de fuentes que desees y reemplaza la URL con el enlace que copiaste en el paso anterior. Guarde los cambios.

@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff');
}

Tenga en cuenta que las fuentes importadas de esta manera no aparecen en el menú desplegable Tipo de letra predeterminado. En su lugar, debe aplicar manualmente la fuente dentro de la sección CSS. A continuación, se muestra un ejemplo de aplicación de la fuente Bold Web a etiquetas de párrafo importadas.

p {
font-family: 'boldweb';
color: #333;
}

USM Content