Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Donnez du style à vos titres

Rédigé par Stéphane 15 commentaires
Envie de changer la police de caractère utilisée pour votre titre en remplaçant les classiques Arial, Helvetica ou autre Serif par une fonte plus attrayante ?Je vous propose de mettre en place des webfonts dans le thème de votre PluXml pour personnaliser l'apparence des titres.

Étape 1: Trouver la fonte de son choix

Les sites pour trouver des fontes, généralement au format ttf, sont nombreux. Voici deux liens qui proposent de nombreuses polices à télécharger.

Étape 2: Convertir la police ttf aux formats pour le web

Le format ttf ne suffit pas pour être utilisé sur un site web car tous les navigateurs ne reconnaissent pas ce format. Il faut donc passer par un outil de convertion qui créera les fichiers et formats manquants.Après avoir récupéré la fonte de votre choix au format .ttf, je vous propose d'utiliser l'outil de conversion disponible sur le site fontsquirrel: Webfont Generator.

Son utilisation est très simple:
  1. Cliquez sur le bouton "Add Fonts" et sélectionnez votre fichier .ttf
  2. Laissez l'option par défaut "Optimal" sélectionnée
  3. Cochez "Yes, the fonts I'm uploading are legally eligible for web embedding"
  4. Cliquez sur le bouton "DOWNLOAD YOU KIT"

Étape 3: Copier les fichiers dans votre PluXml

Créez un dossier fonts dans le dossier de votre thème, pour obtenir par exemple:

/themes/defaut/fonts

Note: defaut correspond au nom du thème par défaut de PluXml.Après avoir téléchargé et décompressé le fichier généré par l'outil de conversion (voir étape 2), récupérez tous les fichiers avec les extensions .eot, .svg, .tff et .woff et copiez les dans le dossier fonts créé précedemment.

Étape 4: Déclaration des fontes dans la feuille de style de PluXml

Dans le dossier qui contient les fichiers des polices après la décompression de l'archive téléchargée, il y a aussi un fichier stylesheet.css.Éditez ce fichier et récupérez les lignes de code présentes. Faites un copier-coller de ces lignes au début du fichier style.css de votre thème dans /themes/defaut/style.css. Elles correspondent aux instructions à ajouter dans le feuille de style du thème de PluXml pour utiliser les nouvelles fontes.

Exemple de code à copier:

@font-face {
    font-family: 'desyrelregular';
    src: url('fonts/desyrel-webfont.eot');
    src: url('fonts/desyrel-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/desyrel-webfont.woff') format('woff'),
         url('fonts/desyrel-webfont.ttf') format('truetype'),
         url('fonts/desyrel-webfont.svg#desyrelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
Notez ici le nom de la police à identifier sur la ligne suivante

    font-family: 'desyrelregular';
Notez également l'emplacement des fichiers .eot, .woff, .ttf et .svg dans le dossier fonts

Exemple: le fichier desyrel-webfont.eot est stocké dans le dossier fonts (chemin relatif par rapport au fichier style.css du thème de PluXml)

    src: url('fonts/desyrel-webfont.eot');
'desyrelregular' après l'instruction font-family est le nom de la nouvelle police de caractère.

Étape 5: Personnalisation des titres de PluXml avec la nouvelle police de caractère

Il ne reste plus maintenant qu'à changer la police de caractère utilisée pour les titres de PluXml que vous voulez changer. Ici les cas de figure peuvent être différents en fonction de votre thème actuel car le fichier de style style.css ne sera pas le même en fonction des thèmes.A titre d'exemple je vais prendre le thème par défaut de PluXml (version 5.2 au moment de la rédaction de cet article). Cela vous donnera des indications pour modifier votre propre thème.

Pour modifier la police du titre du site, éditez le fichier themes/defaut/style.css et remplacez le code suivant

body > header h1 {
	font-size: 2.2em;
	margin: 0;
}
par

body > header h1 {
	font-family: 'desyrelregular';
	font-size: 2.2em;
	margin: 0;
}
Ici la déclaration de la police 'desyrelregular' est ajoutée grâce à l'instruction font-family.

Pour modifier la police du titre des articles, éditez le fichier themes/defaut/style.css et remplacez le code suivant

article h1,
article h1 a {
	color: #444;
	font-weight: bold;
	line-height: 1.1;
	margin: 0;
}
par

article h1,
article h1 a {
	font-family: 'desyrelregular';
	color: #444;
	font-weight: bold;
	line-height: 1.1;
	margin: 0;
}
Ici aussi la ligne font-family: 'desyrelregular'; permet de spécifier la fonte à utiliser.

Résultat obtenu après utilisation d'une webfont

De la même façon, maintenant vous pouvez définir le style des titres de niveau <h2>, <h3>, voir même du texte utilisé pour le chapo ou le contenu des articles.

15 commentaires

#1  - jerrywham a dit :

Quelques ch'tites fautes de conjugaison : "Après avoir télécharger et décompresser" -> "Après avoir téléchargé et décompressé".

Merci pour ces rappels.

Répondre
#2  - Chriss... a dit :

Bonjour,
on peut aussi utiliser les fontes Google : http://www.google.com/fonts
facile d,utilisation, pas besoin de télécharger sur son site (gain de place), pas besoin de les convertir, surtout que certaines polices détestent cela... :-(

Répondre
#3  - Stéphane a dit :

@jerrywham :
Merci Jerry, c'est corrigé.

Répondre
#4  - attavik a dit :

Bonjour,rien à voir mais il faudrait peut être mettre un captcha sur les commentaires non? Où autre chose est prévu pour contre les spams?

Répondre
#5  - Stéphane a dit :

@attavik :
Les commentaires sont contrôles par akismet + un autre plugin maison et ils sont modérés avant publication

Répondre
#6  - Norore a dit :

Bonjour.
Merci beaucoup, je suis en train de faire mon propre thème sur PluXML et ce tutoriel tombe à point nommé pour moi !
Il est très clair et bien expliqué, grâce à vous j'ai maintenant de jolis titres :) !

Répondre
#7  - noidee a dit :

Bonjour,
Cet article est très intéressant.
Néanmoins j'utilise pluxml 5.5 et je n'est pas de fichier style.css dans mon themes/defaut/ ???
Je n'arrive donc pas à transposer cette solution... sur cette version de pluxùml.
Une petite aide serait bienvenue.
En vous remerciant par avance,
Bien cordialement.

Répondre
#8  - Stéphane a dit :

Bonjour. Regardez dans le dossier css de votre thème

Répondre
#9  - noidee a dit :

Merci pour votre rapidité !!!
dans le dossier css du theme j'ai deux fichiers :
plucss.css,
theme.css.
mais je ne vois pas trop à quel endroit je dois rajouter les lignes...

Répondre
#10  - Stéphane a dit :

C'est dans le fichier theme.css qu'il faut rajouter le code, par exemple à la fin du fichier

Répondre
#11  - noidee a dit :

Merci pour votre réponse, je vais tester ça

Répondre
#12  - higuma a dit :

Bonjour, pourriez-vous me dire si ces modifications sont valables pour les titres des pages statiques, et si oui, à quel endroit faut-il opérer ? Merci :)

Répondre
#13  - Stéphane a dit :

Bonjour. Oui la méthode est identique. Les règles css pour les articles devraient également fonctionner pour les titres des pages statiques.

Répondre
#14  - higuma a dit :

arf :) j'ai enfin trouvé ! : dans le fichier plucss.css :

/* NAVIGATION
------------------------------ */

.menu {
font-size: 0rem;
margin: 0;
padding-left: 0;
}
.menu li {
display: inline-block;
font-family: 'ma police ici';
font-size: 1rem;
list-style-type: none;
margin-left: 1rem;
}

Par contre pour la couleur de la police, c'est ici aussi qu'il faut mettre le code ? et quel est-il ?

Répondre
#15  - Stéphane a dit :

Bonjour. Il vaut mieux mettre le code dans le fichier theme.css plutôt que dans plucss.css
Pour la couleur, quelque chose de ce genre devrait fonctionner. (avec le code couleur de votre choix)

article h1,
article h1 a {
color: #ff0000;
}

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la première lettre du mot egjex ?
Top