Tiny Typo est une base CSS pour le contenu éditorial web qui rend les pages plus lisibles. Elle tient en deux fichiers : l’un, en CSS, apporte les styles, l’autre, en HTML, permet de les visualiser. Selon les besoins, vous utiliserez l’un ou l’autre.
C’est très simple à installer dans SPIP : il suffit de déposer ces fichiers dans votre dossier squelettes ou d’activer le plugin Tiny Typo. Comme vous êtes plusieures à demander, voici quelques explications :
1. Installez les styles CSS
Depuis SPIP 3.1.1
Les styles CSS de Tiny Typo sont appelés dans les squelettes de la dist de SPIP depuis la version 3.1.1. Ajoutez le plugin Tiny Typo pour que tous les styles s’appliquent correctement dans SPIP et passez à l’étape 2.
Remarque : si vous n’utilisez pas les appels CSS natifs des squelettes la dist, il vous faudra les ajouter à la main, en vous inspirant de ce qui suit.
Avant SPIP 3.1.1
Installez le plugin Tiny Typo et passez directement à l’étape 2. Sinon, téléchargez le fichier tinytypo.css et déposez-le dans le répertoire /css de votre dossier squelettes. Puis :
Depuis SPIP 3.0
Ajoutez simplement cette ligne dans le head de vos squelettes :
[<link rel="stylesheet" href="(#CHEMIN{css/tinytypo.css}|direction_css)" type="text/css" media="all">]Avant SPIP 3
Ce n’est pas obligatoire, mais votre site fonctionnera mieux avec un reset et quelques helpers de positionnement. Ajoutez-les donc, en déposant par exemple ces fichiers, reset.css et clear.css, dans le répertoire /css de votre dossier squelettes. Appelez-les ensuite dans le head de vos squelettes, comme suit :
[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css)" type="text/css" media="all">
][<link rel="stylesheet" href="(#CHEMIN{css/clear.css}|direction_css)" type="text/css" media="all">
][<link rel="stylesheet" href="(#CHEMIN{css/tinytypo.css}|direction_css)" type="text/css" media="all">
][<link rel="stylesheet" href="(#CHEMIN{css/spip.css}|direction_css)" type="text/css" media="all">
]#INSERT_HEAD_CSS2. Vérifiez avec la page-test
Téléchargez le fichier tinytypo.html et déposez-le dans votre dossier squelettes. Utilisez ce fichier pour visualiser et vérifier vos styles.
3. Personnalisez
Écrivez ensuite vos personnalisations dans votre fichier CSS (nommé par exemple custom.css ou perso.css, sans oublier de l’appeler à la fois dans la page-test et dans vos squelettes), comme d’habitude. Voir : Personnaliser Tiny Typo via CSS.
4. Usages avancés
Tiny Typo peut aussi s’utiliser en tout ou partie, avec des variables LESS, avec Z…
- Github
- Variables LESS
- Guide Z : TinyTypo pour la typographie
- Voir aussi : Pourquoi Tiny Typo ?
Discussions par date d’activité
Une discussion
Bonjour,
A l’étape 2 il faut télécharger une page html, la déposer dans son dossier squelettes et l’afficher.
C’est pour l’afficher que je ne sais pas comment faire.
La glisser-déposer dans le navigateur ?
Répondre à ce message
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 :
|
