Personnaliser Tiny Typo via CSS

Tiny Typo est installée dans votre site. C’est bien mais un peu fade… Comment personnaliser ?

Pour faciliter la personnalisation, très peu de couleurs et polices sont déclarées dans la base Tiny Typo. À vous de compléter avec vos couleurs et polices, dans votre propre feuille de style.

  1. Affichez la page de test en ajoutant « /squelettes/tinytypo.html » à l’adresse de votre site, par exemple :
    http://www.monsite.net/squelettes/tinytypo.html
  2. Écrivez vos personnalisations dans votre fichier CSS, nommé par exemple custom.css ou perso.css. Si ce fichier n’existe pas, créez-le et déposez-le dans votre dossier squelettes. Inspirez-vous du fichier custom.css donné en exemple.

Personnalisations principales

Ces premières personnalisations doivent se trouver au début de votre fichier CSS. Procédez dans l’ordre :

1. Choisissez vos couleurs

Couleur de fond et de texte se définissent en une fois sur body. Par exemple :

body { background: #F8F8F8; color: #222222; }

N’hésitez pas à choisir un contraste négatif (blanc sur noir) si vous préférez : Tiny Typo s’adaptera automatiquement. Utilisez éventuellement un motif de fond, déposé dans /css/img et appelé comme suit :

body { background: #333 url(img/background.png) repeat; color: #EEE; }

2. Choisissez vos fontes

Le choix d’une police de caractères est déterminant : c’est ce qui donnera une personnalité à votre site. Celle-ci se définit en une fois sur body. Par exemple :

body,
.font1 { font-family: Georgia, "Times New Roman", serif; }

Vous pouvez choisir une autre police de caractères pour vos titres (facultatif). Si vous le faites, n’en oubliez pas :

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.font2 { font-family: Helvetica, Arial, sans-serif; }

Vous pouvez aussi personnaliser la fonte affichant le code (facultatif). Si vous le faites, n’oubliez pas les sélecteurs propres à SPIP :

pre, code, var, samp, kbd, tt, .tt,
.spip_code, .spip_cadre,
.font3 { font-family: "Courier New", Courier, monospace; }

Astuce : vous pouvez ensuite utiliser les sélecteurs .font1, .font2, etc. dans vos squelettes, partout où vous souhaitez appliquer l’une ou l’autre de ces fontes.

3. Ajustez la taille du texte (facultatif)

Avec Tiny Typo, la taille du texte est à 100 %. Cela signifie que le texte s’affichera à la taille adaptée à l’écran utilisé, généralement 16px sur écran de bureau, 14px sur smartphone, etc. Si vous souhaitez grossir la taille de texte de votre site (pour le confort de lecture de vos internautes, évitez de la réduire), cela se définit en une fois, sur body. Par exemple :

body { font-size: 110%; }

Remarque : si vous touchez à la taille du texte, exprimez-la en unité relative (%em ou rem) afin d’assurer la lisibilité en cas de zoom du texte par l’internaute.

Utilisez ensuite les class .small et .big dans vos squelettes, là où vous souhaitez que le texte soit plus petit ou plus gros.

4. Ajustez l’interlignage (facultatif)

L’interlignage (espace entre les lignes de texte) se définit sur body, une fois pour toutes. Par exemple :

body { line-height: 1.8; }

Remarque : la valeur minimale recommandée est de 1.5 : pour le confort de lecture de vos internautes, évitez de descendre en deçà.

5. Ajustez vos titres

Ce n’est pas tout d’avoir une belle police, il faut aussi que les différents textes (titres, sous-titres, texte principal, etc.) aient des proportions différentes mais agréables à l’œil pour faciliter la lecture.

Chaque site utilise une échelle de titres différente et c’est plus délicat à définir. Aidez-vous d’un calculateur d’échelle typo, comme type-scale.com ou modularscale.com. Écrivez ensuite les règles CSS correspondantes dans votre fichier, par exemple :

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 { margin: 1.414em 0 0.5em; color: #AA0000; }
h1, .h1 { margin-top: 0; font-size: 3.998em; }
h2, .h2 { font-size: 2.827em; }
h3, .h3 { font-size: 1.999em; }
h4, .h4 { font-size: 1.414em; }

Astuce : vous pouvez ensuite utiliser les sélecteurs .h1, .h2, .h3, etc. dans vos squelettes, pour appliquer le style de l’un ou l’autre de ces titres, partout où vous le souhaitez.

Personnalisations secondaires

Vous pouvez vous arrêter là, car Tiny Typo fait le reste. Mais vous pouvez aussi souhaiter d’autres ajustements.

Liens

Bien que ce ne soit pas nécessaire avec Tiny Typo, il est courant de souhaiter personnaliser les liens. Par exemple, pour les souligner plus délicatement :

a {
  text-decoration: none;
  border-bottom: 1px solid;
}

Pour modifier leur apparence lors des interactions, définissez dans l’ordre :focus, :hover et :active. Par exemple pour modifier leur couleur lors des interactions :

a:focus,
a:hover,
a:active {
  color: #0000ff;
}

Tiny Typo renforce le style du focus, pour aider les internautes naviguant au clavier. Mais si cela est trop gênant, annulez comme suit :

a:focus {
  background: transparent !important;
  border-color: transparent !important;
}

Autres personnalisations

Amusez-vous bien et n’hésitez pas à poser vos questions dans le forum ci-dessous !

Pour en savoir plus, lire : Améliorer la lisibilité typographique

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom