Préalable
Lire l’article Le répertoire squelettes/ pour vos personnalisations.
Création du fichier
Pour pouvoir faire des modifications avancées de vos CSS, ouvrez votre FTP (ex Filezilla) :
A la racine de votre site distant (si vous ne l’avez pas encore fait) :
créez un dossier /squelettes
créez un sous-dossier /css
créez un nouveau fichier et nommez-le perso.css.html
Pour la création du fichier html, vous pouvez utiliser n’importe quel éditeur de texte, le bloc note ou même word. Mais l’idéal à mon avis est Notepad++.
Voici le chemin complet de ce fichier : /public_html/squelettes/css/perso.css.html
Dans ce fichier, vous mettrez les bouts de code trouvés dans divers fichiers .html ou .css (sur votre FTP). A chaque fois que vous souhaitez opérer une personnalisation du code d’origine, procédez comme suit :
copier le code d’origine
collez-le dans votre fichier perso.css.html
modifiez la partie collée selon vos besoins.
Ainsi, le fichier d’origine ne sera pas modifié, vous permettant ainsi de mettre votre site à jour sans risquer de perdre vos personnalisations.
Premiers commentaires du fichier
Commencez votre page par :
- /* PERSO.CSS */
- /* Cette feuille contient: */
- /* les styles specifiques du site */
- /* -------------------------------- */
Ceci n’est pas du code. Tous les mots encadrés par /*...*/ sont des commentaires qui vous permettent de mieux vous y retrouver. Ils ne changent rien au code lui-même.
Vous-même pouvez en ajouter comme vous le souhaitez du moment que vous les encadriez avec /*...*/.
Exemples de commentaires
Chaque fois que vous allez vous servir d’une feuille CSS déjà présente dans votre FTP comme modèle pour vos modifications, pensez à le noter dans vos commentaires.
si vous vous basez sur le fichier base.css.html (qui se trouve dans /public_html/plugins/sarkaspip_3/css), vous noterez :
- /* -------------------------------------------------------------------- */
- /* Personnalisation de BASE.CSS */
- /* -------------------------------------------------------------------- */
si vous vous basez sur le fichier spip_style.css (/public_html/prive), vous noterez :
- /* -------------------------------------------------------------------- */
- /* Personnalisation de SPIP_STYLE.CSS */
- /* -------------------------------------------------------------------- */
si vous vous basez sur le fichier enluminurestypo.css (/public_html/plugins/auto/enluminures_typographiques_v3/css)
- /* -------------------------------------------------------------------- */
- /* Personnalisation de ENLUMINURESTYPO.CSS */
- /* -------------------------------------------------------------------- */
etc …
C’est dans ce fichier, après les commentaires adaptés, que vous pourrez ensuite insérer les bouts de code que vous souhaitez personnaliser pour :
les intertitres personnalisés
…
Par contre, c’est une autre technique, moins élégante, qui est utilisée pour :
les paragraphes encadrés et le texte en évidence