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.
- Affichez la page de test en ajoutant «
/squelettes/tinytypo.html
» à l’adresse de votre site, par exemple :
http://www.monsite.net/squelettes/tinytypo.html
- Écrivez vos personnalisations dans votre fichier CSS, nommé par exemple
custom.css
ouperso.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 !
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |