Installation et configuration de la lame
une fois dans le plugin Couteau Suisse, basculer la lame "Sommaire automatique" pour qu’elle soit active
- descendre la page jusqu’à arriver au menu de configuration
- voici les paramètres que j’ai choisis :
- profondeur retenue : 3
- Largeur du sommaire : 60 caractères
- Calculer de jolies ancres : oui
- Création automatique du sommaire : non (dans l’immédiat je préfère garder la main sur ce paramètre, mais je changerai peut-être d’avis plus tard)
- Activer la balise #CS_SOMMAIRE : non
Modifier l’aspect graphique du sommaire
Enlever l’image en forme de coin
on se base sur le fichier /couteau_suisse/fonds/sommaire.html
recopiez ce fichier que vous modifierez comme suit
ou téléchargez le fichier ci-dessous dans une nouvelle fenêtre et enregistrez-le sous le nom "sommaire.html"
placer le résultat dans le dossier squelettes/fonds (le créer si besoin)
- <!-- surcharge du fichier /couteau_suisse/fonds/sommaire.html pour le site Steph-en-Bretagne.com
- modif pour enlever l'image représentant un coin :
- à la ligne 21 :
- cs_sommaire_[(#ENV*{fond_css})]_fond
- remplacé par :
- cs_sommaire_sans_fond
- -->
- [(#REM)
- Ce fond est surchargeable dans vos squelettes.
- Utilisation d'un cookie pour stocker l'etat du sommaire au moment de quitter la page.
- Champs disponibles :
- fond_css : 'avec' ou 'sans'
- sommaire : les liens du sommaire en <li></li>
- Indispensable :
- <div class="cs_sommaire_titre_XXX"> et <ul> places a la suite l'un de l'autre
- Par defaut : sommaire deplie
- Pour un sommaire replie a la premiere visite de la page :
- - ajouter la classe 'cs_sommaire_replie' a : <div class="cs_sommaire_titre_XXX">
- - ajouter la classe 'cs_sommaire_invisible' a : <ul>
- ]<div class="cs_sommaire cs_sommaire_sans_fond" id="outil_sommaire">
- <div class="cs_sommaire_inner">
- <div class="cs_sommaire_titre_[(#ENV*{fond_css})]_fond"> <:couteau:sommaire_titre:> </div>
- <ul>
- [(#ENV*{sommaire})]
- </ul>
- </div>
- </div>
Personnaliser les CSS
On utilise :
base : plugins/couteau_suisse/outils/sommaire.css.html
on y prendra les lignes que l’on veut changer pour les coller dans
notre feuille perso.css.html qui se trouve dans le dossier /squelettes/css
Voici ce que j’ai fait pour ce site :
- /* -------------------------------------------------------------------- */
- /* Personnalisation de la lame sommaire du couteau suisse */
- /* /plugins/auto/couteau_suisse/outils/sommaire.css.html */
- /* -------------------------------------------------------------------- */
- .cs_sommaire {
- margin-right:20% !important;
- margin-left:20% !important;
- margin-bottom:50px !important;
- width:60% !important;
- white-space:nowrap !important;
- }
- .cs_sommaire_avec_fond {
- border: 1px solid rgb(211, 134, 16) !important;
- }
- .cs_sommaire_sans_fond {
- border: thin solid rgb(211, 134, 16) !important;
- background-color: #F9F9F9 !important;
- }
- .cs_sommaire_inner>ul>li>a {
- font-weight: bold; font-size: 115%
- }
- div.cs_sommaire_titre_avec_fond, div.cs_sommaire_titre_sans_fond {
- color : #195472 !important;
- }
Analyse :
.cs_sommaire {
margin-right:20% !important;
margin-left:20% !important;
margin-bottom:50px !important;
width:60% !important;
white-space:nowrap !important;
}Sert à centrer le sommaire (écrire float:center !important; ne marche pas).
Ceci est basé sur un calcul de l’espace occupé par les 60 caractères choisis pour la Largeur du sommaire et le reste de l’espace disponible divisé par 2 (les 2 marges) :
.. 60% : largeur (width) du sommaire
+ 20% : marge de droite
+ 20% : marge de gauche
= 100% de l’espace total.
white-space:nowrap : empêche le texte de revenir à la ligne (et place des …)
margin-bottom : pour que l’espace sous le sommaire, c’est-à-dire avant le début de l’article proprement dit soit plus important.
.cs_sommaire_avec_fond {
border: 1px solid rgb(211, 134, 16) !important;
}
.cs_sommaire_sans_fond {
border: thin solid rgb(211, 134, 16) !important;
background-color: #F9F9F9 !important;
}Sert à changer les couleurs du fond et de la bordure.
.cs_sommaire_inner>ul>li>a {
font-weight: bold; font-size: 115%
}Permet d’obtenir que les titres de niveau 1 soient présenté en plus grand et gras que les autres.
div.cs_sommaire_titre_avec_fond, div.cs_sommaire_titre_sans_fond {
color : #195472 !important;
}Pour changer la couleur du mot "Sommaire".
Pour mettre des puces avant chaque élément du sommaire
Je n’ai pas choisi cette option, mais si vous souhaitez que chaque élément de la liste des titres dans le sommaire soit précédé d’une puce ronde, vous pouvez ajouter dans perso.css.html les lignes suivantes, à placer après celles concernant
.cs_sommaire_sans_fond {...} :
div.cs_sommaire ul li {
list-style-type: disc !important;
margin-left: 1em !important;
}ex :
• Titre 1
• Titre 2
Autres modifications
Placer les "retour sommaire" à la fin des intertitres
Je ne sais pas pour vous, mais pour moi, un petit
en début de titre, ça me fait penser à une puce. Du coup, avant de lire la doc du Couteau Suisse, je n’aurai jamais pensé à cliquer dessus pour revenir au sommaire.
Je me suis donc dit qu’il suffisait de les mettre à la fin (même si c’est moins joli).
On utilise :
base : plugins/couteau_suisse/outils/sommaire_fonction.php ;
on y prendra les lignes que l’on veut changer pour les coller dans
notre feuille mes_options.php (à créer si nécessaire) qui doit se trouver dans le dossier /config
- <?php
- // Surchage de la lame "sommaire automatique" du couteau suisse
- // Permet de placer les puces de retour au sommaire après les intertitres plutôt qu'avant
- function sommaire_lien_retour($self, $titre) {
- static $haut = NULL;
- $haut = '<a title="'._T('couteau:sommaire_titre').'" href="'.$self.'#outil_sommaire" class="sommaire_ancre"> </a>';
- return $titre . ' ' . $haut;
- }
Le ' ' placé dans la dernière ligne ci-dessus permet de décoller la puce de retour au sommaire du texte lui-même, c’est plus joli.
Si vous ne voulez pas de retour au sommaire du tout
- <?php
- // Surchage de la lame "sommaire automatique" du couteau suisse
- // Permet de supprimer les puces de retour au sommaire
- function sommaire_lien_retour($self, $titre) {
- return $titre;
- }
Résultat avant / après modification des fichiers
Pb lié au remplacement des Intertitres hiérarchisés
Les ancres et liens générés par ce sommaire sont calculés différemment de ceux des Intertitres hiérarchisés. Il me va donc falloir (et à vous aussi si vous utilisiez auparavant les Intertitres) repasser toutes mes pages et tous les liens internes de ce site … joli travail en perspective :-D