SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 104 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Tiny Typo > Personnaliser Tiny Typo via CSS

Personnaliser Tiny Typo via CSS

6 novembre 2017 – par tetue

5 votes

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 :

  1. 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 :

  1. 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 :

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

Télécharger

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

  1. h1, .h1,
  2. h2, .h2,
  3. h3, .h3,
  4. h4, .h4,
  5. h5, .h5,
  6. h6, .h6,
  7. .font2 { font-family: Helvetica, Arial, sans-serif; }

Télécharger

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

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

Télécharger

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 :

  1. 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 :

  1. 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 :

  1. h1, .h1,
  2. h2, .h2,
  3. h3, .h3,
  4. h4, .h4 { margin: 1.414em 0 0.5em; color: #AA0000; }
  5. h1, .h1 { margin-top: 0; font-size: 3.998em; }
  6. h2, .h2 { font-size: 2.827em; }
  7. h3, .h3 { font-size: 1.999em; }
  8. h4, .h4 { font-size: 1.414em; }

Télécharger

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 :

  1. a {
  2. text-decoration: none;
  3. border-bottom: 1px solid;
  4. }

Télécharger

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 :

  1. a:focus,
  2. a:hover,
  3. a:active {
  4. color: #0000ff;
  5. }

Télécharger

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

  1. a:focus {
  2. background: transparent !important;
  3. border-color: transparent !important;
  4. }

Télécharger

Autres personnalisations

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

P.-S.

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

Dernière modification de cette page le 6 novembre 2017

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • GIS 4

    11 août 2012 – 1408 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Plugin fonctions d’images : les filtres de traitement des images

    15 octobre 2012 – commentaires

    Cet article présente les filtres de traitement des images du plugin Fonctions d’images. Sur votre site, la page ?page=demo/fonctions_images&filtres=images vous permet de voir ces filtres en action. Le plugin Fonctions d’images fournit des (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2281 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Lecteur pdf javascript pdf.js

    20 février 2012 – 157 commentaires

    Ce plugin est basé sur le projet pdf.js qui permet une lecture en ligne des pdfs depuis le navigateur. Ce plugin est expérimental et les contributions sur la zone sont les bienvenues. Avantages Open source Ne requiert pas flash et donc (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 814 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)