- Créer un album photo
- Désactiver le formulaire des langues
- Cacher un item du menu principal
- Ajouter un item au menu principal
- Cacher un item du menu des rubriques
- Annonce
- Sommaire d’un article et découper en pages
- Changer les couleurs des menus
- Un bandeau différent par langue ou secteur
- Créer un agenda
- Personnaliser l’onglet Contact
- À propos de la licence GPL
- Support après don
- FAVICON personnalisé
- Personnaliser la page d’accueil
- Personnaliser le bandeau
Nous avons regroupé ici les questions le plus fréquemment posées dans les divers forums sur le squelette ALTERNATIVES, les questions posée par courriel ou les questions que nous avons jugé pertinentes de formuler.
Créer un album photo ?
- Exemple : Exemples de thèmes
- Préparer les images
- Les images doivent être enregistrées dans l’un des trois formats suivants : PNG (.png), GIF (.gif), JPEG (.jpg).
- Les dimensions originales des images seront conservées, SPIP se chargeant de produire les vignettes et les images affichées à des tailles adaptées à la mise en page ; par contre, afin de réduire l’espace occupée sur le serveur, les images de grande dimension auraient avantage à être réduites à une largeur ne dépassant pas 800px ; la hauteur sera proportionnellement ajustée en conséquence.
- Les images ont aussi avantage à être optimisées dans le format approprié.
- Regrouper toutes les images dans un seul dossier ; le nom du dossier importe peu, mais éviter d’utiliser des espaces, des accents ou des ponctuations.
- Compresser ce dossier au format ZIP (.zip).
- Dans l’espace privé de votre site SPIP, éditer un ARTICLE existant ou en créer un nouveau.
- Après avoir édité et enregistré l’article, dans le bas de la page de prévisualisation interne de SPIP, aller à JOINDRE UN DOCUMENT et téléverser l’archive .zip créée précédemment. ATTENTION : la configuration de certains hébergeurs limite la taille des fichiers que l’on peut téléverser (en upload). Dans ce cas, selon la taille des images à téléverser, il faudra peut-être procéder en plusieurs étapes en faisant des paquets zippés de taille plus réduite.
- SPIP demande alors si l’on désire décompresser l’archive sur le serveur ; répondre OUI.
- SPIP génère les vignettes automatiquement (sinon, s’assurer que dans Configuration -> Fonctions avancées, on a bien coché Générer automatiquement les miniatures des images, la dimension des vignettes à spécifier importe peu, le présent squelette redimensionnera les vignettes à une taille convenable pour la mise en page).
- Optionnellement, on peut ajouter un TITRE et un TEXTE à chaque image.
Sur le site public, les vignettes apparaissent sous le texte de l’article dans la section Portfolio. En cliquant sur une vignette, une version agrandie s’affichera au dessus des vignettes ; si la largeur de l’image originale est plus grande que 440px, elle sera réduite proportionnelement à 440px afin de ne pas déboder de la colonne centrale. Cliquer à nouveau sur cette image agrandie aura pour effet d’afficher l’image originale dans une nouvelle fenêtre.
Le Portfolio est aussi compatible avec le plugin Thickbox ou mieux, Thickbox2 . Dans ce cas, en cliquant sur les vignettes, elles s’ouvriront dans en surimpression de la page avec bouton de navigation et de diaporama ; en cliquant n’importe où dans l’image, on avance vers l’image suivante.
En résumé
Une fois les images préparées et zippées (.zip), créer un album photo dans SPIP ne prend guère plus que le temps de téléchargement de l’archive compressée.
Désactiver le formulaire des langues
Je propose un site purement monolingue. Je souhaite faire disparaitre le menu des langues pour ne pas créer de confusion chez les visiteurs.
RÉPONSE : Pour désactiver le menu des langues dans le bandeau, aller dans l’espace privé à Configuration -> Gestion des langues -> Multilinguisme et décocher toutes les langues. Vider le cache et le menu des langues ne sera plus affiché sur le site public.
À partir de la version 1.9.1.1 un menu contextuel des langues remplace le formulaire des langues. Un site monolingue n’affiche pas de menu ou le formulaire des langues.
Cacher un item du menu principal
Je veux qu’un des items du menu principal (dans le haut) ne soit pas affiché.
RÉPONSE : Chacun des items du menu principal (dans le haut) possède son propre sélecteur CSS. Il est donc possible par une règle de style de ne pas l’afficher. Exemple : si on veut cacher l’item Contact, il suffit d’indiquer dans une des feuilles de styles de personnalisation la règle suivante :
-
#menu-principal-contact {display:none}
On peut ainsi cacher :
-
#menu-principal-accueil {display:none} -
#menu-principal-contact {display:none} -
#menu-principal-plan {display:none} -
#menu-principal-sites {display:none} -
#menu-principal-resume {display:none}
Ajouter un item au menu principal
Je veux ajouter des onglets au menu principal (dans le haut).
RÉPONSE : Pour ajouter le titre d’un article ou d’une rubrique sous forme d’onglet dans le menu principal du haut, il suffit de leur assigner le mot-clé approprié.
Les titres des articles et rubriques affectés du mot-clé très exactement libellé inclu_menu_principal sont inclus dans les onglets du menu principal (horizontal, en haut).
Ces onglets s’insèrent par défaut immédiatement après le premier onglet : Accueil. Le titre des articles d’abord, le titre des rubriques ensuite.
Il est conseillé de créer ce mot-clé à l’intérieur d’un groupe de mots-clés très exactement libellé _config_ afin de ne pas afficher aux visiteurs sur le site public, les mot-clés de configuration et les articles auxquels ils sont affectés au bas des articles et dans la page des mots-clés.
Il n’y a aucune modification à apporter aux squelettes pour que cette fonctionnalité soit prise en compte. Cette fonctionnalité est ajouté au squelette /inc/inc-menu-principal.html à compter de la version 1.9.1.3.
Truc : à compter de la version 1.9.2.
- Il est aussi possible d’ordonner les items ainsi insérés. Il suffit d’appliquer la même technique que celle utilisée pour ordonner le menu des rubriques (à gauche) en ajoutant un nombre suivi d’un point et d’une espace au début du titre de l’article ou de la rubrique.
- pour insérer le titre d’une rubrique entre les onglets de deux articles, il suffit de créer un article virtuel dont le titre sera inséré à l’endroit désiré en utilisant le truc décrit plus haut. Cet article virtuel auquel on aura assigné le mot-clé approprié redirigera vers la rubrique désirée (auquel on prendra soin de ne PAS assigner le mot-clé d’inclusion).
Cacher un item du menu des rubriques
Je veux cacher un item du menu des rubriques (à gauche).
RÉPONSE : Pour que le titre d’une rubrique ou d’un article ne soit pas affiché dans le menu des rubriques à gauche, il suffit de leur assigner le mot-clé approprié.
Les titres des articles et rubriques affectés du mot-clé très exactement libellé exclu_menu_rub ne seront pas affichés dans le menu des rubriques à gauche.
Il est conseillé de créer ce mot-clé à l’intérieur d’un groupe de mots-clés très exactement libellé _config_ afin de ne pas afficher aux visiteurs sur le site public, les mot-clés de configuration et les articles auxquels ils sont affectés au bas des articles et dans la page des mots-clés.
Il n’y a aucune mofification à apporter aux squelettes pour que cette fonctionnalité soit prise en compte. Cette fonctionnalité est ajouté au squelette /inc/inc-menu.html à compter de la version 1.9.1.3.
Annonce
Je désire ajouter un bloc Annonce dans la colonne de droite de toutes les pages du site.
RÉPONSE : Pour ajouter un bloc ANNONCE apparaissant dans la colonne de droite de toutes les pages du site, il existe deux méthodes :
- assigner le mot-clé
Annonce(avec un A majuscule) à un article ou une rubrique. Pour un article, on affiche alors le LOGO de l’article ; si l’article ne possède pas de logo, on affiche alors le SURTITRE, le TITRE et le SOUSTITRE ; pour une rubrique, on affiche le LOGO, sinon, le TITRE seulement. - inscrire le mot
Annonce(avec un A majuscule) au titre d’une image attachée à un article ou une rubrique. (Voir la saisie d’écran ci-contre)
Dans les deux cas, l’image ou le titre est inséré dans un hyperlien qui pointe vers son artice ou sa rubrique. Astuce : si l’article est virtuel, en cliquant sur l’image, le lien sera redirigé vers celui spécifié dans la redirection de l’article (disponible uniquement pour les articles).
Sommaire d’un article et découper en pages
Je voudrait obtenir un Sommaire au début d’un article, comme sur la présente page.
Le bloc sommaire que l’on retrouve à gauche, au début du texte de certains articles est généré automatiquement sur la base des intertitres d’un article d’une rubrique ou d’une brève, à la condition d’installer le plugin Couteau Suisse et d’activer la lame Un sommaire automatique ou encore mieux, en activant (ou initialisant) le pack Ahuntsic dans la colonne de gauche du Couteau Suisse.
De même, le découpage d’un article en plusieurs pages repose sur la lame Découpe en pages et onglets du Couteau Suisse.
Pour provoquer un découpage, insérer cinq (5) tirets continus : ----- ou quatre (4) signes plus ++++, sur une seule ligne, à l’endroit où vous désirez découper la page, généralement, juste au dessus d’un intertitre.
Changer les couleurs des menus
Comment changer les couleurs des divers menus de navigation ?
RÉPONSE : Voir la feuille de style perso.css des divers exemples de thèmes livrés avec le présent jeu de squelettes, notamment le thème perso-aj .
Un bandeau différent par langue ou secteur
Comment obtenir une image différente dans le bandeau d’entête selon la langue, le secteur, la rubrique ou même l’article ?
RÉPONSE : Vous remarquerez que dans le code source de chaque page du site l’on retrouve des éléments semblable à ceci :
Ces éléments permettent de sélectionner et modifier globalement ou très finement toute propriété de style pour une langue donnée, un secteur précis, une rubrique, un article, une brève, etc..
Ainsi, pour attribuer une image de bandeau d’entête différent selon la langue, il suffit dans votre feuille perso.css d’ajouter les sélecteurs appropriés.
Exemple : pour changer, selon la langue du contexte, le bandeau d’entête d’un site dont la langue principale est le français :
- #entete {background-image: url(img/bandeau.jpg);}/* par defaut */
- body.en #entete {background-image: url(img/bandeau-en.jpg);}/* anglais */
- body.es #entete {background-image: url(img/bandeau-es.jpg);}/* espagnol */
Pour avoir une image de bandeau différente selon les secteurs ou rubriques à la racine, on ajouterait plutôt :
- #entete {background-image: url(img/bandeau.jpg);}/* par defaut */
- body.sect27 #entete {background-image: url(img/bandeau-27.jpg);}
- body.sect31 #entete {background-image: url(img/bandeau-31.jpg);}
Cette technique n’est pas limitée aux modification du seul bandeau d’entête. Elle peut être utilisée pour modifier les règles de styles de tout élément d’un article, d’une rubrique, d’une brève, d’un auteur ou d’un site référencée en particulier.
Créer un agenda
Comment créer un agenda d’événements ?
RÉPONSE : Tout article de n’importe quelle rubrique peut devenir un évènement à venir qui sera listé dans un menu Agenda sous le menu des rubriques (à gauche), comme sur le présent site. De plus, l’article sera listé dans la page Agenda. Une fois la date de l’évènement passé, l’article n’est plus affiché dans le menu Agenda et passe en archivage par mois dans la page Agenda . S’il n’y plus d’évènement à venir, le menu Agenda ne s’affiche pas.
Les articles restent accessibles dans leurs rubriques respectives. Il n’est donc PAS nécessaire de créer une rubrique Agenda à cet effet, tout se passe sur les articles, peu importe leurs rubriques. Ce qui permet une beaucoup plus grande souplesse.
Pour produire un évènement à venir dans l’ Agenda , il faut faire 2 opérations :
- Il faut d’abord attribuer à un article le mot-clé
Agenda, préférablement du groupe de mots-clés_config_. - Il faut attribuer une DATE DE RÉDACTION ANTÉRIEURE à l’article, cette date, étant la date de l’évènement à venir (ça peut sembler bizarre, mais c’est comme ça que ça fonctionne). Si la DATE DE RÉDACTION ANTÉRIEURE n’est pas disponible (sous la date de l’article), il vous faut activer cette option dans la Configuration de votre site (dans l’espace privé).
Il existe aussi un plugin de gestion d’événement beaucoup plus sophistiqué que celui livré par défaut avec nos squelette et développé spécifiquement pour les squelettes d’Alternatives par Patrice Vanneufville. Moyennant quelques modifications, la procédure décrite devrait aussi fonctionner avec le squelette Ahuntsic.
Personnaliser l’onglet Contact
Comment personnaliser le lien de l’onglet « Contact » ?
Les liens Contact dans le menu principal et dans le pied de page, renvoient par défaut à l’auteur numéro 1. Vous pouvez y inscrire vos coordonnés (adresse, numéro de téléphone, etc…) dans le champs « Qui êtes-vous ? ». Ils apparaîtront dans la page de l’auteur numéro 1, au dessus du formulaire d’envoi de courriel et de la liste des articles de cet auteur.
Le champ « Qui êtes-vous ? » peut contenir des informations multilingues en y insérant un bloc multilingue [1] ainsi :
- <multi>Country: South Africa[fr]Pays: Afrique du sud</multi>
Si vous désirez lier un autre auteur à ce contact, il faudra copier dans votre dossier de personnalisation les deux squelettes suivants et les modifier en conséquence :
- ../alternatives/inc/inc-menu.html
- ../alternatives/inc/inc-bas.html
Dans ces 2 fichiers, il faut remplacer le numéro 1 dans #URL_AUTEUR{1} par le numéro de l’auteur désiré.
Page de formulaire de Contact avancé
Pour obtenir une page et un formulaire de Contact disposant d’options de personnalisation plus avancées, nous recommandons d’installer le plugin Formulaire de contact avancé. Dans ce dernier cas, nous suggérons de :
- configurer le plugin selon vos besoins
- créer un article dédié à cette fin
- insérer dans le TEXTE de cet article (précédé ou suivi de tout texte, images ou média désiré) le code suivant :
Enfin, pour que l’onglet Contact dans le haut de la page et le lien Contact dans le pied de page conduisent vers cet article, copier dans votre dossier de personnalisation les deux squelettes suivants et les modifier en conséquence :
- ../alternatives/inc/inc-menu.html
- ../alternatives/inc/inc-bas.html
Dans ces 2 fichiers, il faut remplacer #URL_AUTEUR{1} par #URL_ARTICLE{XX}, où XX représente le numéro de l’article contenant le formulaire de contact avancé.
À propos de la licence GPL
Quelles est précisément la licence applicable aux squelettes d’Alternatives : GPL ou CC (by-sa) ?
La licence applicable aux squelettes d’Alternatives est la GPL, tel que spécifié dans l’article Squelette ALTERNATIVES 1.9.2 et dans /plugins/alternatives/COPYING.txt.
La licence Creative Commons (by-sa) dans le pied de page du présent site concerne uniquement le contenu du site, à moins d’indication contraire.
La licence CC (by-sa) est aussi installé au bas de chacune de vos pages à titre de SUGGESTION uniquement.
En pratique, la licence GPL ne vous oblige PAS à afficher sur votre site ni la mention à SPIP, ni la mention aux squelettes d’Alternatives. Elle ne vous oblige qu’à conserver le fichier COPYING.txt intact.
Vous pouvez donc librement retirer toute référence à SPIP ou à Alternatives. Toutefois, ces deux mentions aident grandement les participants au présent forum à répondre adéquatement aux questions qui sont postées ici puisque ces mentions indiquent discrètement la version de SPIP et la version des squelettes.
De plus, vous pouvez aussi retirer ou remplacer par celui qui vous convient, le bouton Creative Commons dans le pied de page de votre site.
Vous pourriez tout à fait dans le pied de page de votre site ne conserver que les deux mentions à SPIP et Alternatives et remplacer le bouton CC par un Copyright classique pour le contenu de votre site ou même retirer tout simplement les trois mentions et appliquer un droit d’auteur au cas par cas sur chaque article. À ma souvenance, il existerait même un plugin à cet effet.
Pour modifier le pied de page :
- recopier ../alternatives/inc/inc-bas.html dans /squelettes/inc/inc-bas.html
- enlever ou modifier les passages qui ne vous conviennent pas.
Support après don
Fournissez-vous un support personnalisé après don (SAD) ? Pouvez-vous m’apporter une aide personnalisée par courriel ou autre ?
Le seul support disponible est celui maintenu par les utilisateurs des squelettes AHUNTSIC sur le forum dédié à cet effet.
Désolé, c’est la seule forme d’aide que nous sommes en mesure d’offrir. Notamment, nous ne répondrons systématiquement PAS à aucun courriel privé de demande d’aide ou de support.
FAVICON personnalisé
Comment personnaliser le favicon que l’on retrouve dans la barre d’adresse des navigateurs ?
Deux méthodes sont disponibles :
- Joignez un logo à votre site (.jpg, .gif ou .png dans Configuration -> Contenu du site, de préférence de dimension carré ; SPIP se chargera de fabriquer un favicon de 32 x 32 pixels à partir de l’image du logo.
- Placez directement dans votre dossier
/squelettes/[2] votre image au format .ico très exactement libelléefavicon.ico.
Personnaliser la page d’accueil
Comment personnaliser la partie de la colonne centrale de la page d’accueil ?
Comme pour toute personnalisation des squelettes, il faut copier dans votre dossier ./squelettes/ (que vous devez créer à la racine de SPIP) le ou les fichiers squelettes appropriés en respectant la structure originelle des squelettes.
Dans le cas de la page d’accueil, la partie centrale est contrôlée par deux fichiers que vous devez copier dans votre dossier /squelettes/
- ./squelettes/inc/inc-sommaire-edito.html
- ./squelettes/inc/inc-sommaire-articles.html
Une fois ces deux fichiers copiés dans le dossier ./squelettes/ vous pourrez procéder à leur modification à votre guise. Le fichier source des squelettes est amplement documenté.
Exemples
- Ne pas afficher en page d’accueil les articles les plus récents :
- créer les répertoires ./squelettes/inc/ (s’ils n’existent déjà),
- y copier inc-sommaire-articles.html,
- effacer tout le contenu de inc-sommaire-articles.html.
- Limiter le nombre d’article récents à 5 :
- créer les répertoires ./squelettes/inc/ (s’ils n’existent déjà),
- y copier inc-sommaire-articles.html,
- rechercher et modifier
{pagination 10}par{pagination 5}
Pour plus de détails sur la personnalissation des squelettes, voir : Personnalisation avancée
Personnaliser le bandeau
Comment personnaliser le bandeau d’entête ?
Le bandeau est défini dans les fichiers suivants :
- ../ahuntsic/inc/inc-bandeau.html
- ../ahuntsic/styles/alter.css
- ../ahuntsic/styles/base.css
Modifier les images seulement
- récupérez sur votre poste les deux images suivantes :
- modifiez les images à votre guise (en conservant les dimensions)
- déposez-les ensuite dans votre dossier /squelettes/ à :
- /squelettes/styles/img/globe.jpg
- /squelettes/styles/img/autre-monde.jpg
- inscrire dans /squelettes/styles/perso.css les lignes suivants :
- #entete {
- background-image: url(img/globe.jpg);
- background-repeat: no-repeat;
- background-position: left bottom;
- text-align: right;
- }
- #entete a.nom-site,
- #entete a.nom-site:link,
- #entete a.nom-site:visited {
- background-image: url(img/autre-monde.jpg);
- background-repeat: no-repeat;
- background-position: right top;
- }
Une seule image de fond de bandeau
Si vous ne voulez pas afficher la deuxième image (à droite) dans le bandeau, inutile de la modifier ; simplement remplacer la déclaration précédente par celle-ci :
- #entete a.nom-site,
- #entete a.nom-site:link,
- #entete a.nom-site:visited { background-image: url(none); }
Ne plus afficher le texte du titre du site
De même, si vous désirez incruster le titre de votre site dans l’image du bandeau et en conséquence, ne pas afficher en double le texte du titre, inscrivez la ligne suivante dans /squelettes/styles/perso.css :
- #entete .nom-site span { right:2000px; }
Modifier la hauteur du bandeau
Si vous désirez utiliser une ou des images d’une hauteur différente de celles utilisées par défaut (qui sont de 180px), il faudra aussi modifier quelques règles de styles. Si nous voulons par exemple obtenir un bandeau de 120px de hauteur plutôt que 180px, il faudra ajouter dans le fichier personnalisé des style /squelettes/styles/perso.css les règles suivantes :
- #entete { height: 120px; } /* la hauteur de la nouvelle image du bandeau */
- #encart { height: 130px } /* hauteur de l'image + 10px */
- #menu-rubriques { height: 130px } /* hauteur de l'image + 10px */
Questions et réponses sur le FORUM des utilisateurs
