Personalización de una Brandguide usando CSS – Getty Images Media Manager

¡Bienvenido a la nueva experiencia Brandguide! Este artículo, así como Comenzando con Brandguide y Construcción y Estilo de una guía de marca te explicarán cómo migrar tu contenido a la nueva interfaz. Las capacidades de edición de tu Brandguide actual desaparecerán el 1 de septiembre de 2023. A partir del 1 de diciembre de 2023, el editor de Brandguide anterior ya no estará disponible.

CSS o “Hojas de estilo en cascada” es un lenguaje de diseño que utilizan los desarrolladores web para crear una mirada uniforme y visualmente agradable a través de varias páginas de un sitio web. HTML determina en gran medida el contenido textual, pero CSS determina la estructura visual, el diseño y la estética del sitio web.

Sintaxis CSS

La sintaxis CSS consiste en un conjunto de reglas. Estas reglas tienen 3 partes: un selector, una propiedad y un valor.

Selector {
property: value;
}

El selector representa el elemento HTML que se desea estilizar. La propiedad se refiere a un aspecto específico del elemento HTML como color, font-family o margen. Cada propiedad usada en CSS tiene un conjunto de valores aceptados, por ejemplo un código hexadecimal o un valor de píxel.

El selector puede tener múltiples pares de propiedades y valores separados por punto y coma. Por ejemplo, los siguientes aplicarán los valores dados de las propiedades a todas las etiquetas h1:

h1 {
font-family: comic sans;
font-size: 12px;
color: blue;
}

Selectores comunes de CSS

Selector de tipo CSS

El selector de tipo CSS selecciona todos los elementos de un tipo específico dentro de la página web.

Aquí hay algunos ejemplos de selectores de tipos comunes:

p: Selecciona todas las etiquetas de párrafos.
a: Selecciona todos los hipervínculos.
h1: Selecciona todas las etiquetas de cabecera h1.
span: Selecciona todas las etiquetas de espacio.
body: Selecciona todos los elementos dentro del cuerpo de la página web.
button: Selecciona todos los botones de la página web.
li: Selecciona todos los elementos de la lista.

Selector de clase CSS

Una clase CSS es un atributo usado para definir un grupo de elementos HTML. Esto hace posible personalizar múltiples elementos usando un único selector. Podemos hacer esto escribiendo un carácter de período (.) delante del nombre de la clase en nuestro CSS. Por ejemplo, para cambiar la fuente de la cabecera de ejemplo y el párrafo siguiente:

<h1 class="i-am-a-class">header
paragraph

Utilizamos el siguiente CSS para apuntar a todos los elementos con una clase de i-am-a-class:

.i-am-a-class {
font-family: helvetica;
}

Selector de ID CSS

Un identificador CSS es un atributo usado para definir un único elemento en la página web. Para seleccionar un elemento con un id específico, escriba un símbolo hash (#) delante del id. Por ejemplo, para cambiar la fuente del párrafo siguiente:

paragraph

Utilizamos el siguiente CSS para apuntar sólo al elemento con un id de i-am-an-id:

#i-am-an-id {
font-family: helvetica;
}

CSS Properties

Propiedades del texto

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

Propiedades de fondo

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

Espaciando Propiedades

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

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

Longitud y unidades

px: Pixeles (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 vista
vh: Relativo al 1% de la altura de la vista
%: Relativo al elemento padre

Encontrar elementos usando Chrome DevTools

Chrome DevTools es un conjunto de herramientas de desarrollo web integradas directamente en el navegador Google Chrome. Podemos utilizar estas herramientas para localizar rápidamente elementos HTML y estilos CSS existentes en cualquier sitio web.

1. Para acceder a DevTools, haz clic con el botón derecho en la página y selecciona "Inspeccionar", o utilizar comandos cortos como Command+Option+C (Mac) o Control+Shift+C (Windows, Linux, Chrome OS).

2. Una vez que tengas el panel DevTools abierto, selecciona la herramienta Inspect en la parte superior de la página.

3. A continuación, puedes hacer clic en el elemento de la página que deseas elegir. Los selectores que pueden ser usados para personalizar este elemento serán resaltados bajo la pestaña de elementos. La pestaña Estilos de abajo revelará las reglas de estilo CSS que se aplican actualmente a ese elemento.

4. En este ejemplo vamos a cambiar el color del enlace de navegación a #6b646b utilizando la clase "nav-link" que encontramos usando el inspector de DevTools. ¡También añadiremos la "!important" propiedad al final de la declaración para reemplazar todo el estilo anterior para esa propiedad en el elemento.

5. Una vez que el CSS ha sido actualizado y los cambios han sido guardados, verá que el color del texto de navegación ha cambiado a #6b646b:

Añadir fuentes de terceros

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

Puedes añadir una fuente de terceros de dos maneras.

Copiar y pegar una URL

La primera opción es navegar a su biblioteca de fuentes elegida y seleccionar la fuente que deseas añadir a tu Guía de Marca y copiar y pegar la url. Este proceso se describe a continuación.

Sintaxis

Puedes copiar la sintaxis de abajo y añadirla a la sección CSS personalizado de tu Brandguide. Este es el único CSS que necesitará para importar la fuente. Para importar una fuente diferente, simplemente cambie la familia de fuentes, la URL de origen y el formato de la fuente elegida.

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

Buscando la URL y el formato de la fuente:

1. Navega a tu biblioteca de fuentes elegida y selecciona la fuente que quieres añadir a tu Brandguide. En nuestro caso, vamos a seleccionar "Satisfy" de Google Fonts.

2. Una vez seleccionado, necesitará copiar y pegar la URL @import en una nueva pestaña del navegador.

3. Esto le 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éguela en el código @fontface junto con la familia de fuentes. Luego pegue el código en la caja CSS. Los cambios se actualizarán automáticamente.

Seleccione Update CSS para guardar tus cambios.

La nueva fuente importada se rellenará en el menú desplegable por defecto en la Configuración Global flyout.

Convirtiendo la fuente en un formato WOFF o WOFF2

La segunda opción de tipo personalizado es convertir la fuente en un formato woff o woff2. Este es un formato de fuente web que es más compatible para navegadores que los formatos de archivo de texto ttf/otf. Este proceso se describe a continuación.

Fuentes propietarias

1. Convierte la fuente en formato woff o woff2. Este es un formato de fuente web que es más compatible para navegadores que los formatos de archivo de texto ttf/otf.

2. Carga la fuente en una sección de archivos dentro de la biblioteca.

3. Abre el activo, ve a la pestaña insertar y selecciona Copiar enlace.

4. Navegue a los Ajustes Globales. Puedes copiar la sintaxis a continuación y añadirla a la sección CSS de Configuración Global. Este es el único CSS que necesitarás para importar la fuente. Para importar una fuente diferente, simplemente cambia la familia de fuentes, la URL de origen y el formato de la fuente elegida. Una vez introducida la sintaxis, los cambios se guardarán.

@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}

5. Las fuentes importadas de esta manera no harán que se muestre el tipo de letra en el menú desplegable por defecto. En su lugar, tendrás que aplicar manualmente la fuente dentro de la sección CSS. A continuación se muestra un ejemplo de aplicación de la fuente web negrita a las etiquetas de párrafo importadas.

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

Añadiendo vídeo

Puedes añadir un vídeo a tu Guía de Brandguide siguiendo estos pasos:

Abre el menú del activo para el vídeo.
Ve a la pestaña Insertar.
Localiza el código de inserción de vídeo y selecciona Copiar enlace.
Paste the code into the HTML block.