Utiliser CSS pour personnaliser Brandguide

Utilisez CSS pour déterminer la structure visuelle, la disposition et l'esthétique de votre Brandguide.

Forfaits :

Brandfolder

Autorisations :

Propriétaire
Administrateur

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

Le CSS, ou feuilles de style en cascade, est un langage de conception utilisé pour créer un aspect uniforme et visuellement agréable sur plusieurs pages d’un site Web. 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.

La personnalisation CSS n’est recommandée que si vous avez une connaissance avancée du CSS, car l’assistance ne fournit pas d’assistance pour la mise en œuvre de code personnalisé dans Brandguide.

Brandguide assainit le code pour éviter les attaques XSS. Sachez que nous pouvons modifier le code Brandguide sous-jacent à tout moment. Cela peut potentiellement avoir un impact sur vos feuilles CSS et HTML.

Utiliser le CSS dans Brandguides

Ouvrez votre Brandguide.
Sélectionnez Paramètres dans le menu de gauche.
Faites défiler jusqu’à la section Customization (Personnalisation) et saisissez votre code dans la zone de texte CSS .

Propriétés CSS utiles

Voici quelques propriétés CSS qui pourraient vous être utiles pour personnaliser votre Brandguide :

Propriétés du texte

font-family (famille de la police) : définit la police du texte, par exemple : Arial ou Times
font-size (taille-fonte) : définit la taille de la police, par exemple : 5 px ou 1 em.
font-weight (poids de la police) : définit le poids ou l'épaisseur de la police, par exemple : bold ou 200.
color (couleur) : définit la couleur du texte, par exemple : bleu, #add8e6 ou rvb(135,206,250)
line-height (hauteur-ligne) : espace vertical entre les lignes, par exemple : 5 px ou 1 em
letter-spacing (espacement des lettres) : espace entre les caractères, par exemple : 5px ou 1em
word-spacing (espacement des mots) : espace entre les mots, par exemple : 5 px ou 1 em

Propriétés de l’arrière-plan

couleur de fond : définit la couleur d’arrière-plan de l’élément, par exemple : bleu, #add8e6 ou rvb(135,206,250)
image de fond : définit une image d’arrière-plan en fonction de l’URL, par exemple : url('sample-image.jpg')
position arrière-plan : définit la position de départ d’une image d’arrière-plan, par exemple : centre ou 50 %

Propriétés de l’espace

Les propriétés suivantes acceptent auto, inherit, % ou toute unité de longueur CSS

hauteur : définit la hauteur de l’élément.
largeur : définit la largeur de l’élément.
rembourrage : définit la marge intérieure de l’élément.
marge : définit l’espace de marge de l’élément.

Longueurs et unités

px : pixels (1px = 1/96e de 1 pouce)
em : relatif à la taille de la 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 fenêtre
% : relatif à l’élément parent

Ajouter des polices tierces

@font-face est une règle CSS qui vous permet d’importer et d’utiliser des polices tierces dans votre Brandguide. Nous vous recommandons d’ajouter votre police via CSS au niveau des paramètres globaux (plutôt qu’au niveau du bloc).

Vous pouvez ajouter une police tierce de deux manières :

Accédez à la bibliothèque de polices de votre choix et sélectionnez la police que vous souhaitez ajouter à votre Brandguide, puis copiez et collez l’URL.

Convertissez la police au format woff ou woff2. Ce format de police Web est plus compatible avec les navigateurs que les formats de fichiers texte ttf/otf.

Les sections ci-dessous illustrent chaque méthode.

Utiliser une police tierce telle quelle

Accédez à la bibliothèque de polices de votre choix et sélectionnez la police que vous souhaitez ajouter à votre Brandguide. Dans cet exemple, nous utilisons Satisfy de Google Fonts.
Une fois sélectionnée, copiez et collez l’URL @import dans un nouvel onglet du navigateur.

Vous accédez ainsi à une page contenant l'URL et le format nécessaires à l'importation de la police dans votre Brandguide.

4. Copiez l'URL src et collez-la dans le code @fontface et la famille de polices, comme dans l'exemple suivant :

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

Collez le code dans la zone CSS et sélectionnez Mettre à jour CSS pour enregistrer vos modifications.

La police nouvellement importée sera remplie dans la liste déroulante Police par défaut de l'icône déroulante Paramètres globaux.

Utilisez la syntaxe ci-dessous comme modèle pour toute autre police que vous souhaitez utiliser ; il suffit de mettre à jour la famille de polices et l’URL src pour qu’elles correspondent à la police souhaitée. C'est la seule CSS dont vous aurez besoin pour importer la police.

@font-face {
font-family: '[nom de la police}';
src: url([URL SRC de la police);
}

Utiliser une police convertie au format WOFF ou WOFF2

Trouver un convertisseur de polices en WOFF ou WOFF2.
Convertissez la police au format WOFF ou WOFF2 et téléchargez-la. Ce format de police Web est plus compatible avec les navigateurs que les formats de fichier texte ttf/otf.
Téléchargez la police dans une section de fichiers dans Brandfolder.
Ouvrez l'actif, accédez à l'onglet Incorporer et sélectionnez Copier le lien.
Collez ensuite le code dans la zone CSS. Définissez la famille de polices souhaitée et remplacez l’URL par le lien copié à l’étape précédente. Enregistrez vos modifications.

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

Notez que les polices importées de cette manière n’apparaissent pas dans la liste déroulante Default Typeface. Au lieu de cela, vous devez appliquer manuellement la police dans la section CSS. Vous trouverez ci-dessous un exemple d’application de la police Bold Web aux balises de paragraphe importées.

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

USM Content