SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 100 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

6 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 11 juillet 2018

Retour en haut de la page

Répondre à cet article

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 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

  • PHANTOM (HTML5UP)

    18 juillet – 11 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • ScolaSPIP 3

    21 mai 2012 – 448 commentaires

    Un plugin-squelette personnalisable pour sites Web d’établissements scolaires

  • Formulaire d’upload en html5

    27 avril 2015 – 93 commentaires

    Un formulaire d’upload en html5 pour l’interface admin de SPIP. Ce plugin ajoute un système d’upload moderne à SPIP. Il peut être utilisé pour l’upload de masse. Ce système est basé sur dropzonejs. Utilisation Espace privé de SPIP Dans l’espace (...)

  • Passer un site SPIP sous https://

    23 février 2017 – 42 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 20 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)