Personnalisation d'un Brandguide en utilisant CSS – Getty Images Media Manager

Bienvenue dans la nouvelle expérience Brandguide ! Cet article ainsi que Pour commencer avec Brandguide et Brandguide Building and Styling vous guideront à travers la façon de migrer votre contenu vers la nouvelle expérience. La modification des fonctionnalités de votre Brandguide actuel disparaîtra le 1er septembre 2023. Le 1er décembre 2023, l’éditeur Brandguide ne sera plus disponible.

CSS ou « Feuilles de style en cascade » est un langage de design utilisé par les développeurs web pour créer une vue uniforme et visuellement agréable sur plusieurs pages d'un site Web. Le HTML détermine en grande partie le contenu textuel, mais CSS détermine la structure visuelle, la mise en page et l'esthétique du site Web.

CSS Syntax

La syntaxe CSS se compose d'un ensemble de règles. Ces règles ont 3 parties : un sélecteur, une propriété et une valeur.

Selector {
property: value;
}

Le sélecteur représente l'élément HTML que vous voulez styliser. La propriété fait référence à un aspect spécifique de l'élément HTML tel que la couleur, la famille de polices ou la marge. Chaque propriété utilisée dans CSS a un ensemble de valeurs acceptées, par exemple un code hexadécimal ou une valeur de pixel.

Le sélecteur peut avoir plusieurs paires de propriétés et de valeurs qui sont séparées par des points-virgules. Par exemple, ce qui suit appliquera les valeurs données des propriétés à toutes les balises h1:

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

Sélecteurs CSS communs

Sélecteur de Type CSS

Le sélecteur de type CSS sélectionne tous les éléments d'un type spécifique dans la page Web.

Voici quelques exemples de sélecteurs de type commun :

p: Sélectionne toutes les balises de paragraphe.
a: Sélectionne tous les liens hypertexte.
h1: Sélectionne toutes les balises d'en-tête h1.
span: Sélectionne toutes les balises de span.
body: Sélectionne tous les éléments du corps de la page Web.
button: Sélectionne tous les boutons de la page Web.
li: Sélectionne tous les éléments de la liste.

Sélecteur de classe CSS

Une classe CSS est un attribut utilisé pour définir un groupe d'éléments HTML. Cela permet de personnaliser plusieurs éléments en utilisant un seul sélecteur. Nous pouvons le faire en tapant un caractère point (.) devant le nom de la classe dans notre CSS. Par exemple, pour modifier la police de l'en-tête de l'échantillon et du paragraphe ci-dessous :

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

Nous utiliserions le CSS suivant pour cibler tous les éléments avec une classe de i-am-a-class:

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

Sélecteur d'ID CSS

Un identifiant CSS est un attribut utilisé pour définir un seul élément unique sur la page Web. Pour sélectionner un élément avec un id spécifique, tapez un symbole de hachage (#) devant l'identifiant. Par exemple, pour modifier la police du paragraphe ci-dessous :

paragraph

Nous utiliserions le CSS suivant pour cibler uniquement l'élément avec un id d'i-am-an-id :

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

}

CSS Properties

Propriétés du Texte

font-family :Définit la police de texte par ex."Arial" ou "Times"
taille de police : Définit la taille de la police par exemple 5px ou 1em
poids de police : Définit le poids de la police ou "l'audace" par exemple"gras" ou 200
couleur : Définit la couleur du texte par exemple bleu, #add8e6 ou rgb(135,206,250)
hauteur-ligne : Espacement vertical entre les lignes, par exemple 5px ou 1em
espacement de lettres : Espace entre les caractères, par exemple 5px ou 1em
espacement de mot : Espace entre les mots par exemple 5px ou 1em

Propriétés de fond

couleur d'arrière-plan : Définit la couleur de fond de l'élément par exemple bleu, #add8e6 ou rgb(135,206,250)
background-image: Définit une image de fond basée sur l'url ex url('sample-image.jpg')
arrière-plan-position : Définit la position de départ d'une image de fond par exemple centre ou 50%

Propriétés de l'espace

Les propriétés suivantes acceptent l'auto, l'héritage, le % ou n'importe quelle unité de longueur CSS

hauteur :définit la hauteur de l'élément
largeur :définit la largeur de l'élément
remplissage :définit l'espace de remplissage de l'élément
marge :définit l'espace de marge de l'élément

Longueur et Unités

px: Pixels (1px = 1/96th of 1 inch)
em: relatif à la taille de police de l'élément (3em = 3 fois la taille de la police actuelle)
vw : relatif à 1% de la largeur de la fenêtre
vh: relatif à 1% de la hauteur de la viewport
% :relatif à l'élément parent

Trouver des éléments en utilisant les DevTools Chrome

Chrome DevTools est un ensemble d'outils de développement web intégrés directement dans le navigateur Google Chrome. Nous pouvons utiliser ces outils pour localiser rapidement les éléments HTML et les styles CSS existants sur n'importe quel site Web.

1. Pour accéder à DevTools, vous pouvez faire un clic droit sur la page et sélectionner "Inspecter", ou utiliser des courtes commandes telles que Command+Option+C (Mac) ou Control+Shift+C (Windows, Linux, Chrome OS).

2. Une fois que le panneau DevTools est ouvert, sélectionnez l'outil Inspecter en haut de la page.

3. Vous pouvez ensuite cliquer sur l'élément de la page que vous voulez styliser. Les sélecteurs qui peuvent être utilisés pour personnaliser cet élément seront mis en surbrillance sous l'onglet éléments. L'onglet Styles ci-dessous révélera les règles de style CSS qui sont actuellement appliquées à cet élément.

4. Dans cet exemple, nous allons changer la couleur du lien de navigation à #6b646b en utilisant la classe "nav-link" que nous avons trouvée en utilisant l'inspecteur DevTools. Nous allons également ajouter le "! mportant" propriété jusqu'à la fin de la déclaration pour remplacer tous les styles précédents de cette propriété sur l'élément.

5. Une fois que le CSS a été mis à jour et que les modifications ont été enregistrées, vous verrez que la couleur du texte de navigation a été changée en #6b646b :

Ajout de polices tierces

@font -face est une règle CSS qui vous permet d'importer et d'utiliser des polices tierces sur votre Brandguide. Nous vous recommandons d'ajouter votre police via CSS au niveau de réglage global (par opposition au niveau du bloc).

Vous pouvez ajouter une police tierce de deux façons.

Copier-coller une URL

La première option est de naviguer dans la bibliothèque de polices de votre choix et de sélectionner la police que vous souhaitez ajouter à votre Brandguide et de copier et coller l'url. Ce processus est décrit ci-dessous.

Syntaxe

Vous pouvez copier la syntaxe ci-dessous et l'ajouter à la section CSS personnalisée de votre brandguide. C'est le seul CSS dont vous aurez besoin pour importer la police. Pour importer une autre police, il suffit de modifier la famille de polices, l'URL source et le format en fonction de la police de votre choix.

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

Recherche de l'URL et du format de la police :

1. Accédez à la bibliothèque de polices de votre choix et sélectionnez la police que vous souhaitez ajouter à votre Brandguide. Dans notre cas, nous allons sélectionner "Satisfaire" de Google Fonts.

2. Une fois sélectionnée, vous devrez copier et coller l'URL @import dans un nouvel onglet du navigateur.

3. Vous serez redirigé vers une page contenant l'URL et le format nécessaires pour importer la police dans votre brandguide.

4. Copiez l'URL src et collez-la dans le code @fontface avec la famille de polices. Puis collez le code dans la zone CSS. Vos modifications seront automatiquement mises à jour.

Sélectionnez Mettre à jour le CSS pour enregistrer vos modifications.

La police nouvellement importée sera remplie dans la liste déroulante de Typeface par défaut dans la fuite des paramètres globaux.

Convertir la police en format WOFF ou WOFF2

La seconde option de police personnalisée est de convertir la police en un format woff2 ou woff2. Il s'agit d'un format de police Web plus compatible avec les navigateurs que les formats de fichier texte ttf/otf. Ce processus est décrit ci-dessous.

Polices propriétaires

1. Convertissez la police au format woff ou woff2. Il s'agit d'un format de police Web plus compatible avec les navigateurs que les formats de fichier texte ttf/otf.

2. Téléchargez la police dans une section de fichiers dans la bibliothèque.

3. Ouvrez l'actif, accédez à l'onglet intégré et sélectionnez Copier le lien.

4. Naviguez vers les paramètres globaux flyout. Vous pouvez copier la syntaxe ci-dessous et l'ajouter à la section CSS de Global Settings flyout. C'est le seul CSS dont vous aurez besoin pour importer la police. Pour importer une autre police, il suffit de modifier la famille de polices, l'URL source et le format en fonction de la police de votre choix. Une fois la syntaxe saisie, vos modifications seront enregistrées.

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

5. Les polices importées de cette façon n'afficheront pas la police dans la liste déroulante de Typeface par défaut. Au lieu de cela, vous devrez appliquer manuellement la police dans la section CSS. Voici un exemple d'application de la police Bold Web aux balises de paragraphe importées.

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

Ajout de vidéo

Vous pouvez ajouter une vidéo à votre Brandguide en suivant ces étapes :

Ouvrir la modale de l'actif pour la vidéo.
Naviguez vers l'onglet Intégrer.
Localisez le code d'intégration vidéo, et sélectionnez Copier le lien.
Collez le code dans le bloc HTML.