Modifier / Surcharger

1. Nomenclature des fichiers

Nomenclature d’un fichier de la fabrique à sites

Les fichiers CSS sont situés au sein de sous-dossiers qui portent généralement le nom du bloc ou nom du modèle. Ci-dessous, voici l’exemple pour un bloc de la fabrique à sites, qui dispose de son style par défaut ainsi que 3 fichiers de variantes graphiques du bloc.

NB : les mots en gras correspondent à des noms de dossiers et le reste à des noms de fichiers CSS.

  • /assets/ –> /scss/ –> /blocs/ –> /[nom_du_bloc] : 
    • _nom_du_bloc.scss
    • _type-1.scss
    • _type-2.scss
    • _type-3.scss

Nomenclature d’un fichier pour un besoin de surcharge

Vous devez créer un nouveau fichier _custom.scss qui correspond au style du bloc que vous souhaitez surcharger. Incluez ce fichier au sein de _custom.scss qui se situe lui à la racine du dossier /scss/.

  • /assets/ –> /scss/ –> /blocs/ –> /[nom_du_bloc] : 
    • _custom.scss

Nomenclature d’un fichier pour un besoin de remplacement

  • /assets/ –> /scss/ –> /blocs/ –> /[nom_du_bloc] : 
    • _nom_du_bloc.scss

2. Surcharger un fichier CSS

Si le design de votre site ne nécessite que peu de changements graphiques, alors il est conseillé de surcharger le CSS existant avec un fichier _custom.scss.

Vous devez reprendre l’arborescence des dossiers en prenant exemple sur la fabrique à sites et créer un nouveau fichier CSS avec le nom _custom.scss.

Ce fichier sera ensuite compilé dès qu’il sera inclus dans le fichier _custom.scss qui se situe lui à la racine du dossier /scss/.

3. Modifier / remplacer un fichier de la fabrique à sites

Si le design de votre site nécessite des changements graphiques conséquents, alors il sera préférable de modifier / remplacer le fichier. Pour ce faire, vous devrez respecter le même chemin et le même nom de fichier que celui sur la fabrique à sites.

Vous avez deux solutions :

  1. Vous reprenez le fichier CSS du bloc que vous souhaitez et vous le modifiez directement sans repartir d’une feuille de style vierge.
  2. Vous repartez de zéro.

À savoir : lorsque vous remplacez un fichier de la fabrique à sites, il ne sera plus pris en compte. En cas de modifications générales du fichier par l’agence Thuria, vous n’aurez plus la possibilité de recevoir les correctifs automatiquement.

4. Gestion des fonts

Une bibliothèque de fonts est disponible dans le back-office dans le menu Configuration –> Styles graphiques. Vous avez la possibilité de changer les fonts pour les titres, les textes et les textes alternatifs du site (surtitre, catégorie…). Néanmoins, en fonction de vos maquettes graphiques, vous allez avoir besoin d’ajouter une ou plusieurs nouvelles fonts au sein du votre thème enfant. Pour cela, suivez les étapes ci-dessous :

Étape 1 : Récupérer les fonts en local sur votre ordinateur

Téléchargez votre dossier de fonts avec les différentes graisses nécessaires.

Étape 2 : Convertissez les fichiers de fonts en .woff et woff2 et téléchargez le dossier converti.

Pour ce faire, nous vous proposons le choix entre deux sites :

  1. FontSquirrel : vous pouvez sélectionner le mode « Expert » pour bien gérer les alignements verticaux.
  2. TransFonter : cliquez sur AddFont puis sur Convert.

Étape 3 : Ajoutez les fichiers convertis dans votre projet

Placez vos fichiers .woff et .woff2 dans le dossier /assets/fonts/ en créant un nouveau dossier portant le nom de votre font.

Étape 4 : Intégrez vos fonts en CSS grâce à @font-face

Lors de la conversion de votre font, vous allez recevoir un fichier de style CSS. Copiez / collez le contenu du fichier et intégrez-le au sein d’un nouveau fichier dans le dossier /assets/fonts/[nom_de_la_font]  –> _nom_de_la_font.scss

Voici un exemple ci-dessous. N’oubliez pas de rajouter la ligne CSS : font-display: swap; pour chaque @font-face permettant le chargement d’une police par défaut tant que la page n’est pas entièrement chargée. Attention également au chemin de vos fichiers fonts que vous devez réécrire.

SCSS
@font-face {
font-family: 'Avenir Next Condensed';
src: url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Heavy.woff2') format('woff2'),
url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Heavy.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Avenir Next Condensed';
src: url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Regular.woff2') format('woff2'),
url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Avenir Next Condensed';
src: url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Italic.woff2') format('woff2'),
url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Avenir Next Condensed';
src: url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Bold.woff2') format('woff2'),
url('../fonts/AvenirNext Condensed/AvenirNextCondensed-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Avenir Next Condensed';
src: url('../fonts/AvenirNext Condensed/AvenirNextCondensed-BoldItalic.woff2') format('woff2'),
url('../fonts/AvenirNext Condensed/AvenirNextCondensed-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}

Enfin ce nouveau fichier CSS devra être inclus dans le fichier _custom.scss situé à la racine du dossier /scss/ permettant ensuite d’être compilé.

Étape 5 : Ajoutez la font à une variable custom du back-office

Votre nouvelle font est à présent sur le site. Si vous souhaitez, par exemple, affecter cette font à tous vos titres, vous devez changer la variable $font_title;. Rendez-vous alors dans le fichier _custom-config.scss situé à la racine du dossier /scss/ et tapez la ligne :

SCSS
$font_title: 'Nom de la Font Family', Sans-Serif;